Skip to content

Instantly share code, notes, and snippets.

@carsonfarmer

carsonfarmer/README.md

Last active August 29, 2015 14:01
Show Gist options
  • Save carsonfarmer/5b32cd0b070f94349f4c to your computer and use it in GitHub Desktop.
Save carsonfarmer/5b32cd0b070f94349f4c to your computer and use it in GitHub Desktop.
Download ZIP
Problems Creating A Dot Density Map With D3
Raw
README.md

Problems Creating A Dot Density Map With D3

Here is the topojson call to create the topojson file:

topojson -o us_states.topo.json --projection='width=960, height=600, d3.geo.albersUsa().scale(1280).translate([width/2,height/2])' --simplyfy=.5 --filter=none --id-property='NAME,Geography' --external-properties=census_2010s.csv -p population=+2013 -- states=us_states.json

This could obviously be quite a bit more efficient (by using a canvas for example), but serves to illustrate the application.

Right now the points are randomly placed on the bounds of each individual state. What is the most efficient way to clip the points to the individual state polygons? Is there a 'point in polygon' js library compatible with D3.js? Are there more efficient 'approximations' for this? Any and all thoughts are welcome!

Raw
census_2010s.csv
Geography Census Base 2010 2011 2012 2013
United States 308745538 308747716 309326295 311582564 313873685 316128839
Alabama 4779736 4779758 4785570 4801627 4817528 4833722
Alaska 710231 710231 713868 723375 730307 735132
Arizona 6392017 6392015 6408790 6468796 6551149 6626624
Arkansas 2915918 2915916 2922280 2938506 2949828 2959373
California 37253956 37253959 37333601 37668681 37999878 38332521
Colorado 5029196 5029196 5048196 5118400 5189458 5268367
Connecticut 3574097 3574097 3579210 3588948 3591765 3596080
Delaware 897934 897936 899711 907985 917053 925749
District of Columbia 601723 601767 605125 619624 633427 646449
Florida 18801310 18802690 18846054 19083482 19320749 19552860
Georgia 9687653 9687663 9713248 9810181 9915646 9992167
Hawaii 1360301 1360301 1363731 1376897 1390090 1404054
Idaho 1567582 1567652 1570718 1583930 1595590 1612136
Illinois 12830632 12830632 12839695 12855970 12868192 12882135
Indiana 6483802 6483797 6489965 6516336 6537782 6570902
Iowa 3046355 3046857 3050314 3064102 3075039 3090416
Kansas 2853118 2853116 2858910 2869548 2885398 2893957
Kentucky 4339367 4339357 4347698 4366869 4379730 4395295
Louisiana 4533372 4533372 4545392 4575197 4602134 4625470
Maine 1328361 1328361 1327366 1327844 1328501 1328302
Maryland 5773552 5773623 5787193 5840241 5884868 5928814
Massachusetts 6547629 6547629 6563263 6606285 6645303 6692824
Michigan 9883640 9883701 9876149 9874589 9882519 9895622
Minnesota 5303925 5303925 5310337 5347108 5379646 5420380
Mississippi 2967297 2967299 2970047 2977886 2986450 2991207
Missouri 5988927 5988923 5996063 6010065 6024522 6044171
Montana 989415 989417 990527 997600 1005494 1015165
Nebraska 1826341 1826341 1829838 1841749 1855350 1868516
Nevada 2700551 2700552 2703230 2717951 2754354 2790136
New Hampshire 1316470 1316469 1316614 1318075 1321617 1323459
New Jersey 8791894 8791909 8802707 8836639 8867749 8899339
New Mexico 2059179 2059183 2064982 2077919 2083540 2085287
New York 19378102 19378105 19398228 19502728 19576125 19651127
North Carolina 9535483 9535471 9559533 9651377 9748364 9848060
North Dakota 672591 672591 674344 684867 701345 723393
Ohio 11536504 11536503 11545435 11549772 11553031 11570808
Oklahoma 3751351 3751357 3759263 3785534 3815780 3850568
Oregon 3831074 3831073 3837208 3867937 3899801 3930065
Pennsylvania 12702379 12702379 12710472 12741310 12764475 12773801
Rhode Island 1052567 1052567 1052669 1050350 1050304 1051511
South Carolina 4625364 4625360 4636361 4673509 4723417 4774839
South Dakota 814180 814180 816211 823772 834047 844877
Tennessee 6346105 6346113 6356683 6398361 6454914 6495978
Texas 25145561 25145561 25245178 25640909 26060796 26448193
Utah 2763885 2763885 2774424 2814784 2854871 2900872
Vermont 625741 625745 625793 626320 625953 626630
Virginia 8001024 8001031 8024417 8105850 8186628 8260405
Washington 6724540 6724543 6742256 6821481 6895318 6971406
West Virginia 1852994 1852999 1854146 1855184 1856680 1854304
Wisconsin 5686986 5686983 5689060 5708785 5724554 5742713
Wyoming 563626 563626 564222 567329 576626 582658
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style type="text/css">
.state {
fill: #ddd;
stroke: #fff;
stroke-linejoin: round;
stroke-linecap: round;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var padding = 25,
width = 960,
height = 600;
var path = d3.geo.path()
.projection(null);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
d3.json("us_states_topo.json", function(error, us) {
var states = svg.append("g")
.attr("class", "land")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("class", "state")
.attr("d", path)
var points = svg.append("g")
.attr("class", "point")
.selectAll("g")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + path.bounds(d)[0][0] + "," + path.bounds(d)[0][1] + ")"; })
points.selectAll("circle")
.data(function(d) { return randomGenerator(d); }) // Can substitude the Halton generator here for a more 'even' distribution...
.enter().append("circle")
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; })
.attr("r", 1)
});
function getSize(bounds) {
return [bounds[1][0] - bounds[0][0], bounds[1][1] - bounds[0][1]]
}
function randomGenerator(d) {
var points = [];
for (var i = 0; i < d.properties.population/50000; i++) {
a = getSize(path.bounds(d));
points.push([Math.random()*a[0], Math.random()*a[1]]);
}
return points;
};
// The code comes from:
// https://gist.github.com/bpeck/1889735
// For more info see:
// http://en.wikipedia.org/wiki/Halton_sequence
function halton(index, base) {
var result = 0;
var f = 1 / base;
var i = index;
while(i > 0) {
result = result + f * (i % base);
i = Math.floor(i / base);
f = f / base;
}
return result;
};
function haltonGenerator(d, basex, basey) {
// 2, 3 Halton Sequence by default
if (basex == null)
basex = 2;
if (basey == null)
basey = 3;
var points = [];
for (var i = 0; i < d.properties.population/50000; i++) {
a = getSize(path.bounds(d))
points.push([halton(i,basex)*a[0], halton(i,basey)*a[1]]);
}
return points;
};
</script>
Display the source blob
Display the rendered blob
Raw
us_states.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
us_states_topo.json
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment