Learn how to create great-looking, interactive maps with d3.

A comprehensive video course to create geospatial data visualizations with javascript and d3.

30 40 50 60 Chicago avg.: 48

Learning d3 can be hard

You not only need to learn d3 but a lot of other concepts before that.

  • SVG/Canvas
  • HTML
  • Javascript

There are a lot of ways of doing things in d3. There is no one approach.
If you search on social networks and google, there are a ton of tweets and blog posts about why d3 is hard for them.

"I want to just jump in, yet it seems like I need to know a bunch of the api to get even a simple graph up."

Learning with examples is frustrating

Most people learn d3 by looking at examples and changing parts of it to fit their needs.

You iterate on these examples, look at the documentation, maybe consult a book or look at videos on YouTube.

But people get frustrated using this method.

"After looking at a few d3.js demos, I had thought that the above task would be trivially easy with d3.js, but in fact I have found it to be insanely difficult."

Undocumented example code makes it harder to learn

A lot of examples don’t have of comments or explanations. Which makes it hard to understand what is being done.

"Without comments and explanations of what is happening along the way, it’s very hard for someone starting out to figure out what’s going on."

Potentially bad code is hard to fix

Everyone can create examples with d3, and it’s hard to know the experience level of the creator.
Examples may have bad or repetitive code. If you learn with these possibly bad examples, you could learn the wrong things.

"There’s the problem of blocks that are written with bad code, or don’t include the necessary data files or libraries."

Old examples lead to more frustration

Thanks to the introduction of observable more examples are created with the current version of d3. But on bl.ocks a majority of examples are still created with v3 which was replaced in 2016 with v4.

"Most of the resources I’ve found are either old (v3, I know I can still follow them, but I’d rather follow a v4 tutorial) or very convoluted. It seems like I spend half my time trying to figure out why the graph won’t compile."

Most d3.js tutorials only scratch the surface

"I’ve gone through some tutorials but I find that they only scratch the surface and are often fragmented — learning the code for building a scale doesn’t mean anything to me without the accompanying chart."

Inspired by the amazing @milafrerichs #D3 workshop at #foss4gna, I was able to create an interactive globe map of my twitter friends.

Chris Marx

Chris Marx

How this course is different

Geospatial Data Visualization with d3 will help you take a more focussed approach for learning d3.

Retain more by learning with projects

Project-based learning is believed to result in more in-depth knowledge through active exploration of real-world challenges and problems.

“[Project-based learning] encourages higher order critical thinking and de-emphasizes memorization. Increases motivation to learn in order to arrive at a solution. “

Self-check your learning

Check what you learn after each section with exercises.

Stay on top of your learning path

Weekly accountability emails will help you stay on top of your learning experience and keep you motivated.

Get help from peers

You will learn with a group of 5 poeple and will be able help each other. You will get access to a forum and we will have byweekly group video calls.

Modeled from successful hands-on workshops

This course is modeled from hands-on workshops at geospatial conferences I gave over the last three years.

I iterated on the format, the course content, and examples over the years to land on this course format and content.

Conferences I gave this workshop at:

  • NACIS 2019
  • FOSS4G UK 2019
  • FOSS4G North America 2019
  • FOSS4G Oceania 2018
  • FOSS4G 2017

If you’ve ever wanted to make maps and visualizations in d3, check out @milafrerichs new online course. I’ve taken his workshop @foss4gna and was impressed.

Joshua Campbell

Joshua Campbell

What's included!

This course will guide you through the most important aspects of creating maps with d3 and lead you towards more advanced topics.
Module 1

Simplest Map Possible

In this project, you’ll create your first simple map. You’ll learn all the important aspects of creating maps with d3.

SVG Basics

Understand and learn the basics of SVG. What elements we will use and what attributes they have.

Selections

Learn the very important concept of selections in d3.

Projections

How projections can be used with d3 and how they work.

Project Exercise

Apply what you have learned in the project exercise.

Module 2

Housing Burden: Essentials

We look at the amount people of Chicago need to invest in housing. There is an interesting dataset from the city of Chicago.

We first create a basic Choropleth map to visualize the housing burden per neighborhood. The info window will include a bubble map as well with additional data.

We then move forward and create a dashboard with interactivity, tables, and small multiples.

Path object

How the SVG path element works and in-depth explanation of the d attribute.

GeoPath object

How d3 helps you create path elements from latitude & longitude coordinates.

Loading Data

How to use d3 to load GeoJSON and CSV data.

Data Join

Understand one of the most difficult concepts for beginners and intermediate d3 users: data joins.

Project Exercise

Apply what you have learned in the project exercise.

Module 3

Housing Burden: Interactivity

Events

Understand and learn the basics of events in d3. Especially mouse events.

Tooltip

Understand and learn the basics of tooltips in d3.

Zoom

Understand and learn the basics of zoom in d3.

Project Exercise

Apply what you have learned in the project exercise.

Module 4

Housing Burden: Bubble Map

Circle Object

Understand the use of the circle SVG element and how we will use it for bubble maps.

Advanced Scales

More in-depth walkthrough into scales and how we will use them for bubble maps.

Project Exercise

Apply what you have learned in the project exercise.

Module 5

Housing Burden: Advanced Concepts

Annotations

How to enhance your map with annotations

Small Multiples

What are small multiplies and how to use them.

Reusable Code

How to create code that is reusable among projects and make updating your chart easier

Responsive Maps

Create responsive maps with d3, how to react on changes to the browser size.

Animations

How to use transitions to animate your map.

Project Exercise

Apply what you have learned in the project exercise.

Module 6

Housing Burden: Dashboard

Project Exercise

Apply what you have learned in the project exercise.

Module 7

Election Maps

We look at a mock election for a city. I will provide a server with real-time data of results and we use Choropleth maps and Cartograms to visualize the election results.

6+ Lessons including:
  • Live-update your map
  • Switch geographies
  • Cartograms
  • Multivariate Choropleth
By Abraham Epton and Alex Bordens from Chicago Tribune
Module 8

NO2 Maps

Using satellite raster data we look at NO2 levels in different cities around the world.

4+ Lessons including:
  • Load and display raster data
  • Animate raster data
  • Contours with d3
Module 9

Single Family zoning in San Diego

We look at zoning data for the city of San Diego and look at different ways to map

How to use canvas to visualize all buildings in San Diego and their property zone.

3+ Lessons including:
  • Use canvas for maps
  • Zoom with canvas
  • Events with canvas

Advanced Content

The more advanced part of the course is still t.b.d. and you can influence the direction of the course.

3+ Lessons including:
  • Hexbin Map
  • Basemaps

Bonus Content

Bonus: Data Aggregations with d3

3+ Lessons including:
  • Grouping
  • Summarizing
  • Statistics

About the instructor

My name is Mila Frerichs. I am working with d3 for about five years and teach people d3 for about three. My first d3 workshop was back in 2015 when I was still in college.

Since then I gave iterations of the d3 mapping workshop at five different conferences around the world.

I run my own consultancy working with non-profits creating data visualizations and tools.

I have a dog and love the outdoors, hiking, swimming, climbing, wakeboarding and more.

I would love to have you join me on this journey through d3.

What kind of maps will you be able to create after you‘ve gone through the course?

Attributions:

Hexbin map at top: Mike Bostock
Choropleth Map: New York Time
Bubble Map: Washington Post