Skip to content

Instantly share code, notes, and snippets.

@poezn
Last active August 29, 2015 14:08
Show Gist options
  • Save poezn/410d74020bc370f7deae to your computer and use it in GitHub Desktop.
Save poezn/410d74020bc370f7deae to your computer and use it in GitHub Desktop.
Maps: Cartogram
{"description":"Maps: Cartogram","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v1.min.js"},{"name":"Cartogram.js","url":"https://rawgit.com/shawnbot/d3-cartogram/master/cartogram.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/PXSQbbH.png","ajax-caching":true,"inline-console":true}
fipst stab state avgshare avgshare94_00 avgshare01_07 avgshare08_12 workers2013
37 NC North Carolina 3.56 2.53 4.56 2.64 3301
1 AL Alabama 3.22 3.55 2.95 2.58 834
28 MS Mississippi 2.94 3.77 2.99 1.71 226
5 AR Arkansas 2.89 1.91 3.27 3.16 507
47 TN Tennessee 2.86 2.64 2.77 2.85 2606
45 SC South Carolina 2.61 1.6 3.57 2.14 1321
23 ME Maine 2.58 2.59 2.61 2.31 763
26 MI Michigan 2.55 0.8 2.2 4.62 2977
41 OR Oregon 2.38 1.39 2.37 3.03 2048
21 KY Kentucky 2.24 2.06 2.19 2.38 971
18 IN Indiana 2.07 0.97 2.3 2.67 1733
2 AK Alaska 1.88 2.52 2.6 0 95
42 PA Pennsylvania 1.79 1.53 2.07 1.62 4245
55 WI Wisconsin 1.73 1.03 1.8 2.27 949
39 OH Ohio 1.72 0.77 1.84 2.46 1805
53 WA Washington 1.69 1.04 2.44 1.32 1715
44 RI Rhode Island 1.64 1.87 1.5 1.57 65
13 GA Georgia 1.51 1.76 1.65 0.96 1251
16 ID Idaho 1.51 1.23 1.9 1.22 168
54 WV West Virginia 1.45 1.23 1.38 1.85 108
51 VA Virginia 1.38 0.98 1.66 1.28 825
40 OK Oklahoma 1.3 1.18 1.96 0.88 1472
20 KS Kansas 1.27 0.86 1.42 1.35 989
35 NM New Mexico 1.26 1.76 0.4 1.69 0
29 MO Missouri 1.25 1.06 1.28 1.48 1967
33 NH New Hampshire 1.25 0.67 1.76 0.96 114
50 VT Vermont 1.14 0.35 1.84 1.14 236
25 MA Massachusetts 1.07 0.89 1.09 1.28 3420
17 IL Illinois 1.06 0.55 1.36 1.19 3282
48 TX Texas 1.05 1.17 0.97 0.91 4295
27 MN Minnesota 0.99 0.39 1.18 1.3 1614
9 CT Connecticut 0.97 0.5 0.97 1.36 510
30 MT Montana 0.91 1.78 0.78 0.75 237
19 IA Iowa 0.89 0.33 1.04 1.21 1408
46 SD South Dakota 0.86 0.16 1 1.3 11
22 LA Louisiana 0.85 1.07 0.5 0.98 657
34 NJ New Jersey 0.85 1.18 0.8 0.73 868
4 AZ Arizona 0.83 0.59 0.68 1.13 446
56 WY Wyoming 0.82 2.44 0.21 0.04 49
36 NY New York 0.82 0.94 0.76 0.91 3917
49 UT Utah 0.74 0.76 0.62 0.95 546
8 CO Colorado 0.74 0.87 0.67 0.75 395
6 CA California 0.72 0.47 0.75 0.86 4628
31 NE Nebraska 0.62 0.34 0.75 0.62 407
38 ND North Dakota 0.6 1.16 0.16 0.75 336
10 DE Delaware 0.53 0.14 0.43 1.09 22
24 MD Maryland 0.47 0.54 0.5 0.46 270
12 FL Florida 0.3 0.24 0.28 0.39 2363
32 NV Nevada 0.26 0.34 0.2 0.21 262
15 HI Hawaii 0.06 0.1 0.14 0.03 232
11 DC District of Columbia 0.01 0.03 0 0.02
var values = {};
var columnMetric = "avgshare08_12",
columnStateName = "state";
var data = tb.data;
_.each(data, function(d) {
values[d[columnStateName]] = +d[columnMetric];
});
var max = d3.max(_.values(values));
// max = 15;
console.log(max);
var us = tb.us;
var width = 960,
height = 500;
var quantize = d3.scale.quantize()
.domain([0, max])
.range(d3.range(4).map(function(i) { return "q" + i + "-4"; }));
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([549, 258]);
var scale = d3.scale.linear()
.domain(d3.extent(data, function(d) { return +d.workers2013 }))
.range([1, 1000])
var cartogram = d3.cartogram()
.projection(projection)
.value(function(d, i) {
return scale(values[d.id]);
});
var svg = g;
function ready(us) {
var geometries = cartogram(us, us.objects.states.geometries);
console.log(_.keys(geometries))
svg.selectAll("path")
.data(geometries.features)
.enter().append("path")
.attr("class", function(d) { return "state " + quantize(values[d.id]); })
.attr("d", cartogram.path);
}
ready(us);
.counties {
fill: none;
}
.state {
stroke-linejoin: round;
stroke: #FFFFFF;
font-size: 14px
}
#display {
background-color: #FFFFFF;
}
.q0-4 text { fill: #001966; }
.q1-4 text { fill: #001966; }
.q2-4 text { fill: #001966; }
.q3-4 text { fill: #d8e9f7; }
.q0-4 { fill: #eff3ff; }
.q1-4 { fill: #bdd7e7; }
.q2-4 { fill: #6baed6; }
.q3-4 { fill: #2171b5; }
Display the source blob
Display the rendered blob
Raw
Loading
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