Ch 16 initial example

pouyana · Apr 17, 2017 · 6217fef · 6217fef
1 parent 4bd46c6
commit 6217fef
Show file tree

Hide file tree

Showing 4 changed files with 311 additions and 273 deletions.
diff --git a/chapter_16/01_initial_chart.html b/chapter_16/01_initial_chart.html
@@ -0,0 +1,212 @@
+<!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;Feburary 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")
+						.attr("transform", "translate(0," + (h - padding) + ")")
+						.call(xAxis);
+
+					svg.append("g")
+						.attr("class", "axis")
+						.attr("transform", "translate(" + (w - padding * 2) + ",0)")
+						.call(yAxis);
+
+
+
+				});
+
+		</script>
+	</body>
+</html>
diff --git a/chapter_16/01_stacked_area.html b/chapter_16/01_stacked_area.html