Basic Chart - Multi-Series Line Chart
  Duration: 19:41
Part of Course: Introductory D3 Course
This Lesson is for subscribers

Basic-chart-multi-series-line-chart_280x158
Unlock this lesson NOW!
  • Get expert advice on Basic Chart - Multi-Series Line 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 Multi-Series Line Chart Example to see how a full D3 Multi-Series Line Chart Example data visualization is built
  • Notice that the data is a two dimensional array where we have data on 3 cities and for each city we have data on 366 different days
  • Notice that the styling is done in the <style> </style> section of the HTML document
  • Notice the D3 Margin Convention
  • Notice the D3 Time Formatting function
  • Notice the D3 Time scale function for the X-Axis
  • Notice the D3 Linear Scale for the Y-Axis
  • Notice the D3 Ordinal Scale for the color - d3.scale.category10()
  • Notice the D3 SVG Axis component creation and definition for the X-Axis and Y-Axis
  • Notice the D3 SVG Path Generator Function and its accessor functions
  • Notice the D3 Type-Specific d3.tsv AJAX call
  • Notice the use of the d3.keys operator
  • Notice the use the of the .filter, .map, and .forEach array functions
  • Notice the use the .map within a .map to build an array of JavaScript objects that are organized in a D3-Friendly way
  • Notice the .domain being set for the X-Axis and Y-Axis
  • Notice the D3 Data Join
  • Notice the secondary D3 Data Join done as a .datum(...) with a function
  • Notice how D3 helps create visual representations of the data - the multi-series lines

This Transcript is for subscribers.

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