D3 Map

When I started with D3 I wanted to make a visualization that displayed data by state. I had a lot of trouble (which ended up being due to a corrupted us-states.json file). I thought I would share this to help anyone else looking to make a map using D3js.

var w = 960;
var h = 620;

var projection = d3.geo.albersUsa()
.translate([w/2, h/2])

var path = d3.geo.path()

var svg = d3.select("body")
.attr("width", w)
.attr("height", h);

d3.json('us-states.json', function(collection) {
.attr("d", path)
.attr("class", "state")
.attr("id", function(d){return d.properties.name})
.style("stroke", "white")
.style("stroke-width", 1.5)
.style("fill", function(d,i) {
return "rgb(0,0," + (i * 4) + ")"

Leave a Reply

Your email address will not be published. Required fields are marked *