D3 Tips and Tricks: Interactive Data Visualization

Course Overview

In this course you will explore D3.js, a JavaScript library used for data visualization. You will start your journey into D3 with a simple line graph. You will learn to break the example down into its components and create variations of the graph by individually tinkering with each co... 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

What Do We Need to Get Started?

What is D3.js?

2. Starting with a Simple Graph

A Simple Graph

HTML

Cascading Style Sheets (CSS)

D3 JavaScript

Setting Up the Margins and the Graph Area

Getting the Data

Formatting the Date and Time

Setting Scales, Domains, and Ranges

Adding Data to the Line Function

Adding the SVG Element

Actually Drawing Something!

Challenge: Change X-Axis Display

Challenge Solution: Change X-Axis Display

Challenge: Line Properties

Challenge Solution: Line Properties

Quiz on Simple Graph Concepts

Author's Note

3. Things We Can Do with the Simple Graph

Setting Up and Configuring the Axes

Changing the Number of Ticks on an Axis

Rotating Text Labels for a Graph Axis

Formatting a Date and Time Axis with Specified Values

Adding the X-Axis Label

Adding the Y-Axis Label

How to Add a Title to Your Graph

Change a Line Chart Into a Scatter Plot

Smoothing out Graph Lines

Make a Dashed Line

Filling an Area Under the Graph

Adding a Drop Shadow

Adding Grid Lines to a Graph

Adding More Than One Line to a Graph

Labelling Multiple Lines on a Graph

Multiple Axes for a Graph

Challenge: Formatters

Challenge Solution: Formatters

Challenge: Rotate Title

Challenge Solution: Rotate Title

Quiz on More Simple Graph Concepts

4. Elements, Attributes, and Styles

The Framework for D3 Elements

Elements: Circle, Ellipse, and Rectangle

Elements: Line, Polyline, Polygon, and Path

Elements: Clipped Path

Elements: Text

Attributes: Points

Attributes: Transform

Attributes: Width, Height, Length, and Text

Styles: Fill, Stroke, Opacity, and Fill-Opacity

Styles: Stroke-Opacity, Width, Dasharray, and Linecap

Styles: Writing-Mode and Glyph-Orientation-Vertical

Using Styles in Cascading Style Sheets

Challenge: Draw an Ellipse

Challenge Solution: Draw an Ellipse

Challenge: Overlapping Circles

Challenge Solution: Overlapping Circles

Quiz on Elements, Attributes, and Styles

5. Bar Charts and Histograms

Bar Charts and Histograms

Bar Charts

Histograms

Challenge: Bar Charts

Challenge Solution: Bar Charts

Challenge: Histogram

Challenge Solution: Histogram

Quiz on Bar Charts and Histograms

6. Tree Diagrams

What is a Tree Diagram?

A Simple Tree Diagram Explained

A Horizontal Tree Diagram Explained

Styling: Changing Node and Link Colors

Styling: Changing the Nodes to Different Shapes

Using Images as Nodes

Generating a Tree Diagram From External Data

Generating a Tree Diagram from 'Flat' Data

Generating a Tree Diagram from a CSV File

An Interactive Tree Diagram

Challenge: Data Formats

Challenge Solution: Data Formats

Challenge: Nodes and Links

Challenge Solution: Nodes and Links

Quiz on Tree Diagrams

7. Sankey Diagrams

Introduction to Sankey Diagrams

Sankey Diagram Code

Formatting Data From a JSON

Formatting Data From a CSV

Challenge: Display JSON

Challenge Solution: Display JSON

Challenge: Change Link Color

Challenge Solution: Change Link Color

Quiz on Sankey Diagrams

8. Bullet Charts

Introduction to Bullet Chart Structure

D3.js Code for Bullet Charts

Adapting and Changing Bullet Chart Components

Add More Ranges and Measures

Challenge: Move Subtitle

Challenge Solution: Move Subtitle

Challenge: Invert Chart

Challenge Solution: Invert Chart

Quiz on Bullet Charts

9. Mapping with D3.js

GeoJSON and TopoJSON

Starting with a Simple Map

Zooming and Panning a Map

Displaying Points on a Map

Challenge: Display Country

Challenges Solution: Display Country

Challenge: Display Hometown

Challenge Solution: Display your Hometown

Quiz on Mapping

10. Assorted Tips and Tricks

Tooltips

Get Tipping

Including an HTML Link in a Tooltip

Colors

Filtering

Select Items with an 'IF' Statement

Color Gradient on Line

Color Gradient on Area

Transitions

Show/Hide Elements

Using HTML Inputs

Using a 'Range' Input

Using More Than One Input

Rotate Text with an Input

Use a 'Number' Input with D3.js

Add an HTML Table to Your Graph

More Table Madness

Adding Web Links to D3 Objects

Export an Image

Understanding JavaScript Object Notation (JSON)

Challenge: Rotating Square

Challenge Solution: Rotating Square

Challenge: Scatter Plot

Challenge Solution: Scatter Plot

Quiz on Tooltips

11. D3.js Examples Explained

Multi-Line Graph: Purpose, Code, and Description

Multi-Line Graph: Applying Colors and Legend

Multi-Line Graph: Making it Interactive

Difference Chart: Purpose, Code, and Description

Difference Chart: Nesting and Wrangling the Data

Difference Chart: Cheating with the Domain

Difference Chart: Clipping and Adding the Areas

Adding a Bit More to Our Difference Chart

My Favorite Tooltip Method for a Line Graph

My Favorite Tooltip: The Final Block

My Favorite Tooltip: Complex Version

12. Conclusion

Wrap Up