D3 Examples - McCann Style Map: USA 1860 CENSUS

McCann Style Map: USA 1860 CENSUS
Viewable on desktop & mobile
Synopsis: According to the 1860 USA Census there were less than 15 states of the 30 states in the Union that allowed the ownership of African-Americans.
Blue states had an enslave ratio of more than 0.13.
Gray states had a enslaved ratio of less than 0.
Black states are undefined for now.
Sources: Aggregated Data http://www.civil-war.net/pages/1860_census.html
Raw Data https://www.nhgis.org/user-resources/data-availability#table-data
McCann Style Map: https://gist.github.com/xboard/e974aee21edf4f1c5054
Curran Kelleher aka D3 Boss https://github.com/curran for helping me build out clean functions (D3 Boss)
xxxxxxxxxx
 
<html>
<head>
<meta charset="utf-8">
<!-- Load the d3 library. -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></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; }
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
​
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
​
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
  
  
</style>
</head>
<body>
​
<h3>USA 1860 CENSUS: Ratio of African Americans In Bondage.</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; 
​
  
// second   
  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();
});
​
  
//third  
// This function removes commas and parses the given string into a number.
function parseNumber(string){
  return parseFloat(string.replace(/,/g, ""));
}
   
            
/////////////////////  
/////////////////////   
  
// must assign stateIDs the keys within the stateGrid object. 
var stateIDs = Object.keys(stateGrid);
 
var xScale, yScale, xDomain, yDomain;
​
var height = 1200;
var width = 1200;
​
var svg = d3.select("#plot").append("svg")
  .attr("height", height)
  .attr("width", width);
​
var stateWidth = 50;
var gap = 3;
​
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Slave Ratio:</strong> <span style='color:red'>" + stateGrid[d].SlavesRatio + "</span>";
  })  
  
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()
    //.category10()
    //for (var i = 0; i < 10; i++){colors(i)}
        //d3.extent
    .domain(d3.extent(stateIDs.map(function (d){
      
      if (stateGrid[d].SlavesRatio){return stateGrid[d].SlavesRatio;} 
       
//      else {return data(stateIDs);}
    })))
    .range(["gray", "blue"]);
​
  var stateGroups = stateGroup
      .selectAll("g").data(stateIDs)
      .enter().append("g")
        .on('mouseover', tip.show)
      .on('mouseout', tip.hide) 
      .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);
      })
  
svg.call(tip);  
​
​
  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>
​
    