Introduction to Visualization Using D3.js

Takeaway Skills

Understand the fundamentals of D3

Understand what SVGs are and how they work with D3

Draw scales, axes, labels, and margins to make some basic visualizations

Learn how to draw different charts, networks, and treemaps based on data

Add interactivity to visualization.

Understand the fundamentals of D3

Understand what SVGs are and how they work with D3

Draw scales, axes, labels, and margins to make some basic visualizations

Learn how to draw different charts, networks, and treemaps based on data

Add interactivity to visualization.

Course Overview

In this course, you will learn the fundamentals of D3.js (stands for Data-Driven Documents), which is a JavaScript library mainly used for visualization. In the first half of the course, you will cover DOM (Document Object Model) manipulation, method chaining, data binding, and data l... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Introduction

Who should take this course, and why?

Introduction to Data Visualization

Introduction to D3.js

Quiz on D3.js Introduction

2. D3.js Fundamentals

D3 Selections

Manipulating DOM Elements

Method Chaining

Data Joins/Binding

Challenge: Add HTML Tags and Bind Data

Solution Review: Add HTML Tags and Bind Data

Quiz on D3.js Fundamentals

3. Scales

Linear Scale

Logarithmic Scale

Clamp Function

scaleQuantize

Ordinal Scales

Challenge: Make a Scale

Solution Review: Make a Scale

Quiz on Scales

4. Drawing Basic Shapes

Introduction to SVG

SVG Using D3.js

Drawing a Rectangle

Drawing a Circle

Transformations

Transition

Challenge: Falling Circle

Solution Review: Falling Circle

Quiz on Drawing Basic Shapes

5. Chart Fundamentals

Chart Design Principles

Axis

Labels

Margins

Path and Line Generator

Line Chart

Draw Arc

Angle Generator

Draw a Pie Chart

Area Chart

Stacked Area Chart

Bar Chart

Challenge: Draw a Donut Chart

Solution Review: Draw a Donut Chart

Quiz on Chart Fundamentals

6. Network Visualization, Hierarchical Data, and Interactivity

Introduction to Nodes and Links

Drawing a Network

Introduction to Hierarchical Data

Draw a Treemap

Introduction to Interactivity

Tooltip

Challenge: Add Tooltip to a Treemap

Solution Review: Add Tooltip to a Treemap

Quiz: Network Visualization, Hierarchical Data, and Interactivity

7. Conclusion

Wrapping Up