chapter_16/01_initial_chart.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: All vehicles</title>
		<script type="text/javascript" src="../d3.js"></script>
		<style type="text/css">

			h1 {
				font-family: Helvetica, sans-serif;
				font-size: 14px;
				font-weight: bold;
			}

			.area {
				stroke: none;
			}

			.area:hover {
				fill: yellow;
			}

		</style>
	</head>
	<body>
		<h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S.: January 2005&ndash;February 2017</h1>
		<script type="text/javascript">

			//Width and height
			var w = 800;
			var h = 500;
			var padding = 20;
			
			var dataset, xScale, yScale, xAxis, yAxis, area;  //Empty, for now

			//For converting strings to Dates
			var parseTime = d3.timeParse("%Y-%m");

			//For converting Dates to strings
			var formatTime = d3.timeFormat("%b %Y");

			//Set up stack method
			var stack = d3.stack()
						  .order(d3.stackOrderDescending);  // <-- Flipped stacking order

			//Load in data
			d3.request("vehicle_sales_data.csv")
				.mimeType("text/csv")
				.get(function(response) {


					//
					// DATA PARSING
					//

					//Parse each row of the CSV into an array of string values
					var rows = d3.csvParseRows(response.responseText);
					// console.log(rows);
					
					//Make dataset an empty array, so we can start adding values
					dataset = [];
					
					//Loop once for each row of the CSV, starting at row 3,
					//since rows 0-2 contain only vehicle info, not sales values.
					for (var i = 3; i < rows.length; i++) {
						
						//Create a new object
						dataset[i - 3] = {
							date: parseTime(rows[i][0])  //Make a new Date object for each year + month
						};
						
						//Loop once for each vehicle in this row (i.e., for this date)
						for (var j = 1; j < rows[i].length; j++) {
						
							var make		= rows[0][j];  //'Make' from 1st row in CSV
							var model		= rows[1][j];  //'Model' from 2nd row in CSV
							var makeModel	= rows[0][j] + " " + rows[1][j];  //'Make' + 'Model' will serve as our key
							var type 		= rows[2][j];  //'Type' from 3rd row in CSV
							var sales		= rows[i][j];  //Sales value for this vehicle and month
							
							//If sales value exists…
							if (sales) {
								sales = parseInt(sales);  //Convert from string to int
							} else {  //Otherwise…
								sales = 0;  //Set to zero
							}

							//Append a new object with data for this vehicle and month
							dataset[i - 3][makeModel] = {
								"make": make,
								"model": model,
								"type": type,
								"sales": sales
							};
							
						}

					}

					//Log out the final state of dataset
					// console.log(dataset);


					//
					// STACKING
					//

					//Now that we know the column names in the data,
					//get all the keys (make + model), but toss out 'date'
					var keys = Object.keys(dataset[0]).slice(1);
					// console.log(keys);
					
					//Tell stack function where to find the keys
					stack.keys(keys)
						.value(function value(d, key) {
							return d[key].sales;
						});

					//Stack the data and log it out
					var series = stack(dataset);
					// console.log(series);
					
					
					//
					// MAKE THE CHART
					//
				
					//Create scale functions
					xScale = d3.scaleTime()
							   .domain([
									d3.min(dataset, function(d) { return d.date; }),
									d3.max(dataset, function(d) { return d.date; })
								])
							   .range([padding, w - padding * 2]);
				
					yScale = d3.scaleLinear()
								.domain([
									0,
									d3.max(dataset, function(d) {
										var sum = 0;
			
										//Loops once for each row, to calculate
										//the total (sum) of sales of all vehicles
										for (var i = 0; i < keys.length; i++) {
											sum += d[keys[i]].sales;
										};
			
										return sum;
									})
								])
								.range([h - padding, padding / 2])
								.nice();
				
					//Define axes
					xAxis = d3.axisBottom()
							   .scale(xScale)
							   .ticks(10)
							   .tickFormat(formatTime);
				
					//Define Y axis
					yAxis = d3.axisRight()
							   .scale(yScale)
							   .ticks(5);
				
					//Define area generator
					area = d3.area()
								.x(function(d) { return xScale(d.data.date); })
								.y0(function(d) { return yScale(d[0]); })
								.y1(function(d) { return yScale(d[1]); });
				
					//Create SVG element
					var svg = d3.select("body")
								.append("svg")
								.attr("width", w)
								.attr("height", h);
				
					//Create areas
					svg.selectAll("path")
						.data(series)
						.enter()
						.append("path")
						.attr("class", "area")
						.attr("d", area)
						.attr("fill", function(d, i) {
							return d3.schemeCategory20[i];
						})
						.append("title")  //Make tooltip
						.text(function(d) {
							return d.key;
						});
				
					//Create axes
					svg.append("g")
						.attr("class", "axis x")
						.attr("transform", "translate(0," + (h - padding) + ")")
						.call(xAxis);
				
					svg.append("g")
						.attr("class", "axis y")
						.attr("transform", "translate(" + (w - padding * 2) + ",0)")
						.call(yAxis);


				});
			
		</script>
	</body>
</html>