D3 Examples - health care $$$ by state

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    span {
            color: white;
        }
  </style>
</head>
<body>
    <h2>Health Care Expenditures per Capita by State, 2014</h2>
    <p><span style="background-color:rgb(255,26,26);">Over $10,500</span>.....<span style="background-color:rgb(255,77,77);">$9,000-$10,499</span>..... 
            <span style="background-color:rgb(255,128,128);">$7,500-$8,999</span>.....<span style="background-color:rgb(255,179,179);">$5,950-$7,499</span></p>
    <div id="map">
    <script type="text/javascript">
    var width = 910;
    var height = 475;
                    
    var projection = d3.geoAlbersUsa()
        .translate([width/2, height/2]);
        
    var path = d3.geoPath()
        .projection(projection);
        
    var svg = d3.select("#map").append("svg")
        .attr("width", width)
        .attr("height", height);
        
    d3.csv("hlthCare.csv", function(error, data) {
        if(error) throw error;
​
        var color = d3.scaleQuantize()
            .domain([5982, 11944])
            .range(
                        [ 
                            "rgb(255,179,179)",
                            "rgb(255,128,128)",
                            "rgb(255,77,77)",
                            "rgb(255,26,26)",
                        ]
                    );
        
    d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-states.json", function(error, json) {
        
        // merge health expenditures and GeoJSON
        for (var i = 0, max = data.length; i < max; i++) {
        
            // get state name
            var dataState = data[i].state;
            
            // get data value and convert to float
            var dataValue = parseFloat(data[i].value);
            
            // find corresponding state i GeoJSON
            for(var j = 0, jmax = json.features.length; j < jmax; j++) {
                jsonState = json.features[j].properties.name;
                
                if (dataState == jsonState) {
                    //copy data value into JSON
                    json.features[j].properties.value = dataValue;
                    
                    break;
                }
            }
        }
        svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("stroke", "white")
        .style("fill", function(d) {
            var value = d.properties.value;
            
            if(value) {
                return color(value);
            } else {
                return "#ccc";
            }
        });
        
        });
    }); 
        
    </script>
    
  </div>
        <h5>Source: Henry J. Kaiser Family Foundation</h5>
</body>
</html>
    