Skip to content

Instantly share code, notes, and snippets.

@vigorousnorth

vigorousnorth/index.html

Last active January 26, 2016 18:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vigorousnorth/5fa58afeefb073b5eb95 to your computer and use it in GitHub Desktop.
Save vigorousnorth/5fa58afeefb073b5eb95 to your computer and use it in GitHub Desktop.
Download ZIP
D3 animated scatterplot
Raw
index.html
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="urbanizedpopulation.js"></script>
<style>
@media screen and (max-width: 799px) {
aside {right: 0px;}
text { font: 8px sans-serif; }
.year.label { font: 700 66px "Open Sans"; }
#chart {margin: 0px;}
.dotlabel#Maine { font: 11px sans-serif; z-index: 5000;}
}
@media screen and (min-width: 800px) {
#chart {margin: 0px auto;}
aside {right: 150px;}
text { font: 10px sans-serif; }
.year.label { font: 700 90px "Open Sans"; }
}
svg {background: #fff;}
p.slidesection {width: 100%; }
.chartFixed {position: fixed; top: 0px; }
.chatterFixed {position: fixed; top: 0px;}
#mycontainer {width: 60%; margin-top: 1em;}
aside {
font-size: 1em;
font-family: "Open sans",sans-serif;
text-align: center;
position: fixed;
bottom: 0px;
width: 100%;
background-color: rgba(255,255,255,0.8);
}
aside p.arrow {
font-style: normal;
font-weight: normal;
font-size: 1em;
margin: 0px auto;
color: #222;
z-index: 9999999;
text-shadow: 0px 2px 2px #ddd;
width: 1em;
height: 1em;
}
aside p#down {
-ms-transform: scale(1,-1); /* IE 9 */
-webkit-transform:scale(1,-1); /* Chrome, Safari, Opera */
transform: scale(1,-1);
}
aside p#up {
opacity: 0;
}
#chart {
width: 100%;
}
.dot {
stroke: #fff;
}
.dotlabel {
text-anchor: right;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.label {
fill: #777;
}
.year.label {
fill: #ddd;
z-index: 1000;
}
.year.label.active {
fill: #aaa;
}
.fullpage-wrapper {z-index: 10;}
.slider, .overlay {
fill: none;
pointer-events: all;
cursor: ew-resize;
}
text.dotlabel {
font-style:normal;
font-weight:normal;
paint-order: stroke;
fill:#000;
stroke:#fff;
stroke-width:2px;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-opacity:1;
}
#pagecontainer {min-height: 2000px;}
</style>
<div id="pagecontainer">
<h1>While America urbanized, Mainers went back to the land</h1>
<p id="chart" style="max-width: 645px; z-index: 100;"></p>
</div>
Raw
states.json
[
{"state":"Alabama","region":"South","pct_urbanized":[[1900,11.9],[1910,17.3],[1920,21.7],[1930,28.1],[1940,30.2],[1950,43.8],[1960,54.8],[1970,58.6],[1980,60],[1990,60.4],[2000,55.4],[2010,59]],"population":[[1900,1828697],[1910,2138093],[1920,2348174],[1930,2646248],[1940,2832961],[1950,3061743],[1960,3266740],[1970,3444354],[1980,3893888],[1990,4040587],[2000,4447100],[2010,4779736]]},
{"state":"Alaska","region":"West","pct_urbanized":[[1900,24.5],[1910,9.5],[1920,5.6],[1930,13.2],[1940,24],[1950,26.6],[1960,37.9],[1970,56.9],[1980,64.3],[1990,67.5],[2000,65.6],[2010,66]],"population":[[1900,63592],[1910,64356],[1920,55036],[1930,59278],[1940,72524],[1950,128643],[1960,226167],[1970,302583],[1980,401851],[1990,550043],[2000,626932],[2010,710231]]},
{"state":"Arizona","region":"Southwest","pct_urbanized":[[1900,15.9],[1910,31],[1920,36.1],[1930,34.4],[1940,34.8],[1950,55.5],[1960,74.5],[1970,79.6],[1980,83.8],[1990,87.5],[2000,88.2],[2010,89.8]],"population":[[1900,122931],[1910,204354],[1920,334162],[1930,435573],[1940,499261],[1950,749587],[1960,1302161],[1970,1775399],[1980,2718215],[1990,3665228],[2000,5130632],[2010,6392017]]},
{"state":"Arkansas","region":"South","pct_urbanized":[[1900,8.5],[1910,12.9],[1920,16.6],[1930,20.6],[1940,22.2],[1950,33],[1960,42.8],[1970,50],[1980,51.6],[1990,53.5],[2000,52.5],[2010,56.2]],"population":[[1900,1311564],[1910,1574449],[1920,1752204],[1930,1854482],[1940,1949387],[1950,1909511],[1960,1786272],[1970,1923322],[1980,2286435],[1990,2350725],[2000,2673400],[2010,2915918]]},
{"state":"California","region":"West","pct_urbanized":[[1900,52.3],[1910,61.8],[1920,67.9],[1930,73.3],[1940,71],[1950,80.7],[1960,86.4],[1970,90.9],[1980,91.3],[1990,92.6],[2000,94.4],[2010,95]],"population":[[1900,1485053],[1910,2377549],[1920,3426861],[1930,5677251],[1940,6907387],[1950,10586223],[1960,15717204],[1970,19971069],[1980,23667902],[1990,29760021],[2000,33871648],[2010,37253956]]},
{"state":"Colorado","region":"West","pct_urbanized":[[1900,48.3],[1910,50.3],[1920,48.2],[1930,50.2],[1940,52.6],[1950,62.7],[1960,73.7],[1970,78.5],[1980,80.6],[1990,82.4],[2000,84.5],[2010,86.2]],"population":[[1900,539700],[1910,799024],[1920,939629],[1930,1035791],[1940,1123296],[1950,1325089],[1960,1753947],[1970,2209596],[1980,2889964],[1990,3294394],[2000,4301261],[2010,5029196]]},
{"state":"Connecticut","region":"New England","pct_urbanized":[[1900,59.9],[1910,65.6],[1920,67.8],[1930,70.4],[1940,67.8],[1950,77.6],[1960,78.3],[1970,78.4],[1980,78.8],[1990,79.1],[2000,87.7],[2010,88]],"population":[[1900,908420],[1910,1114756],[1920,1380631],[1930,1606903],[1940,1709242],[1950,2007280],[1960,2535234],[1970,3032217],[1980,3107576],[1990,3287116],[2000,3405565],[2010,3574097]]},
{"state":"Delaware","region":"Mid-Atlantic","pct_urbanized":[[1900,46.4],[1910,48],[1920,54.2],[1930,51.7],[1940,52.3],[1950,62.6],[1960,65.6],[1970,72.2],[1980,70.6],[1990,73],[2000,80.1],[2010,83.3]],"population":[[1900,184735],[1910,202322],[1920,223003],[1930,238380],[1940,266505],[1950,318085],[1960,446292],[1970,548104],[1980,594338],[1990,666168],[2000,783600],[2010,897934]]},
{"state":"Florida","region":"South","pct_urbanized":[[1900,20.3],[1910,29.1],[1920,36.5],[1930,51.7],[1940,55.1],[1950,65.5],[1960,73.9],[1970,81.7],[1980,84.3],[1990,84.8],[2000,89.3],[2010,91.2]],"population":[[1900,528542],[1910,752619],[1920,968470],[1930,1468211],[1940,1897414],[1950,2771305],[1960,4951560],[1970,6791418],[1980,9746324],[1990,12937926],[2000,15982378],[2010,18801310]]},
{"state":"Georgia","region":"South","pct_urbanized":[[1900,15.6],[1910,20.6],[1920,25.1],[1930,30.8],[1940,34.4],[1950,45.3],[1960,55.3],[1970,60.3],[1980,62.4],[1990,63.2],[2000,71.6],[2010,75.1]],"population":[[1900,2216331],[1910,2609121],[1920,2895832],[1930,2908506],[1940,3123723],[1950,3444578],[1960,3943116],[1970,4587930],[1980,5463105],[1990,6478216],[2000,8186453],[2010,9687653]]},
{"state":"Hawaii","region":"West","pct_urbanized":[[1900,25.5],[1910,30.7],[1920,36.1],[1930,53.7],[1940,62.5],[1950,69],[1960,76.5],[1970,83.1],[1980,86.5],[1990,89],[2000,91.5],[2010,91.9]],"population":[[1900,154001],[1910,191874],[1920,255881],[1930,368300],[1940,422770],[1950,499794],[1960,632772],[1970,769913],[1980,964691],[1990,1108229],[2000,1211537],[2010,1360301]]},
{"state":"Idaho","region":"West","pct_urbanized":[[1900,6.2],[1910,21.5],[1920,27.6],[1930,29.1],[1940,33.7],[1950,42.9],[1960,47.5],[1970,54.1],[1980,54],[1990,57.4],[2000,66.4],[2010,70.6]],"population":[[1900,161772],[1910,325594],[1920,431866],[1930,445032],[1940,524873],[1950,588637],[1960,667191],[1970,713015],[1980,943935],[1990,1006749],[2000,1293953],[2010,1567582]]},
{"state":"Illinois","region":"Midwest","pct_urbanized":[[1900,54.3],[1910,61.7],[1920,67.9],[1930,73.9],[1940,73.6],[1950,77.6],[1960,80.7],[1970,83.2],[1980,83.3],[1990,84.6],[2000,87.8],[2010,88.5]],"population":[[1900,4821550],[1910,5638591],[1920,6485280],[1930,7630654],[1940,7897241],[1950,8712176],[1960,10081158],[1970,11110285],[1980,11426518],[1990,11430602],[2000,12419293],[2010,12830632]]},
{"state":"Indiana","region":"Midwest","pct_urbanized":[[1900,34.3],[1910,42.4],[1920,50.6],[1930,55.5],[1940,55.1],[1950,59.9],[1960,62.4],[1970,64.9],[1980,64.2],[1990,64.9],[2000,70.8],[2010,72.4]],"population":[[1900,2516462],[1910,2700876],[1920,2930390],[1930,3238503],[1940,3427796],[1950,3934224],[1960,4662498],[1970,5195392],[1980,5490224],[1990,5544159],[2000,6080485],[2010,6483802]]},
{"state":"Iowa","region":"Midwest","pct_urbanized":[[1900,25.6],[1910,30.6],[1920,36.4],[1930,39.6],[1940,42.7],[1950,47.7],[1960,53],[1970,57.2],[1980,58.6],[1990,60.6],[2000,61.1],[2010,64]],"population":[[1900,2231853],[1910,2224771],[1920,2404021],[1930,2470939],[1940,2538268],[1950,2621073],[1960,2757537],[1970,2825368],[1980,2913808],[1990,2776755],[2000,2926324],[2010,3046355]]},
{"state":"Kansas","region":"Great Plains","pct_urbanized":[[1900,22.4],[1910,29.1],[1920,34.8],[1930,38.8],[1940,41.9],[1950,52.1],[1960,61],[1970,66.1],[1980,66.7],[1990,69.1],[2000,71.4],[2010,74.2]],"population":[[1900,1470495],[1910,1690949],[1920,1769257],[1930,1880999],[1940,1801028],[1950,1905299],[1960,2178611],[1970,2249071],[1980,2363679],[1990,2477574],[2000,2688418],[2010,2853118]]},
{"state":"Kentucky","region":"South","pct_urbanized":[[1900,21.8],[1910,24.3],[1920,26.2],[1930,30.6],[1940,29.8],[1950,36.8],[1960,44.5],[1970,52.3],[1980,50.9],[1990,51.8],[2000,55.8],[2010,58.4]],"population":[[1900,2147174],[1910,2289905],[1920,2416630],[1930,2614589],[1940,2845627],[1950,2944806],[1960,3038156],[1970,3220711],[1980,3660777],[1990,3685296],[2000,4041769],[2010,4339367]]},
{"state":"Louisiana","region":"South","pct_urbanized":[[1900,26.5],[1910,30],[1920,34.9],[1930,39.7],[1940,41.5],[1950,54.8],[1960,63.3],[1970,66.5],[1980,68.6],[1990,68.1],[2000,72.6],[2010,73.2]],"population":[[1900,1381625],[1910,1656388],[1920,1798509],[1930,2101593],[1940,2363880],[1950,2683516],[1960,3257022],[1970,3644637],[1980,4205900],[1990,4219973],[2000,4468976],[2010,4533372]]},
{"state":"Maryland","region":"Mid-Atlantic","pct_urbanized":[[1900,49.8],[1910,50.8],[1920,60],[1930,59.8],[1940,59.3],[1950,69],[1960,72.7],[1970,76.6],[1980,80.3],[1990,81.3],[2000,86.1],[2010,87.2]],"population":[[1900,1188044],[1910,1295346],[1920,1449661],[1930,1631526],[1940,1821244],[1950,2343001],[1960,3100689],[1970,3923897],[1980,4216975],[1990,4781468],[2000,5296486],[2010,5773552]]},
{"state":"Massachusetts","region":"New England","pct_urbanized":[[1900,86],[1910,89],[1920,90],[1930,90.2],[1940,89.4],[1950,84.4],[1960,83.6],[1970,84.6],[1980,83.8],[1990,84.3],[2000,91.4],[2010,92]],"population":[[1900,2805346],[1910,3366416],[1920,3852356],[1930,4249614],[1940,4316721],[1950,4690514],[1960,5148578],[1970,5689170],[1980,5737037],[1990,6016425],[2000,6349097],[2010,6547629]]},
{"state":"Michigan","region":"Midwest","pct_urbanized":[[1900,39.3],[1910,47.2],[1920,61.1],[1930,68.2],[1940,65.7],[1950,70.7],[1960,73.4],[1970,74],[1980,70.7],[1990,70.5],[2000,74.7],[2010,74.6]],"population":[[1900,2420982],[1910,2810173],[1920,3668412],[1930,4842325],[1940,5256106],[1950,6371766],[1960,7823194],[1970,8881826],[1980,9262078],[1990,9295297],[2000,9938444],[2010,9883640]]},
{"state":"Minnesota","region":"Midwest","pct_urbanized":[[1900,34.1],[1910,41],[1920,44.1],[1930,49],[1940,49.8],[1950,54.5],[1960,62.2],[1970,66.5],[1980,66.9],[1990,69.9],[2000,70.9],[2010,73.3]],"population":[[1900,1751394],[1910,2075708],[1920,2387125],[1930,2563953],[1940,2792300],[1950,2982483],[1960,3413864],[1970,3806103],[1980,4075970],[1990,4375099],[2000,4919479],[2010,5303925]]},
{"state":"Mississippi","region":"Southeast","pct_urbanized":[[1900,7.7],[1910,11.5],[1920,13.4],[1930,16.9],[1940,19.8],[1950,27.9],[1960,37.7],[1970,44.5],[1980,47.3],[1990,47.1],[2000,48.8],[2010,49.4]],"population":[[1900,1551270],[1910,1797114],[1920,1790618],[1930,2009821],[1940,2183796],[1950,2178914],[1960,2178141],[1970,2216994],[1980,2520638],[1990,2573216],[2000,2844658],[2010,2967297]]},
{"state":"Missouri","region":"Midwest","pct_urbanized":[[1900,36.3],[1910,42.3],[1920,46.6],[1930,51.2],[1940,51.8],[1950,61.5],[1960,66.6],[1970,70.1],[1980,68.1],[1990,68.7],[2000,69.4],[2010,70.4]],"population":[[1900,3106665],[1910,3293335],[1920,3404055],[1930,3629367],[1940,3784664],[1950,3954653],[1960,4319813],[1970,4677623],[1980,4916686],[1990,5117073],[2000,5595211],[2010,5988927]]},
{"state":"Montana","region":"West","pct_urbanized":[[1900,34.7],[1910,35.5],[1920,31.3],[1930,33.7],[1940,37.8],[1950,43.7],[1960,50.2],[1970,53.4],[1980,52.9],[1990,52.5],[2000,54.1],[2010,55.9]],"population":[[1900,243329],[1910,376053],[1920,548889],[1930,537606],[1940,559456],[1950,591024],[1960,674767],[1970,694409],[1980,786690],[1990,799065],[2000,902195],[2010,989415]]},
{"state":"Nebraska","region":"Great Plains","pct_urbanized":[[1900,23.7],[1910,26.1],[1920,31.3],[1930,35.3],[1940,39.1],[1950,46.9],[1960,54.3],[1970,61.5],[1980,62.9],[1990,66.1],[2000,69.8],[2010,73.1]],"population":[[1900,1066300],[1910,1192214],[1920,1296372],[1930,1377963],[1940,1315834],[1950,1325510],[1960,1411330],[1970,1485333],[1980,1569825],[1990,1578385],[2000,1711263],[2010,1826341]]},
{"state":"Nevada","region":"West","pct_urbanized":[[1900,17],[1910,16.3],[1920,19.7],[1930,37.8],[1940,39.3],[1950,57.2],[1960,70.4],[1970,80.9],[1980,85.3],[1990,88.3],[2000,91.5],[2010,94.2]],"population":[[1900,42335],[1910,81875],[1920,77407],[1930,91058],[1940,110247],[1950,160083],[1960,285278],[1970,488738],[1980,800493],[1990,1201833],[2000,1998257],[2010,2700551]]},
{"state":"New Hampshire","region":"New England","pct_urbanized":[[1900,46.7],[1910,51.8],[1920,56.5],[1930,58.7],[1940,57.6],[1950,57.5],[1960,58.3],[1970,56.4],[1980,52.2],[1990,51],[2000,59.3],[2010,60.3]],"population":[[1900,411588],[1910,430572],[1920,443083],[1930,465293],[1940,491524],[1950,533242],[1960,606921],[1970,737681],[1980,920610],[1990,1109252],[2000,1235786],[2010,1316470]]},
{"state":"New Jersey","region":"Northeast","pct_urbanized":[[1900,70.6],[1910,76.4],[1920,79.9],[1930,82.6],[1940,81.6],[1950,86.6],[1960,88.6],[1970,88.9],[1980,89],[1990,89.4],[2000,94.4],[2010,94.7]],"population":[[1900,1883669],[1910,2537167],[1920,3155900],[1930,4041334],[1940,4160165],[1950,4835329],[1960,6066782],[1970,7171112],[1980,7364823],[1990,7730188],[2000,8414350],[2010,8791894]]},
{"state":"New Mexico","region":"Southwest","pct_urbanized":[[1900,14],[1910,14.2],[1920,18],[1930,25.2],[1940,33.2],[1950,50.2],[1960,65.9],[1970,69.8],[1980,72.1],[1990,73],[2000,75],[2010,77.4]],"population":[[1900,195310],[1910,327301],[1920,360350],[1930,423317],[1940,531818],[1950,681187],[1960,951023],[1970,1017055],[1980,1302894],[1990,1515069],[2000,1819046],[2010,2059179]]},
{"state":"New York","region":"Northeast","pct_urbanized":[[1900,72.9],[1910,78.9],[1920,82.7],[1930,83.6],[1940,82.8],[1950,85.5],[1960,85.4],[1970,85.7],[1980,84.6],[1990,84.3],[2000,87.5],[2010,87.9]],"population":[[1900,7268894],[1910,9113614],[1920,10385227],[1930,12588066],[1940,13479142],[1950,14830192],[1960,16782304],[1970,18241391],[1980,17558072],[1990,17990455],[2000,18976457],[2010,19378102]]},
{"state":"North Carolina","region":"Mid-Atlantic","pct_urbanized":[[1900,9.9],[1910,14.4],[1920,19.2],[1930,25.5],[1940,27.3],[1950,33.7],[1960,39.5],[1970,45.5],[1980,48],[1990,50.4],[2000,60.2],[2010,66.1]],"population":[[1900,1893810],[1910,2206287],[1920,2559123],[1930,3170276],[1940,3571623],[1950,4061929],[1960,4556155],[1970,5084411],[1980,5881766],[1990,6628637],[2000,8049313],[2010,9535483]]},
{"state":"North Dakota","region":"Great Plains","pct_urbanized":[[1900,7.3],[1910,11],[1920,13.6],[1930,16.6],[1940,20.6],[1950,26.6],[1960,35.2],[1970,44.3],[1980,48.8],[1990,53.3],[2000,55.9],[2010,59.9]],"population":[[1900,319146],[1910,577056],[1920,646872],[1930,680845],[1940,641935],[1950,619636],[1960,632446],[1970,617792],[1980,652717],[1990,638800],[2000,642200],[2010,672591]]},
{"state":"Ohio","region":"Midwest","pct_urbanized":[[1900,48.1],[1910,55.9],[1920,63.8],[1930,67.8],[1940,66.8],[1950,70.2],[1960,73.4],[1970,75.3],[1980,73.3],[1990,74.1],[2000,77.4],[2010,77.9]],"population":[[1900,4157545],[1910,4767121],[1920,5759394],[1930,6646697],[1940,6907612],[1950,7946627],[1960,9706397],[1970,10657423],[1980,10797630],[1990,10847115],[2000,11353140],[2010,11536504]]},
{"state":"Oklahoma","region":"Great Plains","pct_urbanized":[[1900,7.4],[1910,19.2],[1920,26.5],[1930,34.3],[1940,37.6],[1950,51],[1960,62.9],[1970,68],[1980,67.3],[1990,67.7],[2000,65.3],[2010,66.2]],"population":[[1900,790391],[1910,1657155],[1920,2028283],[1930,2396040],[1940,2336434],[1950,2233351],[1960,2328284],[1970,2559463],[1980,3025290],[1990,3145585],[2000,3450654],[2010,3751351]]},
{"state":"Oregon","region":"West","pct_urbanized":[[1900,32.2],[1910,45.6],[1920,49.8],[1930,51.3],[1940,48.8],[1950,53.9],[1960,62.2],[1970,67.1],[1980,67.9],[1990,70.5],[2000,78.7],[2010,81]],"population":[[1900,413536],[1910,672765],[1920,783389],[1930,953786],[1940,1089684],[1950,1521341],[1960,1768687],[1970,2091533],[1980,2633105],[1990,2842321],[2000,3421399],[2010,3831074]]},
{"state":"Pennsylvania","region":"Northeast","pct_urbanized":[[1900,54.7],[1910,60.4],[1920,65.1],[1930,67.8],[1940,66.5],[1950,70.5],[1960,71.6],[1970,71.5],[1980,69.3],[1990,68.9],[2000,77.1],[2010,78.7]],"population":[[1900,6302115],[1910,7665111],[1920,8720017],[1930,9631350],[1940,9900180],[1950,10498012],[1960,11319366],[1970,11800766],[1980,11863895],[1990,11881643],[2000,12281054],[2010,12702379]]},
{"state":"Rhode Island","region":"New England","pct_urbanized":[[1900,88.3],[1910,91],[1920,91.9],[1930,92.4],[1940,91.6],[1950,84.3],[1960,86.4],[1970,87.1],[1980,87],[1990,86],[2000,90.9],[2010,90.7]],"population":[[1900,428556],[1910,542610],[1920,604397],[1930,687497],[1940,713346],[1950,791896],[1960,859488],[1970,949723],[1980,947154],[1990,1003464],[2000,1048319],[2010,1052567]]},
{"state":"South Carolina","region":"South","pct_urbanized":[[1900,12.8],[1910,14.8],[1920,17.5],[1930,21.3],[1940,24.5],[1950,36.7],[1960,41.2],[1970,48.3],[1980,54.1],[1990,54.6],[2000,60.5],[2010,66.3]],"population":[[1900,1340316],[1910,1515400],[1920,1683724],[1930,1738765],[1940,1899804],[1950,2117027],[1960,2382594],[1970,2590713],[1980,3121820],[1990,3486703],[2000,4012012],[2010,4625364]]},
{"state":"South Dakota","region":"Great Plains","pct_urbanized":[[1900,10.2],[1910,13.1],[1920,16],[1930,18.9],[1940,24.6],[1950,33.2],[1960,39.3],[1970,44.6],[1980,46.4],[1990,50],[2000,51.9],[2010,56.7]],"population":[[1900,401570],[1910,583888],[1920,636547],[1930,692849],[1940,642961],[1950,652740],[1960,680514],[1970,666257],[1980,690768],[1990,696004],[2000,754844],[2010,814180]]},
{"state":"Tennessee","region":"South","pct_urbanized":[[1900,16.2],[1910,20.2],[1920,26.1],[1930,34.3],[1940,35.2],[1950,44.1],[1960,52.3],[1970,59.1],[1980,60.4],[1990,60.9],[2000,63.6],[2010,66.4]],"population":[[1900,2020616],[1910,2184789],[1920,2337885],[1930,2616556],[1940,2915841],[1950,3291718],[1960,3567089],[1970,3926018],[1980,4591120],[1990,4877185],[2000,5689283],[2010,6346105]]},
{"state":"Texas","region":"South","pct_urbanized":[[1900,17.1],[1910,24.1],[1920,32.4],[1930,41],[1940,45.4],[1950,62.7],[1960,75],[1970,79.7],[1980,79.6],[1990,80.3],[2000,82.5],[2010,84.7]],"population":[[1900,3048710],[1910,3896542],[1920,4663228],[1930,5824715],[1940,6414824],[1950,7711194],[1960,9579677],[1970,11198655],[1980,14229191],[1990,16986510],[2000,20851820],[2010,25145561]]},
{"state":"Utah","region":"West","pct_urbanized":[[1900,38.1],[1910,46.3],[1920,48],[1930,52.4],[1940,55.5],[1950,65.3],[1960,74.9],[1970,80.4],[1980,84.4],[1990,87],[2000,88.2],[2010,90.6]],"population":[[1900,276749],[1910,373351],[1920,449396],[1930,507847],[1940,550310],[1950,688862],[1960,890627],[1970,1059273],[1980,1461037],[1990,1722850],[2000,2233169],[2010,2763885]]},
{"state":"Vermont","region":"New England","pct_urbanized":[[1900,22.1],[1910,27.8],[1920,31.2],[1930,33],[1940,34.3],[1950,36.4],[1960,38.5],[1970,32.2],[1980,33.8],[1990,32.2],[2000,38.2],[2010,38.9]],"population":[[1900,343641],[1910,355956],[1920,352428],[1930,359611],[1940,359231],[1950,377747],[1960,389881],[1970,444732],[1980,511456],[1990,562758],[2000,608827],[2010,625741]]},
{"state":"Virginia","region":"Mid-Atlantic","pct_urbanized":[[1900,18.3],[1910,23.1],[1920,29.2],[1930,32.4],[1940,35.3],[1950,47],[1960,55.6],[1970,63.2],[1980,66],[1990,69.4],[2000,73],[2010,75.5]],"population":[[1900,1854184],[1910,2061612],[1920,2309187],[1930,2421851],[1940,2677773],[1950,3318680],[1960,3966949],[1970,4651448],[1980,5346818],[1990,6187358],[2000,7078515],[2010,8001024]]},
{"state":"Washington","region":"West","pct_urbanized":[[1900,40.8],[1910,53],[1920,54.8],[1930,56.6],[1940,53.1],[1950,63.2],[1960,68.1],[1970,73.4],[1980,73.5],[1990,76.4],[2000,82],[2010,84.1]],"population":[[1900,518103],[1910,1141990],[1920,1356621],[1930,1563396],[1940,1736191],[1950,2378963],[1960,2853214],[1970,3413244],[1980,4132156],[1990,4866692],[2000,5894121],[2010,6724540]]},
{"state":"West Virginia","region":"South","pct_urbanized":[[1900,13.1],[1910,18.7],[1920,25.2],[1930,28.4],[1940,28.1],[1950,34.6],[1960,38.2],[1970,39.1],[1980,36.2],[1990,36.1],[2000,46.1],[2010,48.7]],"population":[[1900,958800],[1910,1221119],[1920,1463701],[1930,1729205],[1940,1901974],[1950,2005552],[1960,1860421],[1970,1744237],[1980,1949644],[1990,1793477],[2000,1808344],[2010,1852994]]},
{"state":"Wisconsin","region":"Midwest","pct_urbanized":[[1900,38.2],[1910,43],[1920,47.3],[1930,52.9],[1940,53.5],[1950,57.9],[1960,63.8],[1970,65.9],[1980,64.2],[1990,65.7],[2000,68.3],[2010,70.2]],"population":[[1900,2069042],[1910,2333860],[1920,2632067],[1930,2939006],[1940,3137587],[1950,3434575],[1960,3951777],[1970,4417821],[1980,4705767],[1990,4891769],[2000,5363675],[2010,5686986]]},
{"state":"Wyoming","region":"West","pct_urbanized":[[1900,28.8],[1910,29.6],[1920,29.4],[1930,31.1],[1940,37.3],[1950,49.8],[1960,56.8],[1970,60.5],[1980,62.7],[1990,65],[2000,65.1],[2010,64.8]],"population":[[1900,92531],[1910,145965],[1920,194402],[1930,225565],[1940,250742],[1950,290529],[1960,330066],[1970,332416],[1980,469557],[1990,453588],[2000,493782],[2010,563626]]},
{"state":"Maine","region":"New England","pct_urbanized":[[1900,33.5],[1910,35.3],[1920,39],[1930,40.3],[1940,40.5],[1950,51.7],[1960,51.3],[1970,50.8],[1980,47.5],[1990,44.6],[2000,40.2],[2010,38.7]],"population":[[1900,694466],[1910,742371],[1920,768014],[1930,797423],[1940,847226],[1950,913774],[1960,969265],[1970,993722],[1980,1124660],[1990,1227928],[2000,1274923],[2010,1328361]]}
]
Raw
urbanizedpopulation.js
// Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.population; }
function y(d) { return d.pct_urbanized; }
function color(d) { return d.region; }
function key(d) { return d.state; }
// Chart dimensions.
var margin = {top: 19.5, right: 4, bottom: 19.5, left: 42},
width = 645 - margin.right - margin.left,
height = 420 - margin.top - margin.bottom;
// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.log().domain([100000, 40000000]).range([0, width]),
yScale = d3.scale.linear().domain([0, 100]).range([height, 0]),
colorScale = d3.scale.category10();
d3.json("states.json", function(states) {
// Create the SVG container and set the origin.
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(5, d3.format(",d")),
yAxis = d3.svg.axis().scale(yScale).orient("left");
// Add the x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the y-axis.
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add an x-axis label.
svg.append("text")
.attr("class", "x label")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("population (logarithmic scale)");
// Add a y-axis label.
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("% of population living in urbanized areas");
// Add the year label; the value is set on transition.
var label = svg.append("text")
.attr("class", "year label")
.attr("text-anchor", "end")
.attr("y", height - 24)
.attr("x", width)
.text(1950);
var bisect = d3.bisector(function(d) { return d[0]; });
// Add a dot per state. Initialize the data at 1950, and set the colors.
var dot = svg.append("g")
.attr("class", "dots")
.selectAll(".dot")
.data(interpolateData(1950))
.enter().append("circle")
.attr("class", "dot")
.attr("id", function(d) { return d.state; })
.style("fill", function(d) { return colorScale(color(d)); })
.call(position);
// Add a label for each dot.
var dotlabel = svg.append("g")
.attr("class", "dotlabels")
.selectAll(".dotlabel")
.data(interpolateData(1950))
.enter().append("text")
.attr("class", "dotlabel")
.attr("id", function(d) { return d.state; })
.attr("text-anchor", "end")
.text(function(d) { return d.state; })
.call(positionlabel);
// Add a title.
dot.append("title")
.text(function(d) { return d.state; });
// Add an overlay for the year label.
var box = label.node().getBBox();
var overlay = svg.append("rect")
.attr("class", "overlay")
.attr("x", box.x)
.attr("y", box.y)
.attr("width", box.width)
.attr("height", box.height)
.on("mouseover", enableInteraction);
var startingTranstion = svg.transition()
.delay(500)
.duration(6000)
.ease("easePolyOut")
.tween("year", tweenYear)
.each("end", enableInteraction);
// Positions the dots based on data.
function position(dot) {
dot.attr("cx", function(d) { return xScale(x(d)); })
.attr("cy", function(d) { return yScale(y(d)); })
.attr("r", function(d) {return (d.state === "Maine") ? 8 : 3});
}
function positionlabel(dot) {
dot.attr("x", function(d) { return xScale(x(d)); })
.attr("y", function(d) { return yScale(y(d)); })
.attr("dx", function(d) { return (d.state === "Maine") ? -10 : -5 } )
.attr("dy", 4 );
}
// After the transition finishes, you can mouseover to change the year.
function enableInteraction() {
var yearScale = d3.scale.linear()
.domain([1950, 2010])
.range([box.x + 10, box.x + box.width - 10])
.clamp(true);
// Cancel the current transition, if any.
svg.transition().duration(0);
overlay
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("mousemove", mousemove)
.on("touchmove", mousemove);
function mouseover() {
label.classed("active", true);
}
function mouseout() {
label.classed("active", false);
}
function mousemove() {
displayYear(Math.round(yearScale.invert(d3.mouse(this)[0])/10)*10);
}
}
// Tweens the entire chart by first tweening the year, and then the data.
// For the interpolated data, the dots and label are redrawn.
function tweenYear() {
var year = d3.interpolateNumber(1950, 2010);
return function(t) { displayYear(year(t)); };
}
// Updates the display to show the specified year.
function displayYear(year) {
dot.data(interpolateData(year), key).call(position);
dotlabel.data(interpolateData(year), key).call(positionlabel);
label.text(Math.round(year/10) * 10);
}
// Interpolates the dataset for the given (fractional) year.
function interpolateData(year) {
return states.map(function(d) {
return {
state: d.state,
region: d.region,
population: interpolateValues(d.population, year),
pct_urbanized: interpolateValues(d.pct_urbanized, year)
};
});
}
// Finds (and possibly interpolates) the value for the specified year.
function interpolateValues(values, year) {
var i = bisect.left(values, year, 0, values.length - 1),
a = values[i];
if (i > 0) {
var b = values[i - 1],
t = (year - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment