Create a gist now

Instantly share code, notes, and snippets.

@yanofsky /index.html forked from mimno/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
<html>
<head>
<!-- Load the d3 library. -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body { font-family: "Open Sans"; }
text.stateID { dominant-baseline: middle; text-anchor: middle; }
</style>
</head>
<body>
<h3>A clickable <a href="http://fivethirtyeight.com/features/where-your-state-gets-its-money/">McCann-style map</a>, currently showing states that start with M.</h3>
<div id="plot"></div>
<script>
var stateGrid = {
"ME" : { "state": "ME", "row": 0, "col": 10 },
"WI" : { "state": "WI", "row": 1, "col": 5 },
"VT" : { "state": "VT", "row": 1, "col": 9 },
"NH" : { "state": "NH", "row": 1, "col": 10 },
"WA" : { "state": "WA", "row": 2, "col": 0 },
"ID" : { "state": "ID", "row": 2, "col": 1 },
"MT" : { "state": "MT", "row": 2, "col": 2 },
"ND" : { "state": "ND", "row": 2, "col": 3 },
"MN" : { "state": "MN", "row": 2, "col": 4 },
"IL" : { "state": "IL", "row": 2, "col": 5 },
"MI" : { "state": "MI", "row": 2, "col": 6 },
"NY" : { "state": "NY", "row": 2, "col": 8 },
"MA" : { "state": "MA", "row": 2, "col": 9 },
"OR" : { "state": "OR", "row": 3, "col": 0 },
"NV" : { "state": "NV", "row": 3, "col": 1 },
"WY" : { "state": "WY", "row": 3, "col": 2 },
"SD" : { "state": "SD", "row": 3, "col": 3 },
"IA" : { "state": "IA", "row": 3, "col": 4 },
"IN" : { "state": "IN", "row": 3, "col": 5 },
"OH" : { "state": "OH", "row": 3, "col": 6 },
"PA" : { "state": "PA", "row": 3, "col": 7 },
"NJ" : { "state": "NJ", "row": 3, "col": 8 },
"CT" : { "state": "CT", "row": 3, "col": 9 },
"RI" : { "state": "RI", "row": 3, "col": 10 },
"CA" : { "state": "CA", "row": 4, "col": 0 },
"UT" : { "state": "UT", "row": 4, "col": 1 },
"CO" : { "state": "CO", "row": 4, "col": 2 },
"NE" : { "state": "NE", "row": 4, "col": 3 },
"MO" : { "state": "MO", "row": 4, "col": 4 },
"KY" : { "state": "KY", "row": 4, "col": 5 },
"WV" : { "state": "WV", "row": 4, "col": 6 },
"VA" : { "state": "VA", "row": 4, "col": 7 },
"MD" : { "state": "MD", "row": 4, "col": 8 },
"DE" : { "state": "DE", "row": 4, "col": 9 },
"AZ" : { "state": "AZ", "row": 5, "col": 1 },
"NM" : { "state": "NM", "row": 5, "col": 2 },
"KS" : { "state": "KS", "row": 5, "col": 3 },
"AR" : { "state": "AR", "row": 5, "col": 4 },
"TN" : { "state": "TN", "row": 5, "col": 5 },
"NC" : { "state": "NC", "row": 5, "col": 6 },
"SC" : { "state": "SC", "row": 5, "col": 7 },
"OK" : { "state": "OK", "row": 6, "col": 3 },
"LA" : { "state": "LA", "row": 6, "col": 4 },
"MS" : { "state": "MS", "row": 6, "col": 5 },
"AL" : { "state": "AL", "row": 6, "col": 6 },
"GA" : { "state": "GA", "row": 6, "col": 7 },
"HI" : { "state": "HI", "row": 7, "col": 0 },
"AK" : { "state": "AK", "row": 0, "col": 0 },
"TX" : { "state": "TX", "row": 7, "col": 3 },
"FL" : { "state": "FL", "row": 7, "col": 8 }
};
var selectedStates = {};
var stateIDs = Object.getOwnPropertyNames(stateGrid);
stateIDs.forEach(function(stateID) {
selectedStates[stateID] = stateID.indexOf("M") == 0;
});
var xScale, yScale, xDomain, yDomain;
var height = 300;
var width = 350;
var svg = d3.select("#plot").append("svg")
.attr("height", height)
.attr("width", width);
var stateWidth = 20;
var gap = 2;
var stateGroup = svg.append("g").attr("transform", "translate(50, 50)");
var stateXScale = d3.scale.linear().domain([0,11]).range([0, 11 * (stateWidth + gap)]);
var stateYScale = d3.scale.linear().domain([0,7]).range([0, 7 * (stateWidth + gap)]);
var stateGroups = stateGroup.selectAll("g").data(stateIDs)
.enter().append("g")
.attr("transform", function (stateID) { return "translate(" + stateXScale(stateGrid[stateID].col) + "," + stateYScale(stateGrid[stateID].row) + ")"; });
var stateRects = stateGroups.append("rect")
.attr("width", stateWidth).attr("height", stateWidth)
.style("fill", function (stateID) { if (selectedStates[stateID]) { return "#99f"; } else { return "#ccc"; } } );
stateRects
.on("click", function (stateID) {
// select (or unselect) the state
selectedStates[stateID] = ! selectedStates[stateID]
// Update the color of the state box
stateRects.style("fill", function (stateID) { if (selectedStates[stateID]) { return "#99f"; } else { return "#ccc"; } } );
});
// What do we have to do to make this not clickable?
stateGroups.append("text")
.attr("class", "stateID")
.style("font-size", "x-small")
.style("pointer-events", "none")
.attr("x", stateWidth / 2)
.attr("y", stateWidth / 2)
.text(function (d) { return d; });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment