Skip to content

Instantly share code, notes, and snippets.

@poezn
Last active August 29, 2015 14:08
Show Gist options
  • Save poezn/dc37b9de29bee8223589 to your computer and use it in GitHub Desktop.
Save poezn/dc37b9de29bee8223589 to your computer and use it in GitHub Desktop.
Maps: Bubbles
{"description":"Maps: Bubbles","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v1.min.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},"grid.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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/c1WnPko.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
stab col row
ME 11 0
WI 6 1
VT 10 1
NH 11 1
WA 1 2
ID 2 2
MT 3 2
ND 4 2
MN 5 2
IL 6 2
MI 7 2
NY 9 2
MA 10 2
OR 1 3
NV 2 3
WY 3 3
SD 4 3
IA 5 3
IN 6 3
OH 7 3
PA 8 3
NJ 9 3
CT 10 3
RI 11 3
CA 1 4
UT 2 4
CO 3 4
NE 4 4
MO 5 4
KY 6 4
WV 7 4
VA 8 4
MD 9 4
DE 10 4
AZ 2 5
NM 3 5
KS 4 5
AR 5 5
TN 6 5
NC 7 5
SC 8 5
DC 9 5
OK 4 6
LA 5 6
MS 6 6
AL 7 6
GA 8 6
HI 0 7
AK 1 7
TX 4 7
FL 9 7
var dataValues = tb.data;
var dataGrid = tb.grid;
var dataUs = tb.us;
var values = {},
lookup = {};
var w = 63,
padding = w/15,
clusterPadding = 1, // separation between different-color circles
maxRadius = 11;
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([473, 272]);
var path = d3.geo.path()
.projection(projection);
var columnMetric = "avgshare08_12",
columnMetricSize = "workers2013",
columnStateName = "state";
columnStateNameShort = "stab";
_.each(dataValues, function(d) {
values[d[columnStateNameShort]] = {
"value": +d[columnMetric],
"valueSize": +d[columnMetricSize],
"id": d[columnStateNameShort],
"label": d[columnStateName]
}
lookup[d[columnStateName]] = d[columnStateNameShort];
});
_.each(dataGrid, function(d) {
values[d[columnStateNameShort]]["grid"] = {
"row": +d.row,
"col": +d.col
};
});
_.each(topojson.feature(dataUs, dataUs.objects.states, function(a, b) { return a !== b; }).features, function(d) {
values[lookup[d.id]]["feature"] = d;
});
var max = d3.max(_.chain(values).values().pluck("value").value());
// max = 15;
console.log(max);
var foci = {};
_.each(values, function(d, code) {
var coords = d3.geo.centroid(d.feature);
foci[code] = projection(coords);
values[code].x = foci[code][0];
values[code].y = foci[code][1];
});
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 rScale = d3.scale.sqrt()
.domain([0, d3.max(_.values(values), function(d, i) { return d.valueSize })])
.range([0, 40]);
values = _.map(values, function(d) {
d.radius = rScale(d.valueSize ? d.valueSize : 0)
return d;
})
var svg = g;
var node = g.selectAll("g.node");
function ready() {
node = node.data(_.values(values));
svg.selectAll("path.state")
.data(topojson.feature(dataUs, dataUs.objects.states, function(a, b) { return a !== b; }).features)
.enter().append("path")
.attr("class", function(d) { return "state " + quantize(values[d.id]); })
.attr("d", path);
var bubbles = node.enter().append("g")
.attr({
"class": function(d) { return "node " + quantize(d.value); },
"id": function(d) { return "bubble-" + d.id },
"transform": function(d) {
return "translate(" + foci[d.id].join(" ") + ")"
}
})
.call(force.drag);
bubbles
.append("circle")
.attr({
"class": "bubble",
"cx": 0,
"cy": 0,
"r": function(d, i) {
return rScale(d.valueSize);
}
});
bubbles
.append("text")
.attr({
"text-anchor": "middle",
"transform": function(d, i) {
var ty = 2,
tx = 0;
return "translate(" + [tx, ty].join(" ") + ")"
},
"fill": "#FFF",
"font-size": 9
})
.text(function(d, i) {
return d.id
});
force.start();
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(_.values(values));
return function(d) {
var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
var nodes = _.values(values);
function tick(e) {
var k = 0.1 * e.alpha;
// Push nodes toward their designated focus.
_.each(nodes, function(o, i) {
o.y += (foci[o.id][1] - o.y) * k;
o.x += (foci[o.id][0] - o.x) * k;
o.coords = [o.x, o.y]
});
_.each(nodes, collide(0.5));
node.attr("transform", function(d) { return "translate(" + [d.x, d.y].join(" ") + ")"; })
}
var force = d3.layout.force()
.nodes(values)
.links([])
.gravity(0)
.charge(function(d, i) {
return -d.valueSize * 1000
})
.linkDistance(function(d, i) {
return rScale(d.valueSize)
})
.on("tick", tick);
ready();
.counties {
fill: none;
}
.state {
stroke-linejoin: round;
font-size: 14px;
fill: #FFFFFF;
stroke: #ededed;
stroke-width: 1;
}
#display {
background-color: #FFFFFF;
}
.node circle {
stroke: #ededed;
stroke-width: 2;
}
.q0-4 text { fill: #001966; }
.q1-4 text { fill: #001966; }
.q2-4 text { fill: #001966; }
.q3-4 text { fill: #d8e9f7; }
.q0-4 rect { fill: #eff3ff; }
.q1-4 rect { fill: #bdd7e7; }
.q2-4 rect { fill: #6baed6; }
.q3-4 rect { fill: #2171b5; }
.q0-4 circle { fill: #eff3ff; }
.q1-4 circle { fill: #bdd7e7; }
.q2-4 circle { fill: #6baed6; }
.q3-4 circle { 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