Basic Chart - Area Chart
  Duration: 12:01
Part of Course: Introductory D3 Course
This Lesson is for subscribers

Basic-chart-area-chart_280x158
Unlock this lesson NOW!
  • Get expert advice on Basic Chart - Area Chart
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • You will use the TSV data from the D3js.org website Area Chart Example to see how a full D3 Area Chart Example data visualization is built
  • Notice that the styling is done in the <style> </style> section of the HTML document
  • Notice the D3 Margin Convention
  • Notice the use of the D3 Time Formatting function and parsing
  • Notice the D3 Time Scale for the X-Axis
  • Notice the D3 Linear Scale for the Y-Axis
  • Notice the D3 SVG Axis component creation and definition for the X-Axis and Y-Axis
  • Notice the D3 SVG Area Path Generator Function and the accessor functions
  • Notice the D3 TSV Type-Specific AJAX call to get the data
  • Notice the .domain being set for the X and Y Axis
  • Notice the data join is done using the D3 .datum() operator
  • Notice how D3 helps create visual representations of the data
  • Notice the instantiation of the X-Axis and Y-Axis

This Transcript is for subscribers.

Basic-chart-area-chart_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on Basic Chart - Area Chart
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index