xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Choropleth</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <style type="text/css"> body { background-color: white; } svg { background-color: gray; box-shadow: 3px 3px 5px #333; } </style> </head> <body> <script type="text/javascript"> //Year of CO2 data to map var year = "2010"; //Width and height var w = 960; var h = 500; //Define map projection var projection = d3.geo.albersUsa() .translate([w / 2, h / 2]) .scale([600]); //Define path generator var path = d3.geo.path() .projection(projection); //Define quantize scale to sort data values into buckets of color //Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd var color = d3.scale.quantize() .range([ "#f1eef6", "#bdc9e1", "#74a9cf", "#2b8cbe", "#045a8d" ]); //Create SVG var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load in CO2 data d3.csv("mass-shootings.csv", function(data) { data = d3.nest() .key(function(d) { return d.state; }) .rollup(function(v) { return d3.sum(v, function(d) { return d.victims; }); }) .entries(data); //Set input domain for color scale color.domain([ d3.min(data, function(d) { return +d.values; }), d3.max(data, function(d) { return +d.values; }) ]); //Load in GeoJSON data d3.json("states.json", function(json) { //Merge the CO2 data and GeoJSON into a single array // //Loop through once for each CO2 data value for (var i = 0; i < data.length; i++) { //Grab country name var dataState = data[i].key; //Grab data value, and convert from string to float var dataValue = +data[i].values; //Find the corresponding country inside the GeoJSON for (var j = 0; j < json.features.length; j++) { //We'll check the official ISO country code var jsonState = json.features[j].properties.name; if (dataState == jsonState) { //Copy the data value into the GeoJSON json.features[j].properties.values = dataValue; //Stop looking through the JSON break; } } } //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style("fill", function(d) { //Get data value var values = d.properties.values; if (values) { //If value exists… return color(values); } else { //If value is undefined… return "gray"; } }) .style("stroke", "#ffffff"); }); //End d3.json() }); //End d3.csv() </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js