[unlisted] McCann Style Map (State Grid Map)

forked from malcolm-decuire's block: McCann Style Map (State Grid Map)

<html>
<head>
<meta charset="utf-8">

<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>

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) 
          + ")";
      });

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js