One filter, two charts, an empty state
Every click goes through the same setFilter. The bars ignore the weekday filter, so Saturday stays selectable while it is picked.
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?
Preview
Console
Nothing logged yet.Expected console output
Whole year: 365 days | bars with data: 7 | dots: 365
Saturdays: 52 days | bars with data: 7 | dots: 52
Saturdays, 1 Jun to 30 Jun: 4 days | bars with data: 7 | dots: 4
Saturdays, 2 Jun to 2 Jun: 0 days | bars with data: 1 | dots: 0
empty state visible: true
Saturdays, 1 Jan to 31 Jan: 0 days | bars with data: 0 | dots: 0
NaN in any drawing attribute: false
Whole year: 365 days | bars with data: 7 | dots: 365