var width = 640, height = 300; var svg = d3.select("body").append("svg") .attr("width", width).attr("height", height); var projection = d3.geo.albers() .scale(600).center([0, 38]) .translate([width / 2, height / 2]); var ocean = svg.append("path") .attr('fill', 'lightblue'); var states = svg.append("path") .attr('fill', '#ccc') .attr('stroke-width', 1) .attr('stroke', '#222'); d3.json("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_ocean.geojson", function(error, data) { ocean.datum(data).attr("d", d3.geo.path().projection(projection)) }); d3.json("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson", function(error, data) { states.datum(data) .attr("d", d3.geo.path().projection(projection)); });