SuperHi FM

Search:

Catalog Cart About Sign in

Data Visualization + D3.js

Discover the World

Chapter 06

Discover the World

Links + downloads

Chapter resources

Chapter URL

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

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!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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.

Private notes

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

Sign in to save notes