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


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.



Get Started

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO

Check Today's 30+ Free Courses on Telegram!