Skip to content

Instantly share code, notes, and snippets.

@wmerrow

wmerrow/index.html

Last active November 28, 2015 16:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wmerrow/8f774b4634a95284e14c to your computer and use it in GitHub Desktop.
Save wmerrow/8f774b4634a95284e14c to your computer and use it in GitHub Desktop.
Download ZIP
Intermediate D3 - Module 4 - Chloropleth
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Will's module 4 exercise</title>
<script type="text/javascript" src="http://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>
Raw
qualityoflife.csv
State Number of America's Byways Number of National Parks Number of National Historic Landmarks National Register of Historic Places Listings artspercapita internet Arts, Entertainment, Sports and Media Employment per 1000 Well-Being Index Total Professionally Active Physicians per 1000 Population
Alabama 4 7 37 1275 0.83 0.66 8.49 60.3 2.25
Alaska 5 23 49 419 1.02 0.81 10.55 64.7 2.32
Arizona 5 22 45 1424 0.00 0.76 12.24 62.2 2.42
Arkansas 3 7 16 2586 0.57 0.64 7.35 60.7 2.2
California 7 27 145 2646 0.29 0.80 19.19 62.8 2.61
Colorado 11 13 24 1480 0.42 0.81 15.43 63.2 2.48
Connecticut 2 2 61 1592 1.68 0.81 14.71 61.9 3.81
Delaware 1 1 13 692 3.81 0.76 8.51 61.1 3.01
Florida 6 11 45 1701 2.09 0.76 11.56 61.9 2.51
Georgia 1 11 48 2105 0.09 0.73 11.17 61.6 2.25
Hawaii 0 7 33 335 3.89 0.81 15.15 64.5 2.57
Idaho 6 7 10 1030 0.48 0.74 12.96 61.9 1.74
Illinois 7 1 87 1809 0.63 0.76 11.59 61.1 2.98
Indiana 3 3 40 1828 0.52 0.71 10.73 60 2.37
Iowa 2 2 25 2254 0.40 0.74 12.12 62.2 2.41
Kansas 2 5 25 1379 0.07 0.75 12.41 61.2 2.33
Kentucky 6 4 32 3380 0.64 0.69 8.57 59.8 2.44
Louisiana 2 5 54 1395 0.49 0.67 11.14 60.9 2.61
Maine 4 3 44 1594 0.73 0.75 12.51 62.4 3.25
Maryland 6 16 73 1533 2.88 0.80 12.25 61.7 3.69
Massachusetts 1 16 189 4268 1.83 0.81 14.26 62.2 4.65
Michigan 3 5 40 1853 0.91 0.73 11.8 60.7 3.45
Minnesota 8 5 25 1665 6.47 0.78 13.34 62.8 2.96
Mississippi 2 8 39 1393 0.53 0.59 7.33 60.2 2
Missouri 2 6 37 2224 1.14 0.72 12.91 60.8 3.02
Montana 1 8 27 1139 0.55 0.73 13.99 63.7 2.09
Nebraska 0 5 20 1064 0.85 0.75 11.73 63.1 2.59
Nevada 4 3 8 372 0.49 0.76 14.42 61.5 1.93
New Hampshire 3 2 23 758 0.22 0.82 11.81 62.2 2.89
New Jersey 2 9 58 1673 1.86 0.81 11.01 61.2 3.01
New Mexico 8 14 46 1121 0.75 0.68 10.23 62.8 2.43
New York 3 22 269 5703 2.38 0.77 22.57 61.2 3.92
North Carolina 4 10 38 2880 0.76 0.72 9.96 62.2 2.46
North Dakota 2 3 6 439 1.30 0.75 10.3 62.1 2.41
Ohio 5 8 72 3901 1.23 0.74 11.34 60.1 3.23
Oklahoma 4 3 22 1246 0.93 0.69 8.95 61 2.19
Oregon 10 6 17 1987 0.54 0.79 14.02 61.8 2.74
Pennsylvania 3 18 167 3360 0.90 0.74 10.62 61.2 3.53
Rhode Island 0 2 45 771 3.10 0.77 13.23 61.1 4.18
South Carolina 4 6 76 1511 0.90 0.68 9.27 62.2 2.34
South Dakota 2 6 16 1294 0.99 0.72 12.89 64.3 2.17
Tennessee 5 12 30 2054 1.10 0.68 10.5 60.6 2.67
Texas 0 13 46 3189 0.42 0.73 9.83 62.8 2.14
Utah 8 13 14 1811 0.92 0.82 14.28 62.9 2.06
Vermont 1 2 17 833 1.03 0.76 17.45 62.7 3.38
Virginia 5 21 120 2993 0.43 0.77 13.02 62.4 2.62
Washington 7 14 24 1512 0.17 0.82 15.01 61.8 2.78
Washington D.C. 0 23 74 568 24.28 0.73 43.87 0 9.34
West Virginia 6 6 16 1029 0.47 0.66 7.19 59 2.73
Wisconsin 1 2 42 2293 0.14 0.75 12.37 62.2 2.77
Wyoming 1 7 25 535 2.20 0.76 11.01 63.9 1.91
Display the source blob
Display the rendered blob
Raw
states2.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment