Created
April 4, 2016 13:52
Star
You must be signed in to star a gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- A mod of Michelle Chandra's block: http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 --> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
/* On mouse hover, lighten state color */ | |
path { | |
stroke: gray; | |
stroke-width: 1; | |
} | |
circle { | |
fill: orange; | |
fill-opacity: .8; | |
} | |
p.intro { | |
width: 500px; | |
} | |
/* Style for Custom Tooltip */ | |
div.tooltip { | |
position: absolute; | |
text-align: left; | |
min-width: 100px; | |
height: 80px; | |
padding: 2px; | |
font: 12px sans-serif; | |
background: white; | |
border: 1px orange solid; | |
border-radius: 5px; | |
pointer-events: none; | |
} | |
.tooltip p { | |
margin: 5px; | |
} | |
/* Legend Font Style */ | |
body { | |
font: 11px sans-serif; | |
} | |
/* Legend Position Style */ | |
.legend { | |
position:absolute; | |
left:800px; | |
top:350px; | |
} | |
</style> | |
</head> | |
<body> | |
<h2>A Map Showing Percentage Change in Tuition at 4-year Public Universities</h2> | |
<p class="intro">The map displays the percent change in tuition at 4-year public universities. The change ranges from the 2004-2005 academic year to the 2011-2012 academic year. The amounts are shown in 2015 dollars.</p> | |
<p class="intro">Source: The College Board</p> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script src="https://d3js.org/queue.v1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script> | |
<script type="text/javascript"> | |
//Width and height of map | |
var width = 960; | |
var height = 500; | |
// D3 Projection | |
var projection = d3.geo.albersUsa() | |
.translate([width/2, height/2]) // translate to center of screen | |
.scale([1000]); // scale things down so see entire US | |
// Define path generator | |
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths | |
.projection(projection); // tell path generator to use albersUsa projection | |
// Define linear scale for output | |
var stateColor = d3.scale.linear() | |
.range(["yellow", "red"]); | |
//Create SVG element and append map to the SVG | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
// Append Div for tooltip to SVG | |
var tooltip = d3.select("body") | |
.append("div") | |
.attr("class", "tooltip") | |
.style("display", "none"); | |
queue() | |
//.defer(d3.json, "data/geojson/us-states.json") | |
//.defer(d3.csv, "data/states-visited.csv") | |
.defer(d3.csv, "state_costs.csv") | |
.defer(d3.json, "us-states.json") | |
.await(ready); | |
function ready(error, costs, json) { | |
//console.log("json", json); | |
//console.log("costs", costs); | |
//stateColor.domain(d3.extent(costs, function(s) { return s["percent_change_4year"];})); // setting the range of the input data | |
stateColor.domain([0, 100]); // Represents 0 to 100 percent. | |
// Loop through each state data value in the .csv file | |
costs.forEach(function(d) { | |
var stateName = d["State"]; | |
var statePercentValue4Year = d["percent_change_4year"]; | |
var statePercentValue2Year = d["percent_change_2year"]; | |
var state2yearCost0405 = d["cost_2year_0405"]; | |
var state4yearCost0405 = d["cost_4year_0405"]; | |
var state2yearCost1112 = d["cost_2year_1112"]; | |
var state4yearCost1112 = d["cost_4year_1112"]; | |
//console.log(stateName, stateValue); | |
// Find the corresponding state inside the GeoJSON | |
json.features.forEach(function(f) { | |
var jsonState = f.properties.name; | |
//console.log(jsonState); | |
if (stateName === jsonState) { | |
f.properties.percentValue4Year = statePercentValue4Year; | |
f.properties.percentValue2Year = statePercentValue2Year; | |
f.properties.state2yearCost0405 = state2yearCost0405; | |
f.properties.state4yearCost0405 = state4yearCost0405; | |
f.properties.state2yearCost1112 = state2yearCost1112; | |
f.properties.state4yearCost1112 = state4yearCost1112; | |
} | |
}); | |
}); // ends data merge | |
console.log(json); | |
// Bind the data to the SVG and create one path per GeoJSON feature | |
svg.selectAll("path") | |
.data(json.features) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
.attr("id", function(d) { | |
return d.properties.name; | |
}) | |
.attr("data-cost2year0405", function(d) { | |
return d.properties.state2yearCost0405; | |
}) | |
.attr("data-cost2year1112", function(d) { | |
return d.properties.state2yearCost1112; | |
}) | |
.attr("data-cost4year0405", function(d) { | |
return d.properties.state4yearCost0405; | |
}) | |
.attr("data-cost4year1112", function(d) { | |
return d.properties.state4yearCost1112; | |
}) | |
.attr("data-percentValue2Year", function(d) { | |
return d.properties.percentValue2Year; | |
}) | |
.attr("data-percentValue4Year", function(d) { | |
return d.properties.percentValue4Year; | |
}) | |
.style("fill", function(d) { | |
// Get data value for visited | |
var value = d.properties.percentValue4Year; | |
return stateColor(value); | |
}); | |
// Adds legend | |
svg.append("g") | |
.attr("class", "legendColors") | |
.attr("transform", "translate(800, 300)"); // where we put it on the page! | |
var legendColors = d3.legend.color() | |
.shapeWidth(20) | |
.title("Percent Change in Tuition") | |
.labelFormat(d3.format("1f")) | |
.scale(stateColor); // our existing color scale | |
svg.select(".legendColors") | |
.call(legendColors); | |
// Adds tooltip to each state. | |
svg.selectAll("path") | |
.on("mouseover", mouseover) | |
.on("mousemove", mousemove) | |
.on("mouseout", mouseout); | |
} // end ready function | |
function mouseover(e) { | |
var thisPath = d3.select(this); | |
//console.log(thisPath); | |
thisPath.moveToFront(); | |
thisPath.style("stroke", "black"); | |
tooltip | |
.style("display", null) | |
.html("<p><b>State:</b> " + thisPath.attr("id") + "</p>" + | |
"<p><b>Percent Change:</b> " + thisPath.attr("data-percentValue4Year") + "%</p>" + | |
"<p><b>Cost of 4-year college, 04-05:</b> $" + thisPath.attr("data-cost4year0405") + "</p>" + | |
"<p><b>Cost of 4-year college, 11-12:</b> $" + thisPath.attr("data-cost4year1112") + "</p>" ); | |
} | |
function mousemove(e) { | |
tooltip | |
.style("top", (d3.event.pageY - 10) + "px" ) | |
.style("left", (d3.event.pageX + 10) + "px"); | |
} | |
function mouseout(d) { | |
var thisPath = d3.select(this); | |
tooltip | |
.style("display", "none"); | |
thisPath.style("stroke", "gray"); | |
} | |
d3.selection.prototype.moveToFront = function() { | |
return this.each(function(){ | |
this.parentNode.appendChild(this); | |
}); | |
}; | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
State | cost_2year_0405 | cost_2year_1112 | cost_4year_0405 | cost_4year_1112 | percent_change_2year | percent_change_4year | |
---|---|---|---|---|---|---|---|
Alabama | 3437.42 | 4235.99 | 5682.84 | 8451.90 | 23.23 | 48.73 | |
Alaska | 1.00 | 1.00 | 4328.28 | 5762.42 | 0.00 | 33.13 | |
Arizona | 1755.25 | 2272.22 | 5138.50 | 9966.72 | 29.45 | 93.96 | |
Arkansas | 2361.34 | 2813.08 | 5772.30 | 7028.99 | 19.13 | 21.77 | |
California | 1018.12 | 1182.06 | 5285.92 | 9436.43 | 16.10 | 78.52 | |
Colorado | 2794.80 | 3585.27 | 4703.78 | 8315.63 | 28.28 | 76.79 | |
Connecticut | 3031.69 | 3686.68 | 7983.69 | 9736.43 | 21.60 | 21.95 | |
Delaware | 2555.39 | 3259.91 | 8352.89 | 11026.24 | 27.57 | 32.01 | |
District of Columbia | 1.00 | 1.00 | 3175.33 | 7394.49 | 0.00 | 132.87 | |
Florida | 2242.89 | 3153.22 | 3848.20 | 5940.94 | 40.59 | 54.38 | |
Georgia | 2614.61 | 3301.11 | 4298.04 | 7709.28 | 26.26 | 79.37 | |
Hawaii | 1837.16 | 3132.09 | 4266.54 | 8839.58 | 70.49 | 107.18 | |
Idaho | 2265.57 | 2948.29 | 4524.85 | 6002.21 | 30.13 | 32.65 | |
Illinois | 2507.51 | 3329.63 | 8182.78 | 12285.42 | 32.79 | 50.14 | |
Indiana | 3255.98 | 3737.39 | 7367.53 | 8813.18 | 14.79 | 19.62 | |
Iowa | 3679.35 | 4342.68 | 6813.11 | 7988.16 | 18.03 | 17.25 | |
Kansas | 2226.51 | 2495.11 | 5345.14 | 7309.98 | 12.06 | 36.76 | |
Kentucky | 3490.35 | 4279.30 | 5640.00 | 8423.38 | 22.60 | 49.35 | |
Louisiana | 2189.97 | 2853.22 | 4453.03 | 5541.64 | 30.29 | 24.45 | |
Maine | 3269.84 | 3516.61 | 7057.56 | 9893.83 | 7.55 | 40.19 | |
Maryland | 3752.44 | 3916.97 | 8530.56 | 8409.65 | 4.38 | -1.42 | |
Massachusetts | 4235.04 | 5088.47 | 8863.21 | 10737.86 | 20.15 | 21.15 | |
Michigan | 2513.81 | 3022.23 | 7930.77 | 11451.95 | 20.23 | 44.40 | |
Minnesota | 4781.90 | 5451.85 | 8143.72 | 10582.57 | 14.01 | 29.95 | |
Mississippi | 1948.04 | 2329.26 | 5028.87 | 5992.71 | 19.57 | 19.17 | |
Missouri | 2711.63 | 2890.19 | 7477.15 | 8118.09 | 6.58 | 8.57 | |
Montana | 2981.28 | 3226.11 | 5629.92 | 6212.43 | 8.21 | 10.35 | |
Nebraska | 2221.47 | 2631.38 | 5947.45 | 7295.19 | 18.45 | 22.66 | |
Nevada | 2003.48 | 2654.62 | 3621.39 | 6383.56 | 32.50 | 76.27 | |
New Hampshire | 5897.05 | 7102.94 | 10187.53 | 14262.92 | 20.45 | 40.00 | |
New Jersey | 3530.67 | 4342.68 | 10053.96 | 12707.96 | 23.00 | 26.40 | |
New Mexico | 1310.45 | 1583.48 | 4925.55 | 5741.29 | 20.83 | 16.56 | |
New York | 4122.89 | 4492.68 | 6234.74 | 6553.63 | 8.97 | 5.11 | |
North Carolina | 1505.76 | 2186.66 | 4493.35 | 6009.61 | 45.22 | 33.74 | |
North Dakota | 3780.16 | 4147.25 | 5803.80 | 7247.66 | 9.71 | 24.88 | |
Ohio | 4032.91 | 4175.77 | 10377.93 | 9980.45 | 3.54 | -3.83 | |
Oklahoma | 2653.67 | 3194.42 | 4454.29 | 6413.14 | 20.38 | 43.98 | |
Oregon | 3607.53 | 4247.61 | 6578.74 | 8444.51 | 17.74 | 28.36 | |
Pennsylvania | 3613.93 | 4148.31 | 10394.18 | 12766.06 | 14.79 | 22.82 | |
Puerto Rico | 1.00 | 1.00 | 1479.30 | 2760.26 | 0.00 | 86.59 | |
Rhode Island | 2910.72 | 3883.16 | 7475.89 | 10578.35 | 33.41 | 41.50 | |
South Carolina | 3563.43 | 3926.47 | 8330.21 | 10939.62 | 10.19 | 31.32 | |
South Dakota | 3824.26 | 5221.57 | 5478.71 | 7175.82 | 36.54 | 30.98 | |
Tennessee | 2768.34 | 3752.18 | 5425.79 | 7574.07 | 35.54 | 39.59 | |
Texas | 1741.39 | 2154.97 | 6394.77 | 8506.83 | 23.75 | 33.03 | |
Utah | 2541.53 | 3187.03 | 4125.41 | 5598.69 | 25.40 | 35.71 | |
Vermont | 5947.45 | 6887.44 | 11067.04 | 13832.98 | 15.80 | 24.99 | |
Virginia | 2622.17 | 4207.46 | 7029.83 | 10072.35 | 60.46 | 43.28 | |
Washington | 3127.45 | 4028.94 | 6191.90 | 10029.04 | 28.83 | 61.97 | |
West Virginia | 2622.29 | 2859.55 | 4575.25 | 5847.99 | 9.05 | 27.82 | |
Wisconsin | 3661.71 | 4044.79 | 6574.96 | 8658.95 | 10.46 | 31.70 | |
Wyoming | 2124.45 | 2458.14 | 4086.35 | 4357.47 | 15.71 | 6.63 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment