Project

This module taught you the foundation of full-stack web development. Data fetching is the most important part: you probably won't write the backend yourself, but you will definitely have to fetch data from it!

Now, let's write a little dataviz app that fetches data from a real API and shows it as a nice graph.

Members only

5 minutes read

You made it!

This module explained why real data is messy, how to load other file formats, how to wrangle it into shape, how to fetch it from a server, and what to do when the data is heavy or sensitive.

Now, let's build a real project that mimics what your real-life job will be: fetch the data, show a loader while it travels, and render once it arrives.

Your mission

Let's build a seasonal temperature heatmap of the world.

The heatmap is going to have 20 rows, representing 20 cities. Here is a list you can use for your project:

// 20 cities, ordered from the far north to the far south.
// Keeping them sorted by latitude is what makes the heatmap readable.
const CITIES = [
  { name: 'Reykjavik', lat: 64.15, lon: -21.94 },
  { name: 'Anchorage', lat: 61.22, lon: -149.9 },
  { name: 'Oslo', lat: 59.91, lon: 10.75 },
  { name: 'Moscow', lat: 55.75, lon: 37.62 },
  { name: 'London', lat: 51.51, lon: -0.13 },
  { name: 'Paris', lat: 48.85, lon: 2.35 },
  { name: 'New York', lat: 40.71, lon: -74.01 },
  { name: 'Tokyo', lat: 35.68, lon: 139.65 },
  { name: 'Los Angeles', lat: 34.05, lon: -118.24 },
  { name: 'Cairo', lat: 30.04, lon: 31.24 },
  { name: 'Delhi', lat: 28.61, lon: 77.21 },
  { name: 'Mexico City', lat: 19.43, lon: -99.13 },
  { name: 'Mumbai', lat: 19.08, lon: 72.88 },
  { name: 'Bangkok', lat: 13.76, lon: 100.5 },
  { name: 'Singapore', lat: 1.35, lon: 103.82 },
  { name: 'Nairobi', lat: -1.29, lon: 36.82 },
  { name: 'Jakarta', lat: -6.21, lon: 106.85 },
  { name: 'Lima', lat: -12.05, lon: -77.04 },
  { name: 'Rio de Janeiro', lat: -22.91, lon: -43.17 },
  { name: 'Cape Town', lat: -33.92, lon: 18.42 },
];

Then it's going to have 52 columns: one for each week of 2025. Each square will represent the avg temperature for the selected week and city.

If you sort the rows by latitude, your heatmap should show the hemisphere flip clearly!

Finding the data

Data is available through the Open-Meteo API, the free weather API you already met in the remote data exercise.

Oh no! 😱

It seems like you haven't enrolled in the course yet!

Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!

Enrollment is currently closed. Join the waitlist to be notified when doors reopen:

Or Login

← Previous

Heavy or Sensitive data

Why animate?