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)

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

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

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

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js