The Migrant Files: Money by Route by enjalot

index.html

<!DOCTYPE html>
<head>
  
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    
 		function toNumber(s) {
      // convert strings with spaces instead of commas into numbers
      var n = s.replace(/[w]/g, "") //remove any whitespace
        .replace(/ /g, "") //utf8 space?
      return +n; //convert to number
    }
    function process(d) {
      var processed = {

        start: d.Start,
        end: d.End,
        year: +d.Year,
        // we just deal with the price in Euros adjusted for inflation
        price: toNumber(d["Price EUR 2014"]),
        service: d.Service,
        route: d.route,
        author: d.author,
        comment: d.Comment,
        source: d.Source,
      }
      return processed;
    }
    
    d3.csv("//enjalot.github.io/migrants/money.csv", function(err, rawdata) {
      //console.log("rawdata", rawdata);
      
      var data = rawdata.map(process);
      //console.log("data", data);
      
      //d3.select("#json").text(JSON.stringify(data, null, 2));
      
      // I want to see how many distinct routes there are
      var routes = d3.nest()
        .key(function(d) { return d.route })
        .rollup(function(leaves) {
          var totalPrice = 0;
          leaves.forEach(function(d,i) {
            totalPrice += d.price
          })
          //d3.sum(leaves, function(d) { return d.price });
          //console.log("leaves", leaves)
          return totalPrice;
        })
        .entries(data);

      //console.log("routes", routes);
      //console.table(routes.sort(function(a,b) { return b.values - a.values }));
      
      routes.sort(function(a,b) { return b.values - a.values });
      
      var maxPrice = d3.max(routes, function(d) {
        return d.values;
      })
      console.log("max price", maxPrice)
      
      var chartHeight = 300;
      var yscale = d3.scale.log()
      .domain([1, maxPrice])
      .range([0, chartHeight])
      
      var svg = d3.select("svg");
      
      var rects = svg.selectAll("rect").data(routes);
      rects.enter().append("rect")
      rects.attr({
        //width: 20,
        //height: function(d,i) { return yscale(d.values) },
        //x: function(d,i) { return 50 + 30 * i },
        //y: function(d,i) { return 50 + chartHeight - yscale(d.values) },
        height: 20,
        width: function(d,i) { return yscale(d.values) },
        y: function(d,i) { return 50 + 30 * i },
        x: function(d,i) { return 250 },
      })
      .on("click", function(d) { console.log(d) })
      .on("mouseover", function(d) {
        d3.select(this).style("fill", "red");
      })
      .on("mouseout", function(d) { 
        d3.select(this).style("fill", "black");
      })
      
      var labels = svg.selectAll("text.label").data(routes);
      labels.enter().append("text").classed("label", true)
      labels.attr({
        y: function(d,i) { return 12 + 50 + 30 * i },
        x: function(d,i) { return 240 },
        "text-anchor": "end",
        "alignment-baseline": "middle"
        
      }).text(function(d) { 
        if(!d.key) return "Unknown";
        return d.key 
      })
      
      // list of number formats 
      // //bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e
      var formatter = d3.format(",d");
      
      var prices = svg.selectAll("text.price").data(routes);
      prices.enter().append("text").classed("price", true)
      prices.attr({
        y: function(d,i) { return 12 + 50 + 30 * i },
        x: function(d,i) { return 255 + yscale(d.values)},
        fill: "#111",
        "alignment-baseline": "middle"
      }).text(function(d) { 
        return "€" + formatter(d.values)
      })
      
      
    });
  </script>
</body>