D3 Examples - [unlisted] McCann Style Map (State Grid Map)

xxxxxxxxxx
 
<html>
<head>
<meta charset="utf-8">
<!-- Load the d3 library. -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href='https://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>
​
    