How to Visualize Data with D3
4.9 (13 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
251 students enrolled

How to Visualize Data with D3

Learn the D3 JavaScript library and create a data visualization using real science data
4.9 (13 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
251 students enrolled
Created by Elisabeth Robson
Last updated 1/2020
English
English [Auto]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 8 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • JavaScript, D3, data visualization
Requirements
  • Basic JavaScript, HTML, and CSS experience
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.

Who this course is for:
  • Beginner to intermediate JavaScript students
  • Beginner D3 students
Course content
Expand all 25 lectures 01:25:19
+ Get Started
5 lectures 14:27

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.

The inspiration for this course is the "Warming Stripes" visualization by climate scientist Ed Hawkins. You can follow him on twitter, or visit his blog to learn more about Ed and his work.

Pre-requisites

To successfully complete this project, we recommend that you have some background in HTML and JavaScript. You don't need to be an expert by any means, but you should have experience building web pages and you should have basic programming skills with JavaScript.

No experience with D3 is required.

Learning Path

  • Head First HTML and CSS (Chapters 1-6)

  • Head First JavaScript Programming (Chapters 1-6)

  • This course: How to Visualize Data with D3

Resources

You can download the completed code from GitHub here: https://github.com/bethrobson/CCC/tree/master/Stripes. We recommend, however, that you follow along starting from scratch to help with the learning process.

Preview 02:41

In this lesson, we look at some examples of visualizations, and talk about the key components of the visualization you'll be building.

Preview 01:59

It's time to take a closer look at the data so we understand the numbers we're working with before we visualize them. In this lesson we step through the data from NASA and explain what it means.

Preview 04:46

In this lesson you'll learn what you need to work on this project, including the data we'll be using to create the visualization.

Resources

Get the source data from NASA (CSV): https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts.csv

Get the source data from Github: https://github.com/bethrobson/CCC/blob/master/Stripes/GLB.Ts.csv

Get the code files from Github: https://github.com/bethrobson/CCC/tree/master/Stripes

Get the link from D3 (we'll link directly to D3, but you can download the code if you want and link to it on your computer. We'll do this step in the lesson "Build the HTML"): https://d3js.org/

Preview 01:54
Get a Web Server Running
03:07
+ Work with the Data
4 lectures 19:03

In this lesson, you'll create all the HTML we'll need for this project (not a lot!) and link to the D3 library at https://d3js.org/.

Build the HTML
03:28

In this lesson, you'll learn how to use D3 to read CSV data from the data file. We'll step through how to process each line of data as it's read in from the file, and how to use the Promise object returned from the d3.csv method to work with the resulting data array in the code.

This is a long lesson but hang in there; at the end of the lesson you'll be reading data from the file and be ready to start working on turning the data into the visualization.

Read the Data
10:07
Process the Data
04:05

In a previous lesson you learned how we can read data from a CSV file using D3, creating an array of objects made out of each line of data in the CSV.

You also learned that D3 automatically uses the headings in the first row of the CSV file as the properties for each entry in the data (CSV is comma separated values, so each entry is separated by a comma on a line of data).

Write some D3 code to read in the attached file (Icecream.csv) and create an array of objects containing the ice cream data.

Do the Work: Practice Reading CSV Data
01:23
+ D3 Patterns and Idioms
4 lectures 17:26

In this lesson you'll get an introduction to SVG and how to use D3 to generate SVG for a visualization. We'll write the code to generate the SVG element and add attributes to size it correctly for the visualization.

Work with SVG and D3
07:12

In this lesson, we'll talk about how you'll typically see D3 code written: using method chaining style. It's a good idea to get used to reading and using this style for programming D3. The D3 API was designed using the Fluent Interface Pattern which allows us to method chain most method calls in D3.

Method Chaining with D3
02:43

In this lesson, we'll create a SVG rectangle for each point in the data array. Each rectangle will be a color stripe in the final visualization. A key concept in D3 is data binding: that is binding data points in an array to elements you're creating and adding to a visualization. You'll learn how data binding in D3 works, and how to easily generate a SVG rectangle for each data point in our temperature anomaly data.

Bind Data and Elements
06:56

We are creating a SVG rectangle for every point in our data array. Those rectangles are going to need to be positioned, and sized, and styled correctly so they look like the color stripes in the final visualization.

In this exercise, you'll try writing code to make each rectangle the correct size. By default each rectangle is 0 pixels in width and 0 pixels in height.

Do the Work: Add Attributes to the Stripes
00:35
+ Create the Visualization
8 lectures 31:23

It's time to size and position the rectangles we've created. In this lesson you'll learn how to use the D3 attr() method to set the width, height, and y position of the rectangles that we'll use to create the color stripes.

Don't forget that when we position elements in the browser, the top left corner of the browser is x, y position 0, 0. The x position increases as you move across the screen to the right, and the y position increases as you move down the screen from top to bottom. This is a little different from how you think about x, y axes normally (where y increases as you go up), so that's just something to keep in mind as you do this lesson.

Add Attributes to the Stripes
04:01

If you want an attribute value of an SVG element to be based on information in the data point or its index in the data array, you need to get a handle to the data point somehow. In this lesson you'll learn how to do that with a function we pass to the attr() method. This is another key concept in D3 so spend time on this lesson and review it more than once if you need to!

Create a Function to Position the Stripes
05:28

We'll use an online color tool (colorbrewer2.org) to select colors for our visualization, and add these colors as an array of hex values. In this lesson you'll learn how to choose those colors, how to arrange them in an array, and learn the first steps of how to use the D3 style() method to set the "fill" property to assign a color to a data point.

Add some Color
05:10

In D3, when we want to convert a value in one set of values (known as the domain) to another set of values (known as the range), we write a scale function. We'll get into a lot more detail about writing a scale function for our temperature anomalies in the next few lessons; in the meantime, practice by doing this exercise to convert dog ages into human years, and human ages into dog years. It's often said that a dog ages 5 years for every human year.

Do the Work: Domain and Range
00:59

Converting data points to numbers representing colors or position or size is a common problem when visualizing data and it's one that D3 has methods to help with. In this lesson you'll learn about domain and range and how to think about converting one set of values to another. In our case, we want to convert temperature anomalies to color. In this lesson you'll think through how we can do that.

Convert a Temperature Anomaly to a Color
08:13

In this lesson, you'll create a linear scale function to convert a temperature anomaly (in the domain), to an index in the color array (in the range). You'll learn how to use the D3 scaleLinear() function and its methods domain() and range() to map from temperature anomalies to indices we can use in the color array to pick a color. This is another key concept in D3 so take your time, and make sure you understand each step.

Create a Linear Scale Function
02:25

In this lesson we use the linear scale function we just created to style the stripes and complete the visualization. This is the last step! If all goes well you'll see the finished visualization once you complete this lesson, so hang in there, you're almost done.

Use the Scale to Style the Stripes
04:10
Do the Work: Add Mouse Over Handling to Display the Year of a Stripe
00:57
+ Wrap up
4 lectures 03:00

In this final lesson we take another look at the visualization we've created and talk about what it shows us.

As a reminder, you can download the complete files from github, including the source data (originally from NASA).

To learn more D3, go to https://d3js.org/.

To learn more about climate change, go to https://climate.nasa.gov/.

Gain some Insight
02:25
Do the Work Solution: Practice Reading CSV Data
00:17
Do the Work Solution: Domain and Range
00:05
Do the Work Solution: Add Mouse Over Handling to Display the Year of a Stripe
00:13