D3 Examples - Three Common Types of Capital Wealth: 1770

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <title>Capital</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: white);
            font-family: Helvetica, Arial, sans-serif;
        }
​
        #container {
            width: 850px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
            padding: 50px 0px 50px 100px;
            background-color: white;
            box-shadow: 2px 2px 7px 3px #E5E5E5;
        }
​
        #chart {
            opacity: 1;
        }
​
        .legend {
            opacity: 0;
        }
​
        h1 {
            font-size: 26px;
            margin: 0;
        }
​
        p {
            font-size: 14px;
            font-style: italic;
            margin: 5px 0 0 0;
        }
​
        p.title {
            font-size: 14px;
            margin: 5px 0 10px 0;
        }
​
        svg {
            background-color: white;
        }
​
        rect:hover {
            opacity: .7;
        }
​
        rect.title {
            stoke: black;
        }
​
        .legend text {
            font-size: 14px;
        }
​
        .axis path {
            fill: none;
        }
​
        .axis line {
            stroke: black;
            stroke-width: 1;
            shape-rendering: crispEdges;
        }
​
        .axis text {
            font-family: Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 600;
        }
​
        .x.axis path,
        .x.axis line {
            opacity: 0;
        }
    </style>
​
</head>
​
<body>
    <div id="container">
        <h1>Three Common Types of Capital Wealth: 1770–1810</h1>
        <p class="title">Capital Wealth as a percentage of each country's annual national income</p>
        <br>
        <div id="chart"></div>
        <p>
            <strong>Source:</strong> <a href="https://piketty.pse.ens.fr/en/capital21c2"><i>Capital in the 21st century</i></a></p>
    </div>
​
    <script type="text/javascript">
        //Width and height
        var margin = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 20
        };
        var w = 800;
        var h = 500;
        var padding = [0, 10, 70, 30]; //Top, right, bottom, left
​
​
​
        var color = d3.scale.ordinal()
            .range(["lightgray", "gray", "red"]);
​
        //Create SVG element
        var svg = d3.select("#chart")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom);
​
        d3.csv("capitaloldvsnewworld.csv", function(data) {
            var headers = ["agriculturalLand", "housing", "slaves"]
            var labels = ["Agricultural Land", "Housing", "Slaves"]
            var stack = d3.layout.stack()
                (headers.map(function(capitalType) {
                    return data.map(function(d) {
                        return {
                            x: d.countryName,
                            y: +d[capitalType]
                        };
                    });
                }));
​
​
            var xScale = d3.scale.ordinal()
                .domain(stack[0].map(function(d) {
                    return d.x;
                }))
                .rangeRoundBands([0 + padding[3], w], 0.3);
​
            var yScale = d3.scale.linear()
                .domain([0,
                    d3.max(stack, function(d) {
                        return d3.max(d, function(d) {
                            return d.y0 + d.y;
                        });
                    })
                ])
                .range([h, 0]);
​
            // Add a group for each row of data
            var groups = svg.selectAll("g")
                .data(stack)
                .enter()
                .append("g")
                .style("fill", function(d, i) {
                    return color(i);
                });
​
​
            //console.log(data);
​
            // Add a rect for each data value
            var rects = groups.selectAll("rect")
                .data(function(d) {
                    return d;
                })
                .enter()
                .append("rect")
                .attr("x", function(d) {
                    return xScale(d.x);
                })
                .attr("width", xScale.rangeBand())
                .attr("y", function(d) {
                    return yScale(d.y0 + d.y);
                })
                .attr("height", function(d) {
                    return yScale(d.y0) - yScale(d.y + d.y0);
                })
                .append("title").text(function(d, i) {
                    return d.y + "% of annual national wealth";
                });
​
​
​
            d3.select("#chart").transition()
                .delay(50)
                .duration(2000)
                .styleTween("opacity", function() {
                    return d3.interpolate("0", "1");
                });
​
​
​
​
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");
​
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + h + ")")
                .call(xAxis);
​
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .tickSize(-10)
                .tickValues([0, 100, 200, 300, 400, 500, 600, 700, 800]);
​
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding[3] + ",0)")
                .call(yAxis);
​
            var legend = svg.selectAll(".legend")
                .data(color.domain().slice().reverse())
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function(d, i) {
                    return "translate(-50," + i * 20 + ")";
                });
​
            legend.append("rect")
                .attr("x", w / 2 + 230)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", color);
​
            legend.selectAll("text .legend").data([labels.slice().reverse()])
                .enter().append("text")
                .attr("x", w / 2 + 250)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "begin")
                .text(function(d, i, j) {
                    return d[j];
                });
​
            legend.transition()
                .delay(1000)
                .duration(2000)
                .styleTween("opacity", function() {
                    return d3.interpolate("0", "1");
                });
​
​
            //NOT WORKING
            //Change color of United States (South) and United States (North)
            rects.filter(function(d) {
                    if (d.countryName == "United States (North)" ||
                        d.countryName == "United States (South)") {
                        return true;
                    } else {
                        return false;
                    }
                })
                .attr("fill", "gainsboro");
​
        });
    </script>
</body>
​
</html>
​
    