|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
</head> |
|
|
|
<body> |
|
<svg></svg> |
|
<script> |
|
// http://slavevoyages.org/tast/assessment/estimates.faces |
|
d3.tsv("slavery.tsv", function(err, data) { |
|
var countries = Object.keys(data[0]).slice(1,7); |
|
countries = [ |
|
"Portugal", |
|
"Great Britain", |
|
"France", |
|
"Spain", |
|
"Netherlands", |
|
"U.S.A.", |
|
] |
|
var countryData = {} |
|
countries.forEach(function(country) { |
|
countryData[country] = data.map(function(d) { |
|
return parseInt(d[country].replace(/,/g, '')); |
|
}) |
|
}) |
|
console.log(countries) |
|
console.log(data[0]); |
|
var width = 960; |
|
var height = 500; |
|
|
|
var lineHeight = 211; |
|
var lineOffset = 21; |
|
|
|
var chartHeight = 350; |
|
|
|
var color = d3.scale.ordinal() |
|
.domain(d3.range(countries.length)) |
|
.range([ |
|
"#7C938D", |
|
"#544C36", |
|
"#BB976E", |
|
"#A4B284", |
|
"#5E6560", |
|
"#7A8868", |
|
"#9AB7B5" |
|
]) |
|
|
|
|
|
var svg = d3.select("svg") |
|
.attr({width: width, height: height }); |
|
|
|
var xscale = d3.scale.linear() |
|
//.domain(d3.extent(data, function(d) { return +d.year })) |
|
.domain([0, data.length]) |
|
.range([140, width - 20]) |
|
|
|
var yscale = d3.scale.linear() |
|
.domain([0, d3.max(countries, function(country) { |
|
return d3.max(countryData[country]) |
|
})]) |
|
.range([lineHeight, 0]) |
|
|
|
var area = d3.svg.area() |
|
.x(function(d,i) { return xscale(i); }) |
|
.y0(function(d) { return lineHeight; }) |
|
.y1(function(d) { return yscale(d); }) |
|
.interpolate("basis") |
|
|
|
var xaxis = svg.selectAll("g.year") |
|
.data(data) |
|
.enter() |
|
.append("g").classed("year", true) |
|
.attr({ |
|
transform: function(d,i) { |
|
return "translate(" + [xscale(i), chartHeight] + ")" |
|
} |
|
}) |
|
.style({ |
|
"display": function(d,i) { return i % 20 == 0 ? "": "none" }, |
|
"font-size": "10px" |
|
}) |
|
xaxis |
|
.append("line").attr({ |
|
x1: 0, |
|
y1: 0, |
|
x2: 0, |
|
y2: -chartHeight, |
|
stroke: "#f7f7f7", |
|
|
|
}) |
|
xaxis |
|
.append("text") |
|
.text(function(d) { return d.year }) |
|
.attr("transform", "rotate(0)translate(-10,12)") |
|
|
|
var legend = svg.selectAll("g.country") |
|
.data(countries) |
|
.enter() |
|
.append("g").classed("country", true) |
|
.attr("transform", function(d,i) { |
|
return "translate(" + [20, 205 + i * lineOffset] + ")"; |
|
}) |
|
.style({ |
|
fill: function(d,i) { return color(i) }, |
|
"font-family": "Helvetica" |
|
}) |
|
.append("text") |
|
.text(function(d) { return d }) |
|
|
|
|
|
var groups = svg.selectAll("g.countries") |
|
.data(countries) |
|
.enter().append("g").classed("countries", true) |
|
.attr({ |
|
transform: function(d,i) { return "translate(" + [0, i * lineOffset] + ")" }, |
|
fill: function(d,i) { return color(i) }, |
|
}) |
|
|
|
var areas = groups.selectAll("path.country") |
|
.data(function(d) { return [countryData[d]] }) |
|
areas |
|
.enter() |
|
.append("path").classed("country", true) |
|
.attr("d", function(d) { |
|
return area(d) |
|
}) |
|
|
|
|
|
|
|
}) |
|
</script> |
|
</body> |
|
|
|
|