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
| <!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("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) { | |
| //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> |
