Intermediate D3 - Module 4 - Chloropleth

<!DOCTYPE html>

<html lang="en">		
    <head>
        <meta charset="utf-8">
    	<title>Will's module 4 exercise</title>
         <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>

#container{
            width: 800px;
            height: 500px;
            margin-left:auto;
            margin-right:auto;
            margin-top: 100px;
            padding: 20px;
            background-color:white;
            box-shadow: 3px 3px 4px 4px gray;
        }

svg {
            background-color: white;
        }
            
        
        </style>
    </head>

<body>

</div>
    
<script type="text/javascript">

var w = 800;
            var h = 500;

//stores the type of projection (albersUsa projection makes alaska and hawaii appear alongside US)
            //just so happens that scale w works, usually it will be w/2 etc
            var projection = d3.geo.albersUsa()
                                   .translate([ w/2, h/2 ])
                                   .scale([ w ]);

//creates a path using the projection var
            var path = d3.geo.path().projection(projection);

//creates a scale just like any other scale, but "quantize" meaning the input is continuous but output is discrete. Input is continuous and divided into uniform segments based on range (in this case colors). It is still linear (ie it is not a logarithmic scale etc)
            var color = d3.scale.quantize()
                                .range([ "#ffffcc", "#c2e699", "#78c679", "#31a354", "#006837" ]);

var svg = d3.select("#container")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

//creates an array for the legend scales
            var colorRange = [ "#ffffcc", "#c2e699", "#78c679", "#31a354", "#006837" ];

//load csv data w internet field
    d3.csv("qualityoflife.csv", function(data){

//domain for color scale
        color.domain([0.55,0.85]);

//load json data - need to make sure json data includes features, not just paths, so state names are included. do this by loading features into mapshaper
        d3.json("states2.json", function(json) {

//Use for loops to merge state json data and state quality of life data into one array (insert internet data into json data array)

//loop through once for each data value
            for (var i = 0; i < data.length; i++) {
                
                        //Grab state name
                        var dataStateName = data[i].State;
                        
                        //Grab data value
                        var dataValue = data[i].internet;
                
                        //loop through to find the corresponding state inside the GeoJSON
                        for (var j = 0; j < json.features.length; j++) {
                        
                            //compare the state names
                            var jsonStateName = json.features[j].properties.STATE_NAME;
                
                            if (dataStateName == jsonStateName) {
                        
                                //Copy the data value into the GeoJSON (creates "newinternetfield" field on the fly)
                                json.features[j].properties.newinternetfield = dataValue;
                                
                                //Stop looking through the JSON
                                break;
                                
                            }  //end if statement
                        }  //end inner for loop  
                    } //end outer for loop

//log json data to console to confirm array has internet field
                    console.log(json);

//Bind data as normal, creating 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 value = d.properties.newinternetfield;

//check to see if value exists (matters in this case because DC is not in one of the datasets?)
                            if (value) {
                                return color(value);
                            } else {
                                return "#ccc";
                            }

});

}); //end json function
                });  // end csv function

//chart title
            svg.append("text")
                .attr("x",20)
                .attr("y",30)
                .attr("font-size",24)
                .text("Percentage of Households with Broadband Internet Access");

//source
            svg.append("text")
                .attr("x",w-200)
                .attr("y",490)
                .attr("fill","gray")
                .text("Source: Choose Maryland");

//rectangle width for legend
            var rw = 20;

//creates five rectangles and labels
            for(i=0; i<5; i++) {

svg.append("rect")
                .attr("x",w-150)
                .attr("y",300+i*rw*1.5)
                .attr("width",rw)
                .attr("height",rw)
                .attr("fill", function(){return colorRange[4-i];});

svg.append("text")
                .attr("x",w-150+rw+5)
                .attr("y",300+i*rw*1.5+15)                    
                .text(function(){return (4-i)*6+55 + "% - " + ((4-i)*6+60.9) + "%";});
                                };
                //need to put second ((4-i)*6+60.9) in parentheses because javascript will treat plus signs as addition until it finds text (going left to right), at which point it starts treating them as concatenation.  But anything in parentheses is done first, so plus sign still means addition when the math is done.

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js