xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Exercise Module 4</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { font-family: "nyt-cheltenham",georgia,Lucida sans, "times new roman",times,serif; background-color: #CCCC8F; padding: 50px; max-width: 1000px; } h1 { font-size: 28px; border-top: solid 8px #807166; border-bottom: solid 8px #807166; } p { font-size: 14px; line-height: 18px; padding: 30px; border-top: solid 2px #222222; } svg { background-color: white; } rect.bars { stroke: #222222; stroke-width: 2; stroke-opacity: 1; fill-opacity: 0.8; } rect:hover { fill: #E1C600; } text.gtitle { text-anchor: middle ; } text.label { text-anchor: middle ; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: georgia,Lucida sans, "times new roman",times,serif; font-size: 14px; } .y.axis path, .y.axis line { opacity: 0; } .y.axis text { text-anchor: middle ; } </style> </head> <body> <h1> GDP per capita vs. top 1%'s share of income </h1> <p> This simple bar chart shows side by side the GDP per capita <em>(left)</em> and the share of income detained by the top1% <em>(right)</em> in a selection of countries. Hover over the bar to get information about the country and measures. </p> <script type="text/javascript"> var wid=700, hei=400, pad=40, middle=150 ; var just=50, extrapad=40 ; // scales and axes var scaleGDP = d3.scale.linear().range([0,wid/2]) ; var scaleGDPneg = d3.scale.linear().range([-1*wid/2,0]) ; var scaletop1 = d3.scale.linear().range([0,wid/2]) ; var yscale = d3.scale.ordinal() .rangeBands([0,hei]) ; var xleft = d3.svg.axis() .scale(scaleGDPneg) // .scale(scaleGDP) .orient("bottom"); var xright = d3.svg.axis() .scale(scaletop1) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yscale) .orient("right"); // formats var dollsformat = d3.format("$,.0f") ; // graphic elements var svg = d3.select("body") .append("svg") .attr("width", wid+2*pad+middle) .attr("height", hei+2*pad); var gleft = svg.append("g") .attr("transform","translate("+pad+","+pad+")") ; var gright = svg.append("g") .attr("transform","translate("+(pad+wid/2+middle)+","+pad+")") ; var ylabel; d3.csv("econdata2010.csv",function(data) { // sorting of data according to GDP per capita data.sort(function(a,b){ return d3.descending(a.GDPcapita,b.GDPcapita); }) // setting scale domains scaleGDP.domain([0, d3.max(data,function(d){return +d.GDPcapita})]); scaleGDPneg.domain([d3.max(data,function(d){return +d.GDPcapita}),0]); scaletop1.domain([0, d3.max(data,function(d){return +d.top1})]); xleft.tickValues([0, 10000, 20000, 30000, 40000]); // yscale.domain(d3.range(data.length)) ; yscale.domain(data.map(function(d) { return d.Country; } )); // on left panel: bar chart for GDP per capita var leftrects = gleft.selectAll("rect") .data(data) .enter() .append("rect"); leftrects.attr("class","bars") .attr("x",function(d,i){ return wid/2-scaleGDP(+d.GDPcapita); }) .attr("y",function(d,i){ return yscale(d.Country); }) .attr("height",0.8*yscale.rangeBand()) .attr("width",function(d,i){ return scaleGDP(+d.GDPcapita); }) .attr("rx",5).attr("ry",5) .attr("fill","#567345") .append("title") .text(function(d){ return d.Country+"'s GDP per capita: "+dollsformat(d.GDPcapita)}); // on right panel: bar chart for top 1% share of income var rightrects = gright.selectAll("rect") .data(data) .enter() .append("rect"); rightrects.attr("class","bars") .attr("x",0) .attr("y",function(d,i){ return yscale(d.Country); }) .attr("height",0.8*yscale.rangeBand()) .attr("width",function(d,i){ return scaletop1(+d.top1); }) .attr("rx",5).attr("ry",5) .attr("fill","#567345") .append("title") .text(function(d){ return "Share of income by top 1%: "+d.top1}); // adding axes svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + (pad+wid/2) + "," + (hei + pad) + ")") .call(xleft); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + (pad+middle+wid/2) + "," + (hei + pad) + ")") .call(xright); // svg.append("g") // .attr("class", "y axis") // .attr("transform", "translate(" + (pad+wid/2+middle/2-just) + "," + (pad) + ")") // .call(yAxis); ylabel = svg.selectAll(".label") .data(data) .enter() .append("text") .attr("class","label"); ylabel.attr("x",(pad+wid/2+middle/2)) .attr("y",function(d){ return pad+0.4*yscale.rangeBand()+yscale(d.Country); }) .text(function(d){ return d.Country; }); svg.append("text").attr("class","gtitle") .attr("x",(pad+wid/4)) .attr("y",pad/2) .text("GDP per capita (in $)") ; svg.append("text").attr("class","gtitle") .attr("x",(pad+3*wid/4+middle)) .attr("y",pad/2) .text("Top 1%'s share of income (in %)") ; }) </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js