SuperHi FM

Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
CatalogCart AboutSign in

SuperHi

Data Visualization + D3.js

Discover the World
Chapter 06

Discover the World

In this lesson, we use a scattergraph-style visualization to compare data in two dimensions. We also add in transitions on updated data, add in axes and talk about responsive designs.

Links + downloads

Videos

Lesson 01

Welcome to Discover The World

Lesson 02

Setting up our HTML

Lesson 03

Adding our styling

Lesson 04

Adding our own Javascript functions

Lesson 05

Adding events to both page load and select tag changes

Lesson 06

Setting up our Javascript

Lesson 07

How we got our data source

Lesson 08

Adding groups per city

Lesson 09

Adding scales to our data

Lesson 10

Changing our data depending on which value

Lesson 11

Hooking our select tags up

Lesson 12

Adding movement to select changes

Lesson 13

Changing our circle radius data

Lesson 14

Adding axes

Lesson 15

Styling our axes

Lesson 16

Adding axis labels

Lesson 17

Adding a city label

Lesson 18

Raising in D3

Lesson 19

Responsive design with SVG viewBox

Lesson 20

Homework

Lesson 21

Homework solution

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!

The Top – Part 1

Next: Chapter 07

The Top – Part 1

Heat map

Back: Chapter 05

Heat map

Feeling stuck?

Don’t worry, we are here to help you with:

  • Speedy help from one of our team members
  • Detailed, relevant solutions
  • Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

EmailDiscord