Wealth & Health Cities in Java Island 2011

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.

<!DOCTYPE html>
<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> -->

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