Command Palette

Search for a command to run...

Hectal
Phase 4Beginner5 of 19 in Data Visualization

Data in the Browser

Move to your own computer with Node, Vite and npm, then load, parse, date-check, clean and summarise Lumen's real CSV and JSON, with loading, empty and error states.

Until now your numbers were typed into the code. Real dashboards read files: CSV exports, JSON from a server, data in the cloud. This phase moves you to your own computer, where a small development server lets your page fetch files the way a real website does.

Then you learn what really happens to data on its way in: every CSV cell arrives as text, dates hide time zones, and real files have blanks, comma numbers and impossible days. You load the data, check it, clean it without inventing anything, and summarise it with d3-array.

At the end the Lumen Bikes dashboard reads its own data. It shows a loading message while it waits, a clear error box when something is wrong, and a few key numbers when it works. Every later chart builds on this loader.

Phase 4 · the story

Priya, operations lead

“I exported last year's rides from our system, and some of the rows are a mess: can your dashboard read them anyway?”

Priya runs operations at Lumen Bikes. Until now the dashboard has used numbers the team typed in by hand. This week she sends two files from the booking system: a clean export of 365 days, and a March file she calls "the one that made me cry".

In the March file one day has no rides, one has "2,016" with a comma, one is dated 13/03/2025 and another 2025-03-32. A temperature says "n/a", the rain says -1, and one ride lasts 1,240 minutes. She does not want the mess hidden, and she does not want invented numbers either.

By the end of this phase you will be able to read her files on your own computer, tell her exactly which rows were wrong and what you did about each, and give the dashboard a loader that says "loading", "no data" or "could not load" instead of showing a blank page.

In this phase

You will learn

  • Set up Node, npm and Vite on your computer and run the dashboard from a local server
  • Load CSV and JSON with fetch and D3, and handle a wrong path, bad JSON and a network failure
  • Check dates and time zones, clean a messy file with a log, and summarise numbers with d3-array
  • Add a loading message and an error box to the dashboard

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

  • package.json
  • index.html
  • src/main.js
  • src/data/load.js
  • src/data/clean.js
  • src/utils/config.js
  • src/utils/format.js
  • src/charts/rides-line.js
0/7 · 0%
7 topics ~3 h 16 code blocks & diagrams
Start with the first topic
1
4.1

Moving to Your Computer: Node, Vite and npm

A page you double-click cannot read data files or import its own code, because the browser treats file:// pages as unsafe. A small local server (Vite, run by Node) fixes that, and npm fetches D3 for you. This topic sets up the project the rest of the course uses.

29 min 3 code practice

2
4.2

Loading CSV and JSON

Data arrives as text over a network that can fail. fetch and d3.csv bring it in, but you must check the answer, convert text to numbers and dates on purpose, and show loading, empty and error states instead of a blank chart.

26 min 3 code practice

3
4.3

Dates and Time Zones

A timestamp is one exact instant, but the calendar day it falls on depends on whose clock you read. Parse dates with a stated format, format them on a stated clock, and never let a chart silently shift a ride to the wrong day.

23 min 3 code practice

4
4.4

Cleaning Real Data

Real exports have blanks, "n/a", numbers with commas, impossible dates and outliers. Look first, then fix only what is certain, flag what is missing, drop what cannot be placed, never invent values, and keep a log of every change.

26 min 2 code practice

5
4.5

Summarising with d3-array

Charts show summaries: totals, averages, the busiest day, counts per month, how many days fall in each range. d3-array gives short, tested functions for these, and you must know what each returns for empty, missing and text input.

20 min 2 code practice

6
4.6

Data from Cloud Storage (S3 or GCS)

Later the data will live in cloud storage instead of your project folder. Only one line of config changes, but the browser then enforces CORS, caching and size rules you must understand. Keys and secrets never go in frontend code.

21 min 2 code practice

7
4.7

Build: The Dashboard Loads Real Data

Turn the hand-typed dashboard into one that loads its own data: a config file, a loader, a cleaner, number formatting, a loading message, an error box and a row of key numbers. It answers Priya's question: can the dashboard read my exports even when they are messy?

41 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fix the path

The page should show how many stations stations.csv has, but the path has a typo and the page shows an error.

Beginner
2

Numbers, not text

#busiest should show the biggest number of rides in one day, from daily.csv. It shows 910, because the values are text.

Beginner
3

Error and empty states

Two panels load files. #a loads a wrong path, #b loads a CSV with only a header row. Both stay blank.

Intermediate
4

Which local day?

#count should show how many of trips-10k.csv's trips start on 15 June 2025 on the Auckland wall clock (Pacific/Auckland). It counts by the UTC date and shows the wrong number.

Intermediate
5

Clean one number

Write toNumber(text): "1193" gives 1193, "2,016" gives 2016 (a thousands comma), and "" and "n/a" give null (missing, never 0).

Intermediate