D3.js Essential Training

Introduction

• Transform your data visuals with D3.js
• Explaining D3
• What you need to know
• Using the exercise files

1. Foundational Web Knowledge Refresher

• How browsers make sense of HTML
• Introducing SVG
• Unlearning CSS: Why HTML CSS doesn't work with SVG
• Responsive design
• Pulling the D3 library into your HTML page
• Understanding the DOM and console

2. Making a Simple Bar Chart with D3

• Adding an SVG with D3
• Adding data-driven rectangles
• Dynamic attributes for shapes
• Seeing the code how the browser sees it
• Challenge: Add circles for each datapoint
• Solution: Add circles for each datapoint

3. Introducing All of SVG's Basic Shapes

• Drawing circles and ellipses
• Drawing lines and styling them
• Adding text
• Challenge: Create a traffic light
• Solution: Create a traffic light

4. Advanced Shapes with D3's Path Element

• Introducing path
• Using line and area generators
• Using group elements to organize your elements
• Dealing with NaNs using defined()
• Challenge: Line chart with missing data
• Solution: Line chart with missing data

5. Scales and Axes

• Introducing scales
• Position elements with a linear scale
• Creating a linear axis
• Positioning and formatting our axis
• Creating a time scale
• Creating a time series axis
• Creating an ordinal scale and axis
• Using color scales
• Challenge: Add Fahrenheit scale
• Solution: Add Fahrenheit scale

6. Importing Data into D3

• Parsing a CSV file using promises()
• Drawing a line chart from CSV data
• Parsing and displaying nested JSON with nested selections
• Understanding and using D3 fetch
• Challenge: Line chart from scratch scales and generators
• Solution: Line chart from scratch scales and generators

7. Layout Modules

• Making a tree from JSON using D3-hierarchy
• Powering a treemap from D3-hierarchy
• Pie charts and arcs with D3-shape
• Leveraging community plugins: Using D3-hexbin
• Challenge: Create a donut chart
• Solution: Create a donut chart

8. Advancing Data and Selections

• Drawing a stack area with D3.stack() and D3.area()
• Drawing a stack area chart
• Handling data changes with enter and exit selections
• Streamline enter and exit selections with merge() and join()
• Manipulating data with. group() and .rollup()
• Mastering merge(), map(), sort() and .filter()
• Challenge: Create a stack chart
• Solution: Create a stack chart

9. Interactivity

• Making your graphic responsive
• Using CSS to create transitions
• Making sense of D3 transitions
• D3 events and the data they expose
• Introducing zooming, dragging, and brushing with D3
• Challenge: Hovering and tool tips
• Solution: Hovering and tool tips

Conclusion

• Leveling up in D3