Skip to content

Instantly share code, notes, and snippets.

@SHewitt95
Created April 4, 2016 13:52
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save SHewitt95/baa4b2681e433cbc57b1eec0a3787c0f to your computer and use it in GitHub Desktop.
<!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>
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
Display the source blob
Display the rendered blob
Raw
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