D3.js Essential Training for Data Scientists

Course details

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.

Learning objectives
Reviewing HTML, CSS, and JavaScript basics
Making a simple bar chart with D3
Understanding SVG graphics
Drawing basic shapes
Adding text
Using generators and the path element
Creating a scale and axes
Importing data into D3
Creating trees and Voronoi tessellations
Preparing your data for advanced graphics
Adding interactivity and transitions
Choosing the right graphic
Finding D3.js plugins

Concepts

0. Introduction

01 - Welcome
02 - Explaining D3
03 - What you need to know
04 - Using the exercise files

1. Refresher

05 - Introduction
06 - Recalling HTML basics
07 - Understanding HTML5
08 - Introducing SVG
09 - Recalling CSS
10 - Combining Javascript and D3
11 - Understanding the DOM and the console

2. Making a Simple Bar Chart with D3

12 - Introduction
13 - Adding an SVG
14 - Adding rectangles
15 - Setting attributes for shapes
16 - Seeing the code how the browser sees it

3. Basic Shapes, Courtesy of SVG

17 - Introducing SVG shapes
18 - Drawing circles
19 - Drawing ellipses
20 - Drawing lines
21 - Rejecting polygons and polylines
22 - Adding text

4. Advanced Shapes, with D3 and Path

23 - Introducing path
24 - Explaining generators
25 - Drawing an area chart
26 - Finding other generators
27 - Introducing groups

5. Scales and Axes

28 - Introducing scales
29 - Creating a linear scale
30 - Creating a linear axis
31 - Positioning and formatting our axis
32 - Creating a time scale
33 - Creating a time series axis
34 - Creating an ordinal scale and axis
35 - Using colour scales
36 - Introducing other scales

6. Importing Data into D3

37 - Introducing external data
38 - Parsing a CSV file
39 - Drawing a line chart from CSV data
40 - Using TSV and DSV
41 - Parsing JSON
42 - Parsing and mapping XML
43 - Parsing a TXT file
44 - Parsing HTML
45 - Introducing other data methods

7. Additional Graphics with D3 Layout

46 - Introducing layout
47 - Making a tree from JSON
48 - Making a Voronoi tessellation
49 - Introducing other layouts

8. Preparing Your Data for Advanced Graphics

50 - Data manipulation
51 - Prepare stack data using map
52 - Drawing a stack area chart
53 - Advancing selections
54 - Make flat data multidimensional
55 - Filtering data

9. Interactivity

56 - Introducing interaction
57 - Making your graphic responsive
58 - Adding interactivity with CSS
59 - Adding interactivity with JavaScript
60 - Introducing dispatch
61 - Transitions
62 - Dragging and zooming

10. Picking the Right Graphic

63 - Picking the right graphic for your data
64 - Time series
65 - Text
66 - Hierarchy
67 - Geography
68 - Distribution
69 - Other

Conclusion

70 - Further resources
71 - Finding plugins
72 - Using the API reference
73 - Using D3 with other libraries
74 - Summary