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("http://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> |
