The Migrant Files: Money (metis session) 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; }
   
    #info {
      position: absolute;
      right: 0;
      top: 40px;
      border: 1px solid black;
      min-width: 100px;
      min-height: 50px;
      
        
    }
  </style>
</head>

<body>
  <svg id="chart"></svg>
  
  <div id="info"></div>
  
  <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);
      // I want to see how many distinct routes there are
      var routes = d3.nest()
        .key(function(d) { return d.route })
        .rollup(function(leaves) { 
          //return leaves.length
          return {
            price: d3.sum(leaves, function(d) { return d.price }),
            rows: leaves
          }
        })
        .entries(data);

      console.log("routes", routes);
      //console.table(routes.sort(function(a,b) { return b.values - a.values }));
       
      
      var svg = d3.select("#chart");
      
      var width = 960;
      var height = 500;
      
      var maxPrice = d3.max(routes, function(d) {
        return d.values.price
      })

      var widthScale = d3.scale.log()
        .domain([1, maxPrice])
        .range([0, 900])
      
      svg.style({
        width: width,
        height: height
      })
      
      var sorted = routes.concat([]).sort(function(a,b) {
        return b.values.price - a.values.price
      })
      
      var bars = svg.selectAll("rect.bar")
        .data(sorted)
      
      bars.enter().append("rect")
        .classed("bar", true)

      bars.attr({
        x: 50,
        y: function(d,i) {
          var y = 50 + i * 30;
          return y;
        },
        width: function(d,i) {
          return widthScale(d.values.price);
        },
        height: 20
      })
      .on("click", function(d,i) {
        console.log(i, d, widthScale(d.values))
      })
      .on("mouseover", function(d) {
        d3.select(this).style("fill", "red")
        
        var info = d3.select("#info")
        info.append("h1").text(d.key)
        info.selectAll("div")
          .data(d.values.rows)
        	.enter().append("div")
        	.text(function(d) { return d.start + " " + d.end + ": " + d.service})
        	.style({float: "left", clear: "left"})
        
        
      })
      .on("mouseout", function(d) {
        d3.select(this).style("fill", "black")
				d3.select("#info").selectAll("*").remove();
      })
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    });
  </script>
</body>