D3.js Essential Training for Data Scientists

Build interactive data visualizations. Learn to create tree diagrams, stack charts, spatial maps, and more all with a web browser, a few lines of code, and the D3.js library.

Introduction

• Welcome
• Explaining D3
• What you need to know
• Using the exercise files

1. Refresher

• Introduction
• Recalling HTML basics
• Understanding HTML5
• Introducing SVG
• Recalling CSS
• Combining Javascript and D3
• Understanding the DOM and the console

2. Making a Simple Bar Chart with D3

• Introduction
• Adding an SVG
• Adding rectangles
• Setting attributes for shapes
• Seeing the code how the browser sees it

3. Basic Shapes, Courtesy of SVG

• Introducing SVG shapes
• Drawing circles
• Drawing ellipses
• Drawing lines
• Rejecting polygons and polylines
• Adding text

4. Advanced Shapes, with D3 and Path

• Introducing path
• Explaining generators
• Drawing an area chart
• Finding other generators
• Introducing groups

5. Scales and Axes

• Introducing scales
• Creating 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 colour scales
• Introducing other scales

6. Importing Data into D3

• Introducing external data
• Parsing a CSV file
• Drawing a line chart from CSV data
• Using TSV and DSV
• Parsing JSON
• Parsing and mapping XML
• Parsing a TXT file
• Parsing HTML
• Introducing other data methods

7. Additional Graphics with D3 Layout

• Introducing layout
• Making a tree from JSON
• Making a Voronoi tessellation
• Introducing other layouts

8. Preparing Your Data for Advanced Graphics

• Data manipulation
• Prepare stack data using map
• Drawing a stack area chart
• Advancing selections
• Make flat data multidimensional
• Filtering data

9. Interactivity

• Introducing interaction
• Making your graphic responsive
• Adding interactivity with CSS
• Adding interactivity with JavaScript
• Introducing dispatch
• Transitions
• Dragging and zooming

10. Picking the Right Graphic

• Picking the right graphic for your data
• Time series
• Text
• Hierarchy
• Geography
• Distribution
• Other

Conclusion

• Further resources
• Finding plugins
• Using the API reference
• Using D3 with other libraries
• Summary