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

forked from iexviz'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>
  <script src="jsonp.js"></script>

</head>

<body>
  <svg></svg>
  <script>
    // https://slavevoyages.org/tast/assessment/estimates.faces
    
             
d3.jsonp("https://api.iextrading.com/1.0/stats/historical/daily?callback=visualise&last=90");

function visualise(data){
      console.log(data)
      
      
      stats = ['litVolume', 'marketPercent', 'marketShare', 'routedVolume', 'volume']
      countries = ['volume','litVolume','routedVolume']
      data.forEach(function(d) {
        d.name = d.venueName;
                d.marketShare = (d.marketShare *1000).toFixed(1);

});
  
        var countryData = {}
      countries.forEach(function(country) {
        countryData[country] = data.map(function(d) {
          return parseInt(d[country]);
        })
      })

var width = 960;
      var height = 350;
      
      var lineHeight = 211;
      var lineOffset = 21;
      
      var chartHeight = 350;
      
      var color = d3.scale.ordinal()
      .domain(d3.range(countries.length))
      .range([
        "#7C938D",
        "#544C36",
        "#BB976E",
        "#A4B284"
      ])

var xaxis = svg.selectAll("g.date")
      .data(data)
      .enter()
      .append("g").classed("date", 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.date })
        .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