Built with blockbuilder.org
forked from malcolm-decuire's block: McCann Style Map (State Grid Map)
| 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 |
| <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