D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
asifsalam
Full window
Github gist
Aid Spending by Country
<!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; line-height: normal; } rect { fill: #03cbbe; } #main { width: 910: } .aid { width: 450; height: 500; float:left; } .noaid { width: 450; height: 500; } </style> </head> <body> <div id="main"> <div class="aid" width=450, height = 500><p>36 countries that spend on aid</p></div> <div class="noaid" width=450 height=2000><p> <br> And the countries that don't (AidData.org, 2010, USD)</p></div> </div> <script type="text/javascript"> bar_height = 15; num_countries = 192; aid_countries = 36; //Two SVGs, one for those that spend on aid, and one for those that don't var svg1 = d3.select(".aid") .append("svg") .attr("width", 405) .attr("height", aid_countries*bar_height+20); var svg2 = d3.select(".noaid") .append("svg") .attr("width",405) .attr("height",156*bar_height+20); //Load in contents of CSV file d3.csv("ElemOfNationalPower_2010.csv", function(data) { //Log 'data' to the console, for verification. console.log(data); //Sort based on aid spending data.sort(function(a, b) { return d3.descending(+a.Aid_MUSD, +b.Aid_MUSD); }); //One data set for those countries that provide aid data1 = data.slice(0,aid_countries); //One data set for those that do not data2 = data.slice(36,num_countries); //Sort this one alphabetically data2.sort(function(a,b) { return d3.ascending(a.Country_Name, b.Country_Name); }); //console.log(data1); //console.log(data2); //Create the bars var rects1 = svg1.selectAll("rect") .data(data1) .enter() .append("rect"); rects1.attr("x", 105) .attr("y", function(d, i) { return 20 + i * bar_height; }) .attr("width", function(d) { return +d.Aid_MUSD * 300/35000 ; }) .attr("height", bar_height-2) .append("title") .text(function(d) { return d.Country_Name + "'s aid spending is " + d.Aid_MUSD + " million USD"; }); //Add the country names var countries1 = svg1.selectAll("text") .data(data1) .enter() .append("text"); countries1.attr("x", 100) .attr("y", function(d,i) { return 20 + i * bar_height + 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}); // Add axis [BUSD] svg1.append("text") .attr("y",15) .attr("x",105+15*300/35) .attr("font-size","10px") .attr("text-anchor","middle") .text("15B") svg1.append("text") .attr("y",15) .attr("x",105+30*300/35) .attr("font-size","10px") .attr("text-anchor","middle") .text("30B") //Some grid lines svg1.append("line") .attr("x1",105+15*300/35) .attr("y1",20) .attr("x2",105+15*300/35) .attr("y2",aid_countries*bar_height+20) .attr("stroke","#fffefe") .attr("stroke-width",1); svg1.append("line") .attr("x1",105+30*300/35) .attr("y1",20) .attr("x2",105+30*300/35) .attr("y2",aid_countries*bar_height+20) .attr("stroke","#fffefe") .attr("stroke-width",1); //Just can get the SVGs to align. Hide the misalignment svg1.append("line") .attr("x1",0) .attr("y1",1) .attr("x2",405) .attr("y2",1) .attr("stroke","#ffffff") .attr("stroke-width",3); //Add country names to the other SVG var countries2 = svg2.selectAll("text") .data(data2) .enter() .append("text"); countries2.attr("x", 125) .attr("y", function(d,i) { return 18 + i * bar_height + 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}); //Add the scale as well svg2.append("text") .attr("y",15) .attr("x",105+15*300/35) .attr("font-size","10px") .attr("text-anchor","middle") .text("15B") svg2.append("text") .attr("y",15) .attr("x",105+30*300/35) .attr("font-size","10px") .attr("text-anchor","middle") .text("30B") svg2.append("line") .attr("x1",105+15*300/35) .attr("y1",20) .attr("x2",105+15*300/35) .attr("y2",156*bar_height+20) .attr("stroke","#fffefe") .attr("stroke-width",1); svg2.append("line") .attr("x1",105+30*300/35) .attr("y1",20) .attr("x2",105+30*300/35) .attr("y2",156*bar_height+20) .attr("stroke","#fffefe") .attr("stroke-width",1); //Can't separate the SVGs either. Add a line to separate the two graphs svg2.append("line") .attr("x1",0) .attr("y1",0) .attr("x2",0) .attr("y2",156*bar_height+20) .attr("stroke","#434343") .attr("stroke-width","3"); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js