D3 Examples - slave voyages

Slave Voyages - Embarking
This is an attempt at visualizing the relative scale of the slave trade by country. The data comes from slavevoyages.org.
The visualization is inpsired by the Mountains-out-of-molehills visualization. The focus is to communicate the relative scale over time, giving us a sense of activity over time of this attrocious part of our history.
xxxxxxxxxx
 
<!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>
    // https://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>
​
​
​
    