<!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