What d3.autoType does to cells like Lumen's
Failure cases that print no error: the leading zero vanishes, the comma number stays text, and the impossible date is an Invalid Date rather than an exception.
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
"S01" -> string S01
"07790" -> number 7790
"7790" -> number 7790
"2,016" -> string 2,016
"n/a" -> string n/a
"" -> null null
"-1" -> number -1
"0x1A" -> number 26
"1e3" -> number 1000
"2025" -> number 2025
"true" -> boolean true
"2025-01-01" -> Date 2025-01-01T00:00:00.000Z
"2025-03-32" -> Date Invalid Date
"13/03/2025" -> string 13/03/2025
2025-01-01 as a Date: 2025-01-01T00:00:00.000Z
The same instant on Ardenvale's wall clock: 31 Dec 2024, 23:00