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]) .scale([1200]); var path = d3.geo.path() .projection(projection); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.json('us-states.json', function(collection) { svg.selectAll(".state") .data(collection.features) .enter() .append("path") .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) { console.log(i); return "rgb(0,0," + (i * 4) + ")" }); });