|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<!-- Load the d3 library. --> |
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></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; } |
|
.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> |
