tmcw/data.csv

## data.csv

          
            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

## index.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>
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
	<!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>