D3 Examples - Intermediate D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 3 - MD County Map</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body {
                font-family: Helvetica, Arial, sans-serif;
                background-color: #ffcc99;
            }
            #container1 {
                width: 1000px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                padding: 10px;
                background-color: white;
                box-shadow: 2px 3px 5px 6px #c07e3f;
            }
            h1 {
                color: #000099;
                border-bottom: solid 5px #000099;
                text-align: center;
                font-size: 18pt;
            }
            svg {
                background-color: #9ed1e1; /* Light blue for water */
            }
            g.counties path {
                stroke: #b3b3b3;
                stroke-width: 2px;
            }
            g.states path {
                stroke: #bfbfbf;
                stroke-width: 1px;
            }
            g.counties path:hover{
                fill: #00e673;
            }
        </style>
    </head>
​
    <body>
​
        <div id="container1">
            <h1>Motor Vehicle Date Rates by County for the State of Maryland</h1>
​
        <script type="text/javascript">
​
            // Tunable variables:
            var svgw = 1000;
            var svgh = 530;
            var meas = { base: "MVMort_rate", cil: "MVMort_cil", cih: "MVMort_cih"};
            var landColor = "#d9d9d9";
​
            //Define map projection
            var projection = d3.geo.conicEqualArea()
                                   .parallels([38.25, 39.64])
                                   .rotate([77, 0])
                                   .center([0, 39])
                                   .translate([ 555, 220 ])
                                   .scale([ 16000 ]);
​
            //Define path generator
            var pathgen = d3.geo.path()
                             .projection(projection);
​
            //Define quantize scale to classify the data for the map
            var colorRamp = d3.scale.quantize()
                // ColorBrewer YlOrRd:
                .range([ "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]);
                // ColorBrewer RdYlBu
                // .range([ "#2c7bb6", "#abd9e9", "#ffffbf", "#fdae61", "#d7191c" ]);
​
            //Create SVG
            var svg1 = d3.select("#container1")
                        .append("svg")
                        .attr("width", svgw)
                        .attr("height", svgh)
                        ;
​
            //Load in GeoJSON data for neighboring states
            d3.json("cb_2014_us_state_5m_DE.DC.NJ.PA.VA.WV.json", function(jsonStates) {
                //Bind data and create one path per GeoJSON feature
                svg1.append("g").attr("class", "states").selectAll("path")
                    .data(jsonStates.features)
                    .enter()
                    .append("path")
                    .attr("d", pathgen)
                    .attr("fill", landColor);
            });
        
            //Load in GeoJSON data for Maryland counties
            d3.json("cb_2014_us_county_5m_MD.json", function(jsonCounties) {
​
                //Read in County Health Ranking data
                d3.csv("MD County Health Rankings - additional_measures.csv", function(data) {
​
                    //Set input domain for color scale
                    colorRamp.domain([
                        d3.min(data, function(d) { return +d[meas.base]; }), 
                        d3.max(data, function(d) { return +d[meas.base]; })
                    ]);
​
                    //Join the County Health Ranking data to the GeoJSON array
                    //Loop through once for each data value
                    for (var i = 0; i < data.length; i++) {
                        //Grab country FIPS
                        var dataCoFIPS = data[i].CoFIPS;
                        //Grab data value, and convert from string to float
                        var dataBase = +data[i][meas.base];
                        var dataCil  = +data[i][meas.cil];
                        var dataCih  = +data[i][meas.cih];
                        // console.log("Start looking for dataCoFIPS:", dataCoFIPS)
                        //Find the corresponding country inside the GeoJSON
                        for (var j = 0; j < jsonCounties.features.length; j++) {
                            //Grap the county FIPS (in GEOID)
                            var jsonCoFIPS = jsonCounties.features[j].properties.GEOID;
                            // console.log("Checking jsonCoFIPS:", jsonCoFIPS)
                            if (dataCoFIPS == jsonCoFIPS) {
                                //Copy the data values into the GeoJSON
                                jsonCounties.features[j].properties.base = dataBase;
                                jsonCounties.features[j].properties.cil = dataCil;
                                jsonCounties.features[j].properties.cih = dataCih;
                                //Stop looking through the JSON
                                break;
                            }
                        }
                        if (dataCoFIPS != jsonCoFIPS) {
                            console.log("End join data loop", dataCoFIPS, jsonCoFIPS)
                        }
                    }  // End of data join
​
                //Bind data and create one path per GeoJSON feature
                svg1.append("g").attr("class", "counties").selectAll("path")
                    .data(jsonCounties.features)
                    .enter()
                    .append("path")
                    .attr("d", pathgen)
                    .attr("fill", function(d) {
                        //Get data value
                        var value = d.properties.base;
                            if (value) {
                                //If value exists…
                                return colorRamp(value);
                            } else {
                                //If value is undefined…
                                return "#cccccc";
                            }
                        });
​
                });  //End d3.csv()
​
            });  //End d3.json() 
​
        </script>
​
        <p style="font-size:12px">
            Sources: County Health Rankings and the U.S. Census Bureau
            <br>
            Projection: Albers equal area conic
        </p>
​
        </div>
    </body>
</html>
    