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.

Creating data-driven visualizations and infographics that run on multiple devices responsively is a tough challenge. The D3.js library has revolutionized visualization by making it easier to parse your data and add meaningful interactivity. You can bring your data to life using D3, a bit of HTML, CSS, and JavaScript, and some SVG graphics. In this course, senior staff author Ray Villalobos explores how the D3 library works, and how you can use it to parse data from different sources and create interactive, visually exciting infographics and visualizations. He reviews the basics—controlling HTML with jQuery-esque selections and modifying attributes through CSS—before moving on to working with SVG graphics, a top choice for graphics in D3 visualizations. He also covers working with D3 methods like scaling, events, transitions, and animations, as well as how to work with data, including connecting to external data sources.

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