xxxxxxxxxx<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> <style type="text/css"> body { background-color: whitesmoke; font-family: sans-serif; } #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 id = "container"> </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