Learning Data Visualization with D3.js

Bring your data to life with D3.js. Create interactive, visually exciting infographics and visualizations with HTML, CSS, JavaScript, and SVG graphics.

Introduction

• Welcome
• What you should know
• Using the exercises for this course

1. Getting Started

• What is D3?
• Using D3 selections
• Controlling HTML within selections
• Modifying attributes through CSS
• Binding data to the DOM
• Creating subselections

2. Understanding SVG Graphics

• Drawing with SVG
• Understanding SVG primitives
• Drawing SVG graphics with D3
• Creating a simple SVG bar chart

3. Using D3 Methods

• Adding a linear scale
• Using ordinal scales
• Creating meaningful color scales
• Adding events
• Using transitions and animations
• Adding a tooltip

4. Using Data

• Using external data
• Using meaningful colors
• Adding a simple guide
• Creating margins
• Adding a time-based guide

Conclusion

• Next steps