Learning Data Visualization with D3.js

2h 5mIntermediate2017-05-25

Authors

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

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.

Learning objectives
What is D3.js?
Controlling HTML within selections
Binding data to the DOM
Drawing SVG graphics with D3
Using ordinal scales
Adding events and transitions
Working with data

Skills covered

D3.jsData VisualizationFront-End Web DevelopmentLearningWeb DevelopmentData ScienceBusiness Analysis and StrategyBusiness Software and ToolsOpen Source

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Using the exercises for this course

1. Getting Started

04 - What is D3
05 - Using D3 selections
06 - Controlling HTML within selections
07 - Modifying attributes through CSS
08 - Binding data to the DOM
09 - Creating subselections

2. Understanding SVG Graphics

10 - Drawing with SVG
11 - Understanding SVG primitives
12 - Drawing SVG graphics with D3
13 - Creating a simple SVG bar chart

3. Using D3 Methods

14 - Adding a linear scale
15 - Using ordinal scales
16 - Creating meaningful color scales
17 - Adding events
18 - Using transitions and animations
19 - Adding a tooltip

4. Using Data

20 - Using external data
21 - Using meaningful colors
22 - Adding a simple guide
23 - Creating margins
24 - Adding a time-based guide

Conclusion

25 - Next steps