D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
asifsalam
Full window
Github gist
Aid Spending By Country (2010)
<!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: 20px; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0px 0px 10px; } svg { background-color: #f7efea; line-height: normal; } rect { fill: #03cbbe; } rect:hover { fill: orange; } #main { width: 910: } .aid { width: 450; height: 500; float:left; } .noaid { width: 450; height: 500; float:right; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .x.axis text { font-family: sans-serif; font-size: 10px; opacity: 0; } .y.axis text { font-family: sans-serif; font-size: 10px; opacity: 0.75; } .y.axis path, .y.axis line { opacity: 0; } .x.axis path, .x.axis line { opacity: 0; } div { width: 500; height: 2500; float:left; } </style> </head> <body> <div id="main"> <div class="aid" height = 500><p>36 countries that spend on aid (BUSD)</p><p></p></div> <div class="noaid" height=2000><p>And the countries that don't (<a href="https://data.itpir.wm.edu/aiddatascratch/aiddata/researchrelease/aiddata2_1_since_1996_csv.zip">AidData.org</a>, 2010)</p><p></p></div> </div> <script type="text/javascript"> width = 250; padding = [125,30,20,10] widthScale = d3.scale.linear().domain([0,35]) .range([0,width - padding[2]]); bar_height = 15; num_countries = 192; aid_countries = 36; noaid_countries = num_countries - aid_countries; scaling = 1000; var countries_aid; //Two SVGs, one for those that spend on aid, and one for those that don't var svgA = d3.select(".aid") .append("svg") .attr("width", width+padding[0] + padding[2]) .attr("height", aid_countries*bar_height+padding[1]+padding[3]); //Countries that don't spend on Aid var svgN = d3.select(".noaid") .append("svg") .attr("width",width+padding[0] + padding[2]) .attr("height",noaid_countries*bar_height+padding[1]+padding[3]); xAxis = d3.svg.axis() .scale(widthScale) .orient("top") .tickValues([0,15,30]); //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 dataA = data.slice(0,aid_countries); heightA = dataA.length*bar_height + padding[1] + padding[3]; heightScaleA = d3.scale.ordinal() .rangeRoundBands([padding[1],heightA - padding[3]],0.1,0); //HeightScaleA.domain(d3.range(dataA.length)); heightScaleA.domain(dataA.map(function(d) { return d.Country_Name; } )); //One data set for those that do not dataN = data.slice(36,num_countries); heightN = dataN.length*bar_height + padding[1] + padding[3]; heightScaleN = d3.scale.ordinal() .rangeRoundBands([padding[1], heightN - padding[3]],0.1,0); heightScaleN.domain(dataN.map(function(d) {return d.Country_Name;} )); svgN.append("rect") .attr("height",heightN) .attr("width",width + padding[0] + padding[2]) .attr("x",0) .attr("y",0) .attr("fill-opacity",0) .attr("stroke","grey"); //Sort this one alphabetically dataN.sort(function(a,b) { return d3.ascending(a.Country_Name, b.Country_Name); }); //console.log(dataA); //console.log(dataN); //Create the bars var rectsAid = svgA.selectAll("rect") .data(dataA) .enter() .append("rect"); rectsAid.attr("x", padding[0]) .attr("y", function(d, i) { return heightScaleA(d.Country_Name); }) .attr("width", function(d) { return widthScale(+d.Aid_MUSD/scaling); }) .attr("height", heightScaleA.rangeBand()) .append("title") .text(function(d) { return d.Country_Name + "'s aid spending is " + d.Aid_MUSD + " million USD"; }); svgA.append("g") .attr("class", "x axis") .attr("transform","translate(" + padding[0] + "," + padding[1]+")") .call(xAxis); var yAxisAid = d3.svg.axis() .scale(heightScaleA) .orient("left"); svgA.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[0]) + ",0)") .call(yAxisAid); // Add axis [BUSD] svgA.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(0)) .attr("font-size","12px") .attr("text-anchor","middle") .text("0") svgA.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(15)) .attr("font-size","12px") .attr("text-anchor","middle") .text("15") svgA.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(30)) .attr("font-size","12px") .attr("text-anchor","middle") .text("30") svgA.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(35)) .attr("font-size","12px") .attr("text-anchor","middle") .text("BUSD") //Some grid lines svgA.append("line") .attr("x1",padding[0] + widthScale(15)) .attr("y1",padding[1]) .attr("x2",padding[0] + widthScale(15)) .attr("y2",heightA) .attr("stroke","#e3e3e3") .attr("stroke-width",1); svgA.append("line") .attr("x1",padding[0] + widthScale(30)) .attr("y1",padding[1]) .attr("x2",padding[0] + widthScale(30)) .attr("y2",heightA) .attr("stroke","#e3e3e3") .attr("stroke-width",1); svgA.append("line") .attr("x1",padding[0] + widthScale(0)) .attr("y1",padding[1]) .attr("x2",padding[0] + widthScale(0)) .attr("y2",heightA) .attr("stroke","#e3e3e3") .attr("stroke-width",1); svgA.append("rect") .attr("height",heightA) .attr("width",width + padding[0] + padding[2]) .attr("x",0) .attr("y",0) .attr("fill-opacity",0) .attr("stroke","grey"); /*-------Second SVG------------------------------------------*/ // Add axis [BUSD] svgN.append("g") .attr("class", "x axis") .attr("transform","translate(" + padding[0] + "," + padding[1]+")") .call(xAxis); var yAxisNoAid = d3.svg.axis() .scale(heightScaleN) .orient("left"); svgN.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[0]) + ",0)") .call(yAxisNoAid); svgN.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(0)) .attr("font-size","12px") .attr("text-anchor","middle") .text("0") svgN.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(15)) .attr("font-size","12px") .attr("text-anchor","middle") .text("15") svgN.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(30)) .attr("font-size","12px") .attr("text-anchor","middle") .text("30") svgN.append("text") .attr("y",25) .attr("x",padding[0] + widthScale(35)) .attr("font-size","12px") .attr("text-anchor","middle") .text("BUSD") //Some grid lines svgN.append("line") .attr("x1",padding[0] + widthScale(0)) .attr("y1",padding[1]) .attr("x2",padding[0] + widthScale(0)) .attr("y2",heightN) .attr("stroke","#e3e3e3") .attr("stroke-width",1); svgN.append("line") .attr("x1",padding[0] + widthScale(15)) .attr("y1",padding[1]) .attr("x2",padding[0] + widthScale(15)) .attr("y2",heightN) .attr("stroke","#e3e3e3") .attr("stroke-width",1); svgN.append("line") .attr("x1",padding[0] + widthScale(30)) .attr("y1",padding[1]) .attr("x2",padding[0] + widthScale(30)) .attr("y2",heightN) .attr("stroke","#e3e3e3") .attr("stroke-width",1); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js