Demo loading The Migrant 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 by Route
| <!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); | |
| //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 | |
| // http://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> |
