D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lmelgar
Full window
Github gist
"Week 3: Cleaned data file"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>UN Refugees by Origin since 1990</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> </head> <body> <h1>UN Refugees by Origin since 1990</h1> <script type="text/javascript"> //Load in contents of CSV file, and do things to the data. var total1990 = 0; var total2000 = 0; var total2010 = 0; var total2013 = 0; var total = 0; var body = d3.select("body"); d3.csv("UN_RefugeesByOrigin_1990-2013.csv", function(error, d) { if (error) { console.log("Had an error loading file."); } d.forEach(function(d, i) { d.year1990 = +d.year1990; d.year2000 = +d.year2000; d.year2010 = +d.year2010; d.year2013 = +d.year2013; total1990 = total1990 + d.year1990; total2000 = total2000 + d.year2000; total2010 = total2010 + d.year2010; total2013 = total2013 + d.year2013; total = total1990 + total2000 + total2010 + total2013; d.acc = d.year1990 + d.year2000 + d.year2010 + d.year2013; d.difference = d.year2013 - d.year2010; /*console.log("1990: ", total1990); console.log("2000: ", total2000); console.log("2010: ", total2010); console.log("2013: ", total2013); console.log("total: ", total); console.log(d.acc)*/ }); d.sort(function (a, b) { return b.acc - a.acc; }); console.log("sorted", d); /*d.forEach(function (d) { body.append("p").text(d.country + ", " + d.acc); });*/ d3.select("body") .data(d) .enter() .append("p") .text(function(d, i) { return "Country: " + d.country + ", total: " + d.acc + ". Year 1990: " + d.year1990 + ". Year 2000: " + d.year2000 + ". Year 2010: " + d.year2010 + ". Year 2013: " + d.year2013 + ". Difference from 2013 to 2010: " + d.difference; }); }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js