Stacked To Grouped Bar Chart
  Duration: 27:39
Part of Course: Intermediate D3 Course
This Lesson is for subscribers

Stacked-to-grouped-bar-chart_280x158
Unlock this lesson NOW!
  • Get expert advice on Stacked To Grouped Bar Chart
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • You will use HTML Form Radio Buttons to transition from a D3 Grouped Bar Chart to a D3 Stacked Bar Chart
  • Notice the D3 Layout Stack Layout Function / Object
  • Notice the generation of the layers and data contained within each layer
  • Notice the calculations necessary to figure out the extent of the data
  • Notice the use of the D3 Data Join pattern to generate rectangles based on the layers produced by the D3 Layout Stack Layout
  • Notice the transition of the rectangles
  • Notice the definition of the event listener for the HTML Form Input Radio Buttons
  • Notice the JavaScript Window Method setTimeout
  • Notice the definition of the two transitions for the SVG Rectangles: first the X Coordinates and then the Y Coordinates

This Transcript is for subscribers.

Stacked-to-grouped-bar-chart_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on Stacked To Grouped Bar Chart
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index