This dataset comes from INDO-DAPOER (Indonesia Database for Policy and Economic Research). We gathered 3 indicators, i.e., Household per Capita Expenditure, Morbidity Rate and Total Population over a 6-year period (2006-2011). We would like to observe the progress in people spending money versus their welfare. The ideal condition should be they spend more and rarely get sick over the time, which indicates they are getting wealthy and healthy.
This is an exercise to replicate Gap Minder: Wealth and Health Nations showcase. We used the only available indicators to mimic the showcase. We use regencies and cities in Indonesia rather than the world's nations to observe the trend.
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3 with SVG Elements and CSV Load</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } rect:hover { fill: orange; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axis label { font-size: 11px; } .x.axis path { display: none; } .line { fill: none; stroke: orange; stroke-width: 1.5px; } </style> </head> <body> <!-- <h1>Wealthy and Healthy Cities Index 2011</h1> <p>Household per Capita Expenditure and Morbidity Rate by cities in Indonesia. Source: <a href="https://data.worldbank.org/data-catalog/indonesia-database-for-policy-and-economic-research">INDO-DAPOER</a>, 2014</p> --> <script type="text/javascript"> var margin = {top: 30, right: 40, bottom: 90, left: 100}, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y1 = d3.scale.linear() .range([height, 0]); var y2 = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var y1Axis = d3.svg.axis() .scale(y1) .orient("left"); var y2Axis = d3.svg.axis() .scale(y2) .orient("right"); var line = d3.svg.line() .x(function(d) { return x(d.RegionName) + 10; }) .y(function(d) { return y2(d.MorbidityRate); }); var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Load in contents of CSV file d3.csv("household-expenditure-and-morbidity-rate-2006-2011.csv", function(data) { // Filter the data (sampling) var data2011 = data.filter(function(d) { return d.Year == '2011' && d.RegionType == 'City' && (d.ProvinceName == 'Jawa Barat' || d.ProvinceName == 'Banten' || d.ProvinceName == 'Jakarta' || d.ProvinceName == 'Jawa Tengah' || d.ProvinceName == 'Yogyakarta' || d.ProvinceName == 'Jawa Timur') }); // Sort the data data2011.sort(function(a, b) { return d3.descending(+a.HouseholdPerCapitaExpenditure, +b.HouseholdPerCapitaExpenditure) }); x.domain(data2011.map(function(d) { return d.RegionName })); y1.domain([0, d3.max(data2011, function(d) { return +d.HouseholdPerCapitaExpenditure; }) + 600000]) y2.domain([0, d3.max(data2011, function(d) { return +d.MorbidityRate; })]) // Add the x-axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + 0 + "," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", function(d) { return "rotate(-65)"; }); // Add the y1-axis svg.append("g") .attr("class", "y axis") .call(y1Axis); // Add the y2-axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + width + "," + 0 + ")") .call(y2Axis); // Add a y1-axis label. svg.append("text") .attr("class", "y axis label") .attr("text-anchor", "end") .attr("y", 6) .attr("dy", "-6.75em") .attr("transform", "rotate(-90)") .text("Household per Capita Expenditure"); // Add a y2-axis label. svg.append("text") .attr("class", "y axis label") .attr("text-anchor", "end") .attr("y", 6) .attr("dy", width + 30) .attr("transform", "rotate(-90)") .text("Morbidity Rate"); // Add bar chart svg.selectAll(".bar") .data(data2011) .enter().append("rect") .attr("class", "bar") .attr("fill", "steelblue") .attr("x", function(d) { return x(d.RegionName); }) .attr("y", function(d) { return y1(d.HouseholdPerCapitaExpenditure); }) .attr("height", function(d) { return height - y1(d.HouseholdPerCapitaExpenditure); }) .attr("width", x.rangeBand()); // Add line chart svg.append("path") .attr("class", "line") .attr("d", line(data2011)); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js