Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

The Migrant Files: Money Bars

A simple bar chart with d3.nest

Demo loading The Migrants Files data hosted via https://github.com/enjalot/migrants

Built with blockbuilder.org

forked from enjalot's block: The Migrant Files: Deaths

forked from enjalot's block: The Migrant Files: Deportations

forked from enjalot's block: The Migrant Files: Money

<!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("https://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) {
          var sum = 0;
          leaves.forEach(function(d) {
            sum += d.price;
          })
          return sum
        })
        .entries(data);

console.log("routes");
      routes.sort(function(a,b) { return b.values - a.values })
      //console.table(routes.sort(function(a,b) { return b.values - a.values }));

var max = d3.max(routes, function(d) {
        return d.values;
      });
      var xscale = d3.scale.log()
      .domain([0.1, max])
      .range([0, 600])
     
      var svg = d3.select("svg");
      
      var rects = svg.selectAll("rect.route")
        .data(routes)
      rects.enter().append("rect").classed("route", true)
      rects.attr({
        x: 200,
        y: function(d,i) { return 100 + i * 25},
        width: function(d,i) { return xscale(d.values) },
        height: 20
      }).on("click", function(d,i) {
        console.log(i,d);
      })
      .on("mouseover", function(d,i) {
        d3.select(this).attr("fill", "red")
      })
      .on("mouseout", function(d,i) {
        d3.select(this).attr("fill", "black")
      })
      
      var labels = svg.selectAll("text.label")
        .data(routes)
      labels.enter().append("text").classed("label", true)
      labels.attr({
        x: 195,
        y: function(d,i) { return 112 + i * 25},
        "text-anchor": "end",
        "alignment-baseline": "middle"
      }).text(function(d) { return d.key || "N/A" })
      
      var formatter = d3.format(",d");
      var money = svg.selectAll("text.money")
        .data(routes)
      money.enter().append("text").classed("money", true)
      money.attr({
        x: function(d,i) { return 205 + xscale(d.values)},
        y: function(d,i) { return 112 + i * 25},
        "text-anchor": "start",
        "alignment-baseline": "middle"
      }).text(function(d) { return "€" + formatter(d.values) || "N/A" })
      
      
      
    });
  </script>
</body>

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