Skip to content

Instantly share code, notes, and snippets.

@maggie-lee
Last active August 29, 2015 14:23
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 maggie-lee/a015a1722a194a886beb to your computer and use it in GitHub Desktop.
Save maggie-lee/a015a1722a194a886beb to your computer and use it in GitHub Desktop.
Georgians crowd into metro Atlanta. Here's how much.
<!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>
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
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment