Ch 16 examples setup

pouyana · Apr 8, 2017 · 90e8f10 · 90e8f10
1 parent 2c5dc59
commit 90e8f10
Show file tree

Hide file tree

Showing 3 changed files with 341 additions and 0 deletions.
diff --git a/chapter_16/01_stacked_area.html b/chapter_16/01_stacked_area.html
@@ -0,0 +1,164 @@
+<!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");
+
+ //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("vehicle_sales_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/chapter_16/README.md b/chapter_16/README.md
@@ -1,4 +1,32 @@
 
+
+XXXX VEHICLES
+
+### ev_sales_data.csv
+
+XXXXX OLD
+
+This file was derived from data compiled by Yan (Joann) Zhou at Argonne National Laboratory, U.S. Department of Energy, and published by the DOE’s Office of Public Affairs, accompanied by a chart by Daniel Wood, Data Visualization and Cartographic Specialist in that office.
+
+Notes: Sales from the second quarter of 2013 for Tesla Model S are based off of estimates provided by the Hybrid Market Dashboard. Data last updated 1/20/15.
+
+“Electric and Hybrid Electric Vehicle Sales: December 2010 - June 2013”
+
+As accessed on March 14, 2017 from:
+https://energy.gov/sites/prod/files/2013/07/f2/062010-092013_EV_HEV%20Sales.xlsx
+
+Source pages and more info:
+https://energy.gov/downloads/electric-and-hybrid-electric-vehicle-sales-december-2010-june-2013
+https://energy.gov/articles/visualizing-electric-vehicle-sales
+
+
+
+
+
+
+
+XXXXX CLIMATE
+
 An enormous thank-you to the National Oceanic & Atmospheric Administration and affiliated researchers