qhfgva · September 6, 2017 22:24
diff --git a/areachart.html b/areachart.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>D3: Stacked area chart</title>
 	        <script src="https://d3js.org/d3.v4.min.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 Vehicles Sold in the U.S.: December 2010&ndash;June 2013</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");

 			//Function for converting CSV values from strings to Dates and numbers
 			//We assume one column named 'Date' plus several others that will be converted to ints 
 			var rowConverter = function(d, i, cols) {

 				//Initial 'row' object includes only date
 				var row = {
 					date: parseTime(d.Date),  //Make a new Date object for each year + month
 				};

 				//Loop once for each vehicle type
 				for (var i = 1; i < cols.length; i++) {
 					var col = cols[i];

 					//If the value exists…
 					if (d[cols[i]]) {
 						row[cols[i]] = +d[cols[i]];  //Convert from string to int
 					} else {  //Otherwise…
 						row[cols[i]] = 0;  //Set to zero
 					}
 				}

 				return row;
 			}

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

 			//Load in data
 			d3.csv("data.csv", rowConverter, function(data) {

 				var dataset = data;
 				// console.log(dataset);	

 				//Now that we know the column names in the data…
 				var keys = dataset.columns;
 				keys.shift();  //Remove first column name ('Date')
 				stack.keys(keys);  //Stack using what's left (the car names)

 				//Data, stacked
 				var series = stack(dataset);
 				// console.log(series);

 				//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]];
 										};

 										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/data.csv b/data.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3: Stacked area chart</title>
	<script src="https://d3js.org/d3.v4.min.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 Vehicles Sold in the U.S.: December 2010–June 2013</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");

	//Function for converting CSV values from strings to Dates and numbers
	//We assume one column named 'Date' plus several others that will be converted to ints
	var rowConverter = function(d, i, cols) {

	//Initial 'row' object includes only date
	var row = {
	date: parseTime(d.Date), //Make a new Date object for each year + month
	};

	//Loop once for each vehicle type
	for (var i = 1; i < cols.length; i++) {
	var col = cols[i];

	//If the value exists…
	if (d[cols[i]]) {
	row[cols[i]] = +d[cols[i]]; //Convert from string to int
	} else { //Otherwise…
	row[cols[i]] = 0; //Set to zero
	}
	}

	return row;
	}

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

	//Load in data
	d3.csv("data.csv", rowConverter, function(data) {

	var dataset = data;
	// console.log(dataset);

	//Now that we know the column names in the data…
	var keys = dataset.columns;
	keys.shift(); //Remove first column name ('Date')
	stack.keys(keys); //Stack using what's left (the car names)

	//Data, stacked
	var series = stack(dataset);
	// console.log(series);

	//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]];
	};

	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>
Date	Nissan Leaf	Smart ED	Mitsubishi I EV	BMW Active E	Ford Focus	Honda Fit EV	Tesla Model S	Toyota RAV4 EV	Chevrolet Spark
2010-12	19	0
2011-01	87	16
2011-02	67	16
2011-03	298	0
2011-04	573	0
2011-05	1142	8
2011-06	1708	0
2011-07	931	1
2011-08	1362	1
2011-09	1031	0
2011-10	849	17
2011-11	672	101
2011-12	954	182	76
2012-01	676	0	36	112
2012-02	478	2	44	115
2012-03	579	0	56	326
2012-04	370	0	79	30
2012-05	510	0	85	11	6
2012-06	535	127	33	79	89
2012-07	395	6	33	0	38	7
2012-08	685	1	37	0	34	9	100
2012-09	984	0	36	0	59	16	150	61
2012-10	1579	0	30	-2	118	16	450	47
2012-11	1539	3	42	0	172	26	800	32
2012-12	1489	0	77	0	167	19	900	52
2013-01	650	1	257	0	81	8	1350	25
2013-02	653	1	337	0	158	15	1450	52
2013-03	2236	0	31	0	180	23	1950	133
2013-04	1937	0	127	0	147	22	2100	70
2013-05	2138	60	91	0	157	15	2000	84
2013-06	2225	53	39	0	177	208	1800	44	27