Last active
August 29, 2015 14:23
-
-
Save maggie-lee/a015a1722a194a886beb to your computer and use it in GitHub Desktop.
Georgians crowd into metro Atlanta. Here's how much.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
div.tooltip { | |
position: absolute; | |
text-align: center; | |
width: 60px; | |
height: 28px; | |
padding: 2px; | |
background: green; | |
border: 0px; | |
border-radius: 8px; | |
pointer-events: none; | |
} | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 12px; | |
} | |
#title { | |
font-size: 36px; | |
} | |
#byline{ | |
font-size: 12px; | |
} | |
#subtitle{ | |
font-size: 18px; | |
} | |
#legendholder { | |
font-size: 12px; | |
} | |
#chart { | |
font-size: 12px; | |
} | |
#footer { | |
font-size: 12px; | |
} | |
#decorative_bar { | |
background-color: #bcbd22; | |
height: 10px; | |
} | |
/* CSS goes here. */ | |
</style> | |
<body> | |
<!-- <div id="title">Georgians crowd into metro Atlanta. Here's how much. </div> | |
<div id="byline"> | |
By Maggie Lee<br> | |
June 28, 2015<br> | |
</div> --> | |
<div id="subtitle"> | |
<br> | |
<img src="http://greencracker.net/wp-content/uploads/2015/06/noun_23892_cc.png" align="left"><br> | |
About 10 million people were living in Georgia as of 2014.<br> | |
Of those, about 4.5 million cluster in Fulton and neighboring counties.<br><br><br> | |
</div> | |
<div id="legendholder"> | |
<button id="click_to_run" onclick="do_update()"> | |
View by Population | |
</button> | |
<button id="click_to_normal" onclick="do_normal()"> | |
View Normal | |
</button><br><br> | |
</div> <!-- close legendholder --> | |
<div id="decorative_bar"></div> | |
Hover over a county for details | |
<div id="chart"> | |
</div> | |
<div> <img src="http://greencracker.net/wp-content/uploads/2015/06/sharealike.svg"></div> | |
<div id="decorative_bar"></div> | |
<div id="footer"> | |
<h1>Notes, Thanks & How-to:</h1> | |
<p>Thanks to <a href="http://greencracker.net/wp-content/uploads/2015/06/cartogram.js">cartogram.js</a>, a JavaScript implementation of | |
<a href="http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf">an algoritm to construct continuous area cartograms</a>, | |
by James A. Dougenik, Nicholas R. Chrisman and Duane R. Niemeyer, | |
©1985 by the Association of American Geographers. | |
<p>Cartogram.js is designed and built by <a href="http://stamen.com/studio/shawn">Shawn Allen</a> at | |
<a href="http://stamen.com">Stamen</a> and has a home on <a href="https://github.com/shawnbot/d3-cartogram/" target="_blank">Github</a>. It runs with | |
<a href="http://d3js.org">d3.js</a> by Mike Bostock. | |
<p> | |
This Georgia example runs with d3.v2, an older version. | |
It's based on a tutorial from <a href="http://www.limn.co.za/2013/10/making-a-cartogram/" target="_blank">Jeff Fletcher on his South Africa dataviz blog Limn</a>. He bundles up the <a href="http://www.limn.co.za/dev/assets/cartogram.zip">appropriate versions of cartogram, topojson and d3 here.</a> | |
<p> | |
Data source: Population as of July, 2014 from the <a href ="http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?src=bkmk" target="_blank">U.S. Census</a>, downloaded June 26, 2015. | |
<p>Population icon <a href ="https://thenounproject.com/search/?q=population&i=23892" target="_blank">by Wilson Joseph from the Noun Project.</a> | |
<script src="http://greencracker.net/wp-content/uploads/2015/06/d3.v2.min_.js"></script> | |
<script src="http://greencracker.net/wp-content/uploads/2015/06/topojson.js"></script> | |
<script src="http://greencracker.net/wp-content/uploads/2015/06/cartogram.js"></script> | |
<!--<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> --> | |
<script> | |
var width = 1000, | |
height = 775, | |
margin = {top: 10, bottom: 10, left: 10, right: 10}; | |
var tooltip_div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", width-margin.left-margin.right) | |
.attr("height", height-margin.top-margin.bottom); | |
// var map = d3.select("#map"); | |
var counties = svg.append("g") | |
.attr("id", "counties") | |
.selectAll("path"); | |
var projection = d3.geo.albers() | |
.origin([-83, 33.5]) | |
.parallels([30, 36]) | |
.scale(9000); | |
var topology, | |
geometries, | |
carto_features; | |
var number_formatter = d3.format("0,000"); | |
var pop_data = d3.map(); | |
var carto = d3.cartogram() | |
.projection(projection) | |
.properties(function (d) { | |
// this add the "properties" properties to the geometries | |
return d.properties; | |
}); | |
d3.csv("pop_data.csv", function (data) { | |
data.forEach(function (d) { | |
pop_data.set(d.GEOID10, [d.NAME10, d.POP]); | |
}) | |
}); | |
d3.json("topo_GA_counties_simple.json", function (data) { | |
topology = data; | |
geometries = topology.objects['geo_GA_counties_simplified'].geometries; | |
var features = carto.features(topology, geometries), | |
path = d3.geo.path() | |
.projection(projection); | |
//add this jive to make up for counties with a space in the name: .replace(/\s+/g, '') | |
counties = counties.data(features) | |
.enter() | |
.append("path") | |
.attr("class", "county") | |
// .attr("id", function (d) {return d.properties.GEOID10}) | |
// .attr("fill", function (d, i) {return color(i);} ) | |
.attr("id", function (d) {return d.properties.NAME10.replace(/\s+/g, '');}) | |
.on("mouseover", function (d) { | |
console.log(number_formatter(pop_data.get(d.properties['GEOID10'])[1])) | |
d3.selectAll("#"+d.properties.NAME10.replace(/\s+/g, '')).style("fill", "green") | |
tooltip_div.transition() | |
.duration(200) | |
.style("opacity", 0.9) | |
tooltip_div .html(d.properties.NAME10 + "<br>" + | |
number_formatter(pop_data.get(d.properties['GEOID10'])[1])) | |
.style("left", (d3.event.pageX) + "px") | |
.style("top", (d3.event.pageY -28) + "px"); | |
}) | |
.on("mouseout", function (d) { | |
d3.selectAll("#"+d.properties.NAME10.replace(/\s+/g, '')).style("fill", "white") | |
tooltip_div.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}) | |
.attr("fill", "white") | |
.attr("d", path) | |
.attr("stroke", "black") | |
.attr("stroke-width", "0.3px") | |
do_update(); | |
// NB population estimate as of July 14! | |
}) | |
function do_normal() { | |
d3.select("#click_to_normal").text("thinking..."); | |
setTimeout(function () { | |
console.log("doing normal") | |
var features = carto.features(topology, geometries), | |
path = d3.geo.path() | |
.projection(projection); | |
counties.data(features) | |
.transition() | |
.duration(3750) | |
.each("end", function () { | |
d3.select("#click_to_normal").text("View Normal") | |
}) | |
.attr("d", path); | |
}, 10); | |
}; | |
function do_update() { | |
d3.select("#click_to_run").text("thinking..."); | |
setTimeout(function () { | |
carto.value(function (d) { | |
console.log(+pop_data.get(d.properties['GEOID10'])[1]) | |
return +pop_data.get(d.properties['GEOID10'])[1]; | |
}); | |
if (carto_features == undefined) | |
carto_features = carto(topology, geometries).features; | |
counties.data(carto_features) | |
.text(function (d) {return d.properties.GEOID10;}) | |
// .on("mouseover", console.log("moused")); | |
// console.log("line 118") | |
counties.transition() | |
.duration(3750) | |
.each("end", function () { | |
d3.select("#click_to_run").text("View by Population") | |
}) | |
.attr("d", carto.path); | |
}, 10); | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
GEOID10 | NAME10 | POP | |
---|---|---|---|
13001 | Appling | 18540 | |
13003 | Atkinson | 8223 | |
13005 | Bacon | 11281 | |
13007 | Baker | 3255 | |
13009 | Baldwin | 45909 | |
13011 | Banks | 18295 | |
13013 | Barrow | 73240 | |
13015 | Bartow | 101736 | |
13017 | Ben Hill | 17464 | |
13019 | Berrien | 18700 | |
13021 | Bibb | 153905 | |
13023 | Bleckley | 12795 | |
13025 | Brantley | 18417 | |
13027 | Brooks | 15418 | |
13029 | Bryan | 33906 | |
13031 | Bulloch | 72087 | |
13033 | Burke | 22709 | |
13035 | Butts | 23368 | |
13037 | Calhoun | 6463 | |
13039 | Camden | 52027 | |
13043 | Candler | 10888 | |
13045 | Carroll | 114093 | |
13047 | Catoosa | 65621 | |
13049 | Charlton | 12897 | |
13051 | Chatham | 283379 | |
13053 | Chattahoochee | 11837 | |
13055 | Chattooga | 24939 | |
13057 | Cherokee | 230985 | |
13059 | Clarke | 120938 | |
13061 | Clay | 3102 | |
13063 | Clayton | 267542 | |
13065 | Clinch | 6831 | |
13067 | Cobb | 730981 | |
13069 | Coffee | 42811 | |
13071 | Colquitt | 46102 | |
13073 | Columbia | 139257 | |
13075 | Cook | 17214 | |
13077 | Coweta | 135571 | |
13079 | Crawford | 12387 | |
13081 | Crisp | 22934 | |
13083 | Dade | 16389 | |
13085 | Dawson | 22957 | |
13087 | Decatur | 27220 | |
13089 | DeKalb | 722161 | |
13091 | Dodge | 20976 | |
13093 | Dooly | 14188 | |
13095 | Dougherty | 92407 | |
13097 | Douglas | 138776 | |
13099 | Early | 10491 | |
13101 | Echols | 4003 | |
13103 | Effingham | 55423 | |
13105 | Elbert | 19438 | |
13107 | Emanuel | 22755 | |
13109 | Evans | 10898 | |
13111 | Fannin | 23753 | |
13113 | Fayette | 109664 | |
13115 | Floyd | 96063 | |
13117 | Forsyth | 204302 | |
13119 | Franklin | 22264 | |
13121 | Fulton | 996319 | |
13123 | Gilmer | 28829 | |
13125 | Glascock | 3053 | |
13127 | Glynn | 82175 | |
13129 | Gordon | 56047 | |
13131 | Grady | 25359 | |
13133 | Greene | 16490 | |
13135 | Gwinnett | 877922 | |
13137 | Habersham | 43752 | |
13139 | Hall | 190761 | |
13141 | Hancock | 8509 | |
13143 | Haralson | 28641 | |
13145 | Harris | 32876 | |
13147 | Hart | 25377 | |
13149 | Heard | 11603 | |
13151 | Henry | 213869 | |
13153 | Houston | 149111 | |
13155 | Irwin | 9104 | |
13157 | Jackson | 61870 | |
13159 | Jasper | 13432 | |
13161 | Jeff Davis | 14859 | |
13163 | Jefferson | 16272 | |
13165 | Jenkins | 9125 | |
13167 | Johnson | 9701 | |
13169 | Jones | 28787 | |
13171 | Lamar | 18207 | |
13173 | Lanier | 10373 | |
13175 | Laurens | 47851 | |
13177 | Lee | 29191 | |
13179 | Liberty | 65198 | |
13181 | Lincoln | 7622 | |
13183 | Long | 17113 | |
13185 | Lowndes | 113523 | |
13187 | Lumpkin | 31176 | |
13193 | Macon | 21370 | |
13195 | Madison | 14214 | |
13197 | Marion | 13792 | |
13189 | McDuffie | 28312 | |
13191 | McIntosh | 8797 | |
13199 | Meriwether | 21198 | |
13201 | Miller | 5958 | |
13205 | Mitchell | 22771 | |
13207 | Monroe | 27051 | |
13209 | Montgomery | 8991 | |
13211 | Morgan | 17956 | |
13213 | Murray | 39410 | |
13215 | Muscogee | 200887 | |
13217 | Newton | 103675 | |
13219 | Oconee | 35093 | |
13221 | Oglethorpe | 14673 | |
13223 | Paulding | 148987 | |
13225 | Peach | 26922 | |
13227 | Pickens | 29997 | |
13229 | Pierce | 18991 | |
13231 | Pike | 17784 | |
13233 | Polk | 41133 | |
13235 | Pulaski | 11483 | |
13237 | Putnam | 21192 | |
13239 | Quitman | 2315 | |
13241 | Rabun | 16243 | |
13243 | Randolph | 7313 | |
13245 | Richmond | 201368 | |
13247 | Rockdale | 87754 | |
13249 | Schley | 5163 | |
13251 | Screven | 14085 | |
13253 | Seminole | 8686 | |
13255 | Spalding | 63988 | |
13257 | Stephens | 25480 | |
13259 | Stewart | 5744 | |
13261 | Sumter | 31232 | |
13263 | Talbot | 6390 | |
13265 | Taliaferro | 1693 | |
13267 | Tattnall | 25224 | |
13269 | Taylor | 8442 | |
13271 | Telfair | 16518 | |
13273 | Terrell | 9132 | |
13275 | Thomas | 44959 | |
13277 | Tift | 40704 | |
13279 | Toombs | 27282 | |
13281 | Towns | 11098 | |
13283 | Treutlen | 6778 | |
13285 | Troup | 69469 | |
13287 | Turner | 8153 | |
13289 | Twiggs | 8320 | |
13291 | Union | 21984 | |
13293 | Upson | 26256 | |
13295 | Walker | 68218 | |
13297 | Walton | 87615 | |
13299 | Ware | 35515 | |
13301 | Warren | 5520 | |
13303 | Washington | 20635 | |
13305 | Wayne | 29949 | |
13307 | Webster | 2649 | |
13309 | Wheeler | 7995 | |
13311 | White | 27970 | |
13313 | Whitfield | 103542 | |
13315 | Wilcox | 8847 | |
13317 | Wilkes | 9940 | |
13319 | Wilkinson | 9326 | |
13321 | Worth | 20940 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment