How to Visualize Data with D3

Learn the D3 JavaScript library and create a data visualization using real science data

What you will learn

JavaScript, D3, data visualization

Description

Welcome to How to Visualize Data with D3. In this project, join Elisabeth Robson to learn how to incorporate data visualization into your web skills using HTML, JavaScript and the D3 data visualization library. Elisabeth will take you through building a visualization using data downloaded from NASA. You’ll learn how to use D3 to read data into a web page, select and create new elements, and position and style elements to generate a striking color visualization. Along the way you’ll learn from the ground up how to use D3: how data binding works, how to use methods to add attributes and style on D3 elements, and how to use scale functions to process data points as you build the visualization.

At the end of the course you’ll have completed a data visualization of the NASA data, and have some new skills you can apply to your own data too.

English

language

Content

Get Started

Introduction

What is a Visualization?

Inspect the Data

Get Set Up

Get a Web Server Running

Work with the Data

Build the HTML

Read the Data

Process the Data

Do the Work: Practice Reading CSV Data

D3 Patterns and Idioms

Work with SVG and D3

Method Chaining with D3

Bind Data and Elements

Do the Work: Add Attributes to the Stripes

Create the Visualization

Add Attributes to the Stripes

Create a Function to Position the Stripes

Add some Color

Do the Work: Domain and Range

Convert a Temperature Anomaly to a Color

Create a Linear Scale Function

Use the Scale to Style the Stripes

Do the Work: Add Mouse Over Handling to Display the Year of a Stripe

Wrap up

Gain some Insight

Do the Work Solution: Practice Reading CSV Data

Do the Work Solution: Domain and Range

Do the Work Solution: Add Mouse Over Handling to Display the Year of a Stripe

Enroll for Free