xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>US Map</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js" charset="utf-8"></script><!-- <script src="colorbrewer.js" charset="utf-8"></script> --> <style type="text/css"> body { background-color: white; } svg { background-color: white; } #container { width: 550px; margin-left: auto; margin-right: auto; margin-top: 0px; padding: 10px 20px 0px 40px; background-color: white; box-shadow: 2px 2px 7px 3px #E5E5E5; } </style> </head> <body><div id="container"> <h1>United States: Utah, Georgia, Florida</h1></div> <script type="text/javascript"> //Width and height var w = 550; var h = 400; //Define map projection var projection = d3.geo.albers() .center([ -20, 50 ]) .translate([ w/2, h/2 ]) .scale([ w/1.5 ]); //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h); //Load in GeoJSON data d3.json("cb_2014_us_state_20m.json", function(json) {var statesData = json.features var colors = { Utah: "blue", Georgia: "yellow", Florida: "red" }//var colors = d3.scale.ordinal()// .domain(["Utah", "Georgia", "Florida"])// .range(colorbrewer.Set3[3]); //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .attr("stroke", "white") .attr("fill", function (d, i) { return colors[d.properties.NAME] }) }); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js