Interaction
Pointer events, tooltips that stay on screen, finding the nearest point, filters, brushing and zooming, and charts that talk to each other, on a phone as well.
A chart you can only look at answers one question. A chart you can point at answers the next one too: what happened on that day, which station is this, what if I zoom into June. This phase adds the questions a reader asks while looking.
You start with what the browser really sends when someone moves a mouse, touches a screen or presses Tab, and with the hidden traps in it: thin lines that are hard to hit, hover that does not exist on a phone, tooltips that fall off the edge of the screen. Then you build the pieces: tooltips, the nearest-point search, highlighting and filtering, d3.brush and d3.zoom, and views that update each other.
At the end the Lumen dashboard becomes an explorer: a crosshair tooltip on the rides line, a brush that picks a range of dates, and station bars that follow the brush. Every interaction also works by touch and by keyboard.
Phase 8 · the story
Priya, operations lead
“I want to point at a day on the chart and see its numbers, and do the same on my phone in the depot.”
The dashboard now draws the year as a line, but Priya has a habit: she points. In the Monday meeting she puts a finger on the dip in August and asks "what was that?". The chart answers only if someone reads the date off the axis and looks the number up in the spreadsheet.
She also works from the depot with a phone, where there is no mouse. "If it only works when I hover, it does not work for me," she says. And she wants to select a few weeks and see which stations were busy in them.
In this phase the team adds tooltips, a crosshair that finds the nearest day, a brush to pick dates and bars that react to the pick. By the end Priya can point at a day, drag across a month and see the stations change, with a finger, a mouse or the keyboard.
In this phase
You will learn
- Handle mouse, touch and pen with one set of pointer events, and turn pointer positions into data values
- Build tooltips that stay on screen and work by tap and by keyboard, and find the nearest point without the silent wrong answer
- Filter and highlight from one state object, and use d3.brush and d3.zoom with their limits
- Link several charts to one selection, and keep the selection in the URL
You write code in
In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page
Files you touch
- src/parts/tooltip.js
- src/charts/rides-line.js
- src/charts/stations-bar.js
- src/main.js
Practise this phase
Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.