Intermediate D3: Week 2

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.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;
			}

path:hover {
				fill: yellow;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
</head>
<body>
	<h1>Slave Trafficing Across the Atlantic</h1>

<p>Years 1501-1865. Source: <a href="https://slavevoyages.org/assessment/estimates">Voyages</a></p>
	<script>
	var w = 960,
		h = 500,
		padding = {top: 10, right: 10, bottom: 10, left: 50},
		catSeven = ["#889072",
			"#C0A69C",
			"#655D4E",
			"#B59575",
			"#907D76",
			"#93A198",
			"#B8B693"];

var dataSet = [
			{
				country: "spain",
				trades:[
							{x: 1641, y: 2239},
							{x: 1642, y: 889},
							{x: 1643, y: 889},
							{x: 1644, y: 889},
							{x: 1645, y: 889},
							{x: 1646, y: 889},
							{x: 1647, y: 889}
						]
			},
			{
				country: "portugal",
				trades: [
							{x: 1641, y: 6239},
							{x: 1642, y: 4000},
							{x: 1643, y: 4325},
							{x: 1644, y: 4179},
							{x: 1645, y: 4581},
							{x: 1646, y: 4000},
							{x: 1647, y: 4617}
						]
			},
			{
				country: "great britian",
				trades: [
							{x: 1641, y: 949},
							{x: 1642, y: 1722},
							{x: 1643, y: 0},
							{x: 1644, y: 5530},
							{x: 1645, y: 6115},
							{x: 1646, y: 9480},
							{x: 1647, y: 5854}
						]
			},
			{
				country: "netherlands",
				trades: [
							{x: 1641, y: 1935},
							{x: 1642, y: 3128},
							{x: 1643, y: 6203},
							{x: 1644, y: 6416},
							{x: 1645, y: 4551},
							{x: 1646, y: 1131},
							{x: 1647, y: 7}
						]
			},
			{
				country: "usa",
				trades: [
							{x: 1641, y: 0},
							{x: 1642, y: 0},
							{x: 1643, y: 0},
							{x: 1644, y: 0},
							{x: 1645, y: 371},
							{x: 1646, y: 0},
							{x: 1647, y: 0}
							]
			},
			{
				country: "france",
				trades: [
							{x: 1641, y: 0},
							{x: 1642, y: 0},
							{x: 1643, y: 366},
							{x: 1644, y: 566},
							{x: 1645, y: 0},
							{x: 1646, y: 628},
							{x: 1647, y: 267}
						]
			},
			{
				country: "denmark baltics",
				trades: [
							{x: 1641, y: 150},
							{x: 1642, y: 0},
							{x: 1643, y: 0},
							{x: 1644, y: 0},
							{x: 1645, y: 0},
							{x: 1646, y: 260},
							{x: 1647, y: 643}
						]
			}
		];

// Set up stack layout
	var stack = d3.layout.stack()
		.values(function(d) {
			return d.trade;
		});

// Set up scales
	var xScale = d3.scale.linear()
		.range([padding.left, w - padding.left]);

var yScale = d3.scale.linear()
		.range([padding.top, h - padding.top - padding.bottom]);

var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom")
		.ticks(15);

var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left")
		.ticks(5);

// Create area generator
	var area = d3.svg.area()
		.x(function(d, i) {
			return xScale(d.x);
		})
		.y0(function(d) {
			return yScale(d.y0);
		})
		.y1(function(d) {
			return yScale(d.y0 + d.y);
		});

// Set colors to a IWantHue series
	var	color = d3.scale.ordinal()
		.domain([0,1,2,3,4,5,6])
		.range(catSeven);

// Create svg element
	var svg = d3.select("body")
		.append("svg")
		.attr("width", w)
		.attr("height", h);

d3.csv("slavery.csv", function(data) {

var countries = [
			{
				country: "Denmark",
				trade: []
			},
			{
				country: "France",
				trade: []
			},
			{
				country: "Great Britian",
				trade: []
			},
			{
				country: "Netherlands",
				trade: []
			},
			{
				country:"Portugal",
				trade: []
			},
			{
				country: "Spain",
				trade: []
			},
			{
				country: "USA",
				trade: []
			}
		];

var years = [];
		for(var i = 1501; i < 1865; i++) {
			years.push(i);
		}

headers = ["great_britian", "france", "denmark_baltics", "usa", "netherlands", "protugal", "spain"];

for(var i = 0; i < countries.length; i++) {
			for(var j = 0; j < data.length; j++) {
				countries[i].trade.push(
					{
						x: +data[j].year,
						y: +data[j][headers[i]]
					});
			}
		}

// Remove NaN trades
		countries.forEach(function(country) {
			for( var trade in country.trade) {
				if(isNaN(country.trade[trade].y)) {
					country.trade[trade].y = 0;
				}
			}
		});

stack(countries);

xScale.domain([ d3.min(years),d3.max(years) ]);

//Loop once for each year, and get the total trades
		// that year
		var totals = [];

for (i = 0; i < years.length; i++) {
			totals[i] = 0;
			for (j = 0; j < countries.length; j++) {
				totals[i] += countries[j].trade[i].y;
				// console.log(countries[j].trade[i]);
			}
		}

yScale.domain([ d3.max(totals), 0 ]);

// Make a path for each country
		var paths = svg.selectAll("path")
			.data(countries)
			.enter()
			.append("path")
			.attr("class", "area")
			.attr("d", function(d) {
				return area(d.trade);
			})
			.attr("stroke", "none")
			.attr("fill", function(d, i) {
				return color(i);
			});

// Add groups from each row of data
		var groups = svg.selectAll("g")
			.data(countries)
			.enter()
			.append("g")
			.style("fill", function(d, i) {
				return color(i);
			});

// Append paths
		paths.append("title")
			.text(function(d) {
				return d.country;
			});

// Create axes
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0, " + (h - padding.bottom - padding.top) + ")")
			.call(xAxis);

svg.append("g")
			.attr("class", "y axis")
			.attr("transform", "translate(" + padding.left + ",0)")
			.call(yAxis);

});

</script>
</body>

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