Reading a filter from the address, safely
The reader never throws: whatever is typed into the address bar becomes a valid filter, and the list says what it had to fix.
Keep every filter in one object that every chart reads, write it into the address so a link recreates the view, let a click on one chart filter the others, and always say what is showing and how to reset it.
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.
Add a minRides filter to readFilter that accepts only integers from 0 to 5000 and ignores the rest. What does ?minRides=-5 give?
Write the sentence for the filter { weekday: "Sat", from: null, to: null }. Which words does a screen reader need that a sighted reader gets from the highlighted bar?
Explain it without notes
Why does the clicked chart skip its own filter in cross-filtering?
Why validate a filter read from the URL?
What should a chart show when the filters leave no rows?
When do you use replaceState and when pushState?
Console
(nothing was printed)Expected console output
?from=2025-06-01&to=2025-06-30&weekday=Sat -> ?from=2025-06-01&to=2025-06-30&weekday=Sat
(empty) -> (no filter)
?from=abc -> (no filter) [from ignored]
?from=2025-02-30 -> (no filter) [from ignored]
?weekday=Funday -> (no filter) [weekday ignored]
?from=2025-09-01&to=2025-06-01 -> ?from=2025-06-01&to=2025-09-01 [range swapped]
?from=2024-12-01&to=2026-03-01 -> ?from=2025-01-01&to=2025-12-31 [from clamped, to clamped]