Three Common Types of Capital Wealth: 1770–1810

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

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js