-
-
Save yanofsky/917dd6a532cc4fa3808a to your computer and use it in GitHub Desktop.
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
| <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