D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
asifsalam
Full window
Github gist
Ranking the 36 countries that spend on aid (2010, MUSD, AidData.org)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Aid Spending</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: #ffffff; font-family: Helvetica, Arial, sans-serif; padding: 50px; } svg { background-color: #f7efea; } rect { fill: #03cbbe; } </style> </head> <body> <p>36 countries that spend on aid (2010, MUSD, AidData.org).</p> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 905) .attr("height", 600); //Load in contents of CSV file d3.csv("ElemOfNationalPower_2010.csv", function(data) { //Log 'data' to the console, for verification. //console.log(data); data.sort(function(a, b) { return d3.descending(+a.Aid_MUSD, +b.Aid_MUSD); }); data = data.slice(0,36); console.log(data); var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x", 105) .attr("y", function(d, i) { return i * 15; }) .attr("width", function(d) { return +d.Aid_MUSD * 800/35000 ; }) .attr("height", 13) .append("title") .text(function(d) { return d.Country_Name + "'s aid spending is " + d.Aid_MUSD + " million USD"; }); var countries = svg.selectAll("text") .data(data) .enter() .append("text"); countries.attr("x", 100) .attr("y", function(d,i) { return i * 15 + 11; }) .attr("fill", "black") .attr("font-size", "10px") .attr("font-weight", "normal") .attr("font-family", "sans-serif") .attr("text-anchor", "end") .text(function(d) { return d.Country_Name}); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js