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.

Take your visualizations beyond boring charts. D3.js enables you to create spatial maps, tree diagrams, stack charts, and more, all with a web browser and a few lines of code. There's something for everyone in data science: statisticians, scientists, mathematicians, and analysts. D3.js Essential Training for Data Scientists unlocks the keys to this versatile approach. Follow along with data consultant Emma Saunders as she shows how to build beautiful and interactive data visualizations with D3.

Start off with a review of HTML, CSS, and JavaScript—some basic coding skills you need to use the D3 library. Then learn how to make a simple bar chart and create basic shapes and text. Emma also introduces the path function and the power of generators for drawing more complex shapes. Then find out how to pull in JSON, XML, and CSV files to create more complex graphics such as tree and Voronoi diagrams, and manipulate your data for advanced graphics using map, stack, and nest functions. The course wraps up with tips for adding interactivity and picking the right graphic for your data.

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