Ch 16 example progress

chapter_16/01_initial_chart.html

@@ -194,12 +194,12 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S.: January 2005&nda
 
  //Create axes
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis x")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
 
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis y")
  .attr("transform", "translate(" + (w - padding * 2) + ",0)")
  .call(yAxis);
 

chapter_16/02_color_by_type.html

@@ -220,12 +220,12 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
 
  //Create axes
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis x")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
 
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis y")
  .attr("transform", "translate(" + (w - padding * 2) + ",0)")
  .call(yAxis);
 

chapter_16/03_sorted_by_type.html

@@ -220,12 +220,12 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
 
  //Create axes
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis x")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
 
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis y")
  .attr("transform", "translate(" + (w - padding * 2) + ",0)")
  .call(yAxis);
 

chapter_16/04_types_only.html

@@ -333,12 +333,12 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
 
  //Create axes
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis x")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
 
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis y")
  .attr("transform", "translate(" + (w - padding * 2) + ",0)")
  .call(yAxis);
 

chapter_16/05_click_transitions.html → chapter_16/05_click_transition.html

@@ -38,6 +38,11 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
 
  //For converting Dates to strings
  var formatTime = d3.timeFormat("%b %Y");
+
+ //Define key function, to be used when binding data
+ var key = function(d) {
+ return d.key;
+ };
 
  //Set up stack methods
  var vehicleStack = d3.stack();
@@ -242,7 +247,7 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
  svg.append("g")
  .attr("id", "vehicles")
  .selectAll("path")
- .data(vehicleSeries)
+ .data(vehicleSeries, key)
  .enter()
  .append("path")
  .attr("class", "area")
@@ -285,7 +290,7 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
  svg.append("g")
  .attr("id", "types")
  .selectAll("path")
- .data(typeSeries)
+ .data(typeSeries, key)
  .enter()
  .append("path")
  .attr("class", "area")
@@ -315,17 +320,64 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
 
  return color;
  })
- .on("click", function() {
+ .on("click", function(d) {
+
+ //Which type was clicked?
+ var thisType = d.key;
 
- // d3.select("#types")
- // .selectAll("path")
- // .attr("opacity", 1)
- // .transition()
- // .duration(500)
- // .attr("opacity", 0);
+ //Generate a new data set with all-zero values, 
+ //except for this type's data
+ var thisTypeDataset = [];
+
+ for (var i = 0; i < typeDataset.length; i++) {
+ thisTypeDataset[i] = {
+ date: typeDataset[i].date,
+ HEV: 0,
+ PHEV: 0,
+ BEV: 0,
+ FCEV: 0,
+ [thisType]: typeDataset[i][thisType] //Overwrites the appropriate zero value above
+ }
+ }
 
- d3.select(this)
- .attr("opacity", 1);
+ // console.log(thisTypeDataset);
+
+ //Stack the data (even though there's now just one "layer") and log it out
+ var thisTypeSeries = typeStack(thisTypeDataset);
+ // console.log(thisTypeSeries);
+
+ //Bind the new data set to paths, overwriting old bound data.
+ var paths = d3.selectAll("#types path")
+ .data(thisTypeSeries, key);
+
+ //Transition areas into new positions (i.e., thisType's area
+ //will go to a zero baseline; all others will flatten out).
+ //
+ //Store this transition in a new variable for later reference.
+ var areaTransitions = paths.transition()
+ .duration(1000)
+ .attr("d", area);
+
+ //Update scale
+ yScale.domain([
+ 0,
+ d3.max(thisTypeDataset, function(d) {
+ var sum = 0;
+
+ //Calculate the total (sum) of sales of this type,
+ //ignoring the others (for now)
+ sum += d[thisType];
+
+ return sum;
+ })
+ ]);
+
+ //Append this transition to the one already in progress
+ //(from above). Transition areas to newly updated scale.
+ areaTransitions.transition()
+ .delay(200)
+ .duration(1000)
+ .attr("d", area);
 
  })
  .append("title") //Make tooltip
@@ -335,12 +387,12 @@ <h1>Monthly Number of Electric-Drive Vehicles Sold in the U.S. (by Type): Januar
 
  //Create axes
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis x")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
 
  svg.append("g")
- .attr("class", "axis")
+ .attr("class", "axis y")
  .attr("transform", "translate(" + (w - padding * 2) + ",0)")
  .call(yAxis);