One loader, four page states, eight inputs
Only the last state stays on the page (a green box here), but the console lists all eight. The header-only file is empty, not an error. "another website" is blocked in this preview, like any address outside the site.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write loadCsv(url, columns) that returns the rows of a CSV, throws Error("…") with a clear message for a non-OK status, and throws when any of columns is missing from the header. Test it with /data/lumen/stations.csv and the columns ["id", "name"].
Load stations.csv with a row function so that id, name and district stay text, lon, lat and docks are numbers and opened is a Date. Print the number of stations and the docks of the first one.
Explain it without notes
Why does fetch of a missing file not throw, and what must you check?
What are the four states a data-driven chart should handle, and what does each one show?
Give three ways d3.autoType can silently go wrong on Lumen-like data.
Preview
Console
Nothing logged yet.Expected console output
daily.csv data (365 rows)
a wrong path error: Error: the server answered 404 for /data/lumen/nope.csv
a header-only file empty
another website error: TypeError: Failed to fetch
a CSV read as JSON error: SyntaxError: Unexpected token 'd', "date,rides"... is not valid JSON
a web page read as JSON error: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
a web page read as CSV error: Error: not the file we wanted: no column date, rides
bikes.json data (320 rows)