This Lesson is for subscribers
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
Resources: