ADVANCEDCOURSE

Data Visualization + D3.js

Learn how to create interactive, engaging experiences using HTML, CSS, SVG and Javascript.

Taught by

Rik Lomas

Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and working with data in a creative, fun way. You’ll learn how to create interactive, engaging experiences using HTML, CSS, SVG and Javascript.

This course, aimed at beginners, will teach you how to work with data and choose the right visuals to represent it effectively. We’ll introduce the basics of the powerful D3.js library used to animate and add interactions to your charts and graphs. You’ll also learn how to pull data from the web using Ajax.

You don’t need to be a designer or experienced coder to join the course but a little knowledge of HTML and CSS will help.

What you’ll learn

The different types of data visualizations and how to use them effectively
How to work with and understand data sets and turn them into engaging experiences
How to use HTML, CSS, SVG to design charts and graphs
How to use Javascript to add animations, transitions and interactions to your experiences
An introduction to the fundamentals of the powerful Javascript library D3.js
Using Ajax to pull data from the web into your visualizations

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s it!

Target Audience

Anyone who is looking for ways to work with data-driven design or work closer with designers to implement beautiful visualizations of data.

We would recommend a little knowledge of HTML, CSS and Javascript before starting this course. Reading our Learn To Code Now book or taking either Foundation HTML, CSS + JS will be sufficient.

Chapter 01

Step Count – HTML, CSS + SVG

In the first part of the course, we'll lay out our Step Count project using HTML and CSS, plus introduce SVG tags to draw our data visualizations.

Lesson 01

Welcome to the Data Visualization + D3 course

Lesson 02

Introduction to the Step Counter project

Lesson 03

What is the SuperHi Editor?

Go to chapter

Chapter 02

Step Count – automating with Javascript

With Javascript, we can save a lot of time manually writing out HTML tags by writing scripts to automate drawing visuals.

Lesson 01

Welcome to automating our HTML

Lesson 02

How to add a Javascript file

Lesson 03

Picking tags and changing HTML

Go to chapter

Chapter 03

Step Count – Introducing D3

Using the right tool for the right job! Using D3, a Javascript library made for simplifying data visualizations, we'll save time and energy making our designs.

Lesson 01

Welcome to Week 2!

Lesson 02

What is D3 and why do we use it?

Lesson 03

How to add D3 to a project

Go to chapter

Chapter 04

Step Count – Extending D3

D3 comes with a lot of tools as part of the library. In this session, we'll add transitions with delays and easing, talk about the importance of grouping, and use D3's array functions to save us time!

Lesson 01

Welcome to the final part of Step Count

Lesson 02

Adding in a transition

Lesson 03

Adding delay and easing to transitions

Go to chapter

Chapter 05

Heat map

In Heat Map, we discuss how to take more complex data and turn it into a vibrant visualization featuring hover effects, a temperature scale changer and our first look at line graphs.

Lesson 01

Welcome to Heat Map

Lesson 02

Creating our HTML content

Lesson 03

Adding our overall page styling

Go to chapter

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.

Lesson 01

Welcome to Discover The World

Lesson 02

Setting up our HTML

Lesson 03

Adding our styling

Go to chapter

Chapter 07

The Top – Part 1

After a debate within the SuperHi team, we test to see if movies that are popular with fans correlate with popularity with the critics by using scores from fan-scored IMDb and critic-scored Metacritic in week 4's project, The Top.

Lesson 01

Welcome to The Top

Lesson 02

Why this data and why visualize it in this way

Lesson 03

Setting up our HTML

Go to chapter

Chapter 08

The Top – Part 2

In the second part of The Top, we add in line and area shapes to make our visualization clearer, and add in labels for our scores. We also discuss responsive design and media queries to make our designs suitable for any device.

Lesson 01

Welcome to part 2 of The Top

Lesson 02

Adding a background hover to each group

Lesson 03

Adding our line shapes

Go to chapter

Chapter 09

Kiddo Kiddo

In this brand new project, we discuss how to work with different scales, incomplete lines and how to change our data visualization based on our users' search results.

Lesson 01

Welcome to Kiddo Kiddo

Lesson 02

Our data source

Lesson 03

Adding our HTML content

Go to chapter

Chapter 10

Boundless

With D3, we can quickly add in more complex shapes such as arcs and pies. In the Boundless project, we add a pie chart that updates every half-second with an interval loop.

Lesson 01

Welcome to Boundless

Lesson 02

Setting up our project

Lesson 03

Setting up our updateGraph script

Go to chapter

Chapter 11

StockFinder

Previously, all the data used has been static – we only see changes to our designs when we change our data – but in this project, we add in live data that can change based on real-life information such as Apple's stock price.

Lesson 01

Welcome to StockFinder

Lesson 02

Setting up our project

Lesson 03

Pulling our data in using d3.json()

Go to chapter

Chapter 12

Population Densities of the World

In the last part of the course, we talk about how to add in geographic maps and talk about how to apply data to countries within our map.

Lesson 01

Welcome to Population Densities of the World

Lesson 02

Loading in our dataset

Lesson 03

Adding in map projections

Go to chapter

Get access to Data Visualization + D3.js

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Founder + CEO

Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.