slave voyages - embarking

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.

forked from enjalot's block: slave voyages - embarking

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js