Built with blockbuilder.org
forked from malcolm-decuire's block: McCann Style Map (State Grid Map)
Last active
July 30, 2016 23:51
-
-
Save curran/df1038e13e6e101e77de to your computer and use it in GitHub Desktop.
[unlisted] McCann Style Map (State Grid Map)
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 | TotalPopulation | TotalSlaves | Families | FreePopulation | TotalSlaveHolders | SlaveHolder Ratio | SlavesRatio | |
|---|---|---|---|---|---|---|---|---|
| AL | 964,201.00 | 435,080.00 | 96,603.00 | 529,121.00 | 33,730.00 | 0.35 | 0.45 | |
| AK | 435,450.00 | 111,115.00 | 57,244.00 | 324,335.00 | 11,481.00 | 0.20 | 0.26 | |
| CA | 379,985.00 | 0.00 | 98,767.00 | 379,994.00 | 0.00 | 0.00 | 0.00 | |
| CT | 460,138.00 | 0.00 | 94,831.00 | 460,147.00 | 0.00 | 0.00 | 0.00 | |
| DE | 112,216.00 | 1,798.00 | 18,966.00 | 110,418.00 | 587.00 | 0.03 | 0.02 | |
| FL | 140,424.00 | 61,745.00 | 15,090.00 | 78,679.00 | 5,152.00 | 0.34 | 0.44 | |
| GA | 1,057,286.00 | 462,198.00 | 109,919.00 | 595,088.00 | 41,084.00 | 0.37 | 0.44 | |
| IL | 1,711,942.00 | 0.00 | 315,539.00 | 1,711,951.00 | 0.00 | 0.00 | 0.00 | |
| ID | 1,350,419.00 | 0.00 | 248,664.00 | 1,350,428.00 | 0.00 | 0.00 | 0.00 | |
| IA | 674,904.00 | 0.00 | 124,098.00 | 674,913.00 | 0.00 | 0.00 | 0.00 | |
| KS | 107,206.00 | 2.00 | 21,912.00 | 107,204.00 | 2.00 | 0.00 | 0.00 | |
| KT | 1,155,684.00 | 225,483.00 | 166,321.00 | 930,201.00 | 38,645.00 | 0.23 | 0.20 | |
| LA | 708,002.00 | 331,726.00 | 74,725.00 | 376,276.00 | 22,033.00 | 0.29 | 0.47 | |
| ME | 628,270.00 | 0.00 | 120,863.00 | 628,279.00 | 0.00 | 0.00 | 0.00 | |
| MD | 687,049.00 | 87,189.00 | 110,278.00 | 599,860.00 | 13,783.00 | 0.12 | 0.13 | |
| MA | 1,231,057.00 | 0.00 | 251,287.00 | 1,231,066.00 | 0.00 | 0.00 | 0.00 | |
| MI | 749,104.00 | 0.00 | 144,761.00 | 749,113.00 | 0.00 | 0.00 | 0.00 | |
| MN | 172,014.00 | 0.00 | 37,319.00 | 172,023.00 | 0.00 | 0.00 | 0.00 | |
| MS | 791,305.00 | 436,631.00 | 63,015.00 | 354,674.00 | 30,943.00 | 0.49 | 0.55 | |
| MO | 1,182,012.00 | 114,931.00 | 192,073.00 | 1,067,081.00 | 24,320.00 | 0.13 | 0.10 | |
| NE | 28,841.00 | 15.00 | 5,931.00 | 28,826.00 | 6.00 | 0.00 | 0.00 | |
| NV | 6,848.00 | 0.00 | 2,027.00 | 6,857.00 | 0.00 | 0.00 | 0.00 | |
| NH | 326,064.00 | 0.00 | 69,018.00 | 326,073.00 | 0.00 | 0.00 | 0.00 | |
| NJ | 672,035.00 | 0.00 | 130,348.00 | 672,017.00 | 0.00 | 0.00 | 0.00 | |
| NY | 3,880,726.00 | 0.00 | 758,420.00 | 3,880,735.00 | 0.00 | 0.00 | 0.00 | |
| NC | 992,622.00 | 331,059.00 | 125,090.00 | 661,563.00 | 34,658.00 | 0.28 | 0.33 | |
| OH | 2,339,502.00 | 0.00 | 434,134.00 | 2,339,511.00 | 0.00 | 0.00 | 0.00 | |
| OR | 52,456.00 | 0.00 | 11,063.00 | 52,465.00 | 0.00 | 0.00 | 0.00 | |
| PA | 2,906,206.00 | 0.00 | 524,558.00 | 2,906,215.00 | 0.00 | 0.00 | 0.00 | |
| RI | 174,611.00 | 0.00 | 35,209.00 | 174,620.00 | 0.00 | 0.00 | 0.00 | |
| SC | 703,708.00 | 402,406.00 | 58,642.00 | 301,302.00 | 26,701.00 | 0.46 | 0.57 | |
| TN | 1,109,801.00 | 275,719.00 | 149,335.00 | 834,082.00 | 36,844.00 | 0.25 | 0.25 | |
| TX | 604,215.00 | 182,566.00 | 76,781.00 | 421,649.00 | 21,878.00 | 0.28 | 0.30 | |
| VT | 315,089.00 | 0.00 | 63,781.00 | 315,098.00 | 0.00 | 0.00 | 0.00 | |
| VA | 1,596,318.00 | 490,865.00 | 201,523.00 | 1,105,453.00 | 52,128.00 | 0.26 | 0.31 | |
| WI | 775,872.00 | 0.00 | 147,473.00 | 775,881.00 | 0.00 | 0.00 | 0.00 |
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> | |
| <meta charset="utf-8"> | |
| <!-- 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 map of slave ownership in the USA</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": 7, "col": 1 }, | |
| "TX" : { "state": "TX", "row": 7, "col": 3 }, | |
| "FL" : { "state": "FL", "row": 7, "col": 8 } | |
| }; | |
| //first | |
| var d3_info = {}; | |
| ///////////////////// | |
| ///////////////////// | |
| d3.tsv("dataX.tsv", function(error, tsv_data) { | |
| if (error) throw error; | |
| tsv_data.forEach(function(d){ | |
| // This "if" is necessary because "KT" (and maybe others) in the TSV data | |
| // but not in the state grid. | |
| if(stateGrid[d.State]){ | |
| // Attach the data from the TSV file to the state grid objects. | |
| stateGrid[d.State].SlavesRatio = parseNumber(d.SlavesRatio); | |
| // You can copy and modify this line for each of the various fields. | |
| // Example data inside "d": | |
| // Families: "96,603.00" | |
| // FreePopulation: "529,121.00" | |
| // SlaveHolder Ratio: "0.35" | |
| // SlavesRatio: "0.45" | |
| // State: "AL" | |
| // TotalPopulation: "964,201.00" | |
| // TotalSlaveHolders: "33,730.00" | |
| // TotalSlaves: "435,080.00" | |
| } | |
| }); | |
| render(); | |
| }); | |
| // This function removes commas and parses the given string into a number. | |
| function parseNumber(string){ | |
| return parseFloat(string.replace(/,/g, "")); | |
| } | |
| //third | |
| ///////////////////// | |
| ///////////////////// | |
| var selectedStates = {}; | |
| var stateIDs = Object.keys(stateGrid); | |
| var xScale, yScale, xDomain, yDomain; | |
| var height = 900; | |
| var width = 1000; | |
| var svg = d3.select("#plot").append("svg") | |
| .attr("height", height) | |
| .attr("width", width); | |
| var stateWidth = 50; | |
| var gap = 3; | |
| 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)]); | |
| function render(){ | |
| var color = d3.scale.linear() | |
| .domain(d3.extent(stateIDs.map(function (d){ | |
| return stateGrid[d].SlavesRatio; | |
| }))) | |
| .range(["gray", "white"]); | |
| 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) | |
| .attr("fill", function (d){ | |
| return color(stateGrid[d].SlavesRatio); | |
| }) | |
| // .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.attr("fill", function (stateID) { | |
| if (selectedStates[stateID]) { | |
| return "#99f"; | |
| } | |
| else { | |
| return "#ccc"; | |
| } | |
| }); | |
| }); | |
| /*var Info_Tile = d3.selectAll("g").selectAll("rect") | |
| .data(d3_info[2]) | |
| .enter().append("Info_Tile");*/ | |
| // 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