Interactive Line Chart
A line chart that reveals daily values through direct pointer and keyboard exploration.
- Category
- Data visualization
- Year
- 2026
- Status
- Experiment
What it is
A compact chart for reading change and inspecting exact values.
The chart shows a fixed set of daily visitor values. Its line and area fill communicate the overall direction, while the tooltip reveals the exact date and value for the active point.
The complete chart is one interactive surface. Moving the pointer scrubs across the data, and keyboard focus provides the same inspection path with the left and right arrow keys.
Design decisions
How the chart keeps overview and detail connected.
Plot-aware scrubbing
Pointer position is mapped to the plotted region rather than the full SVG. This keeps the tooltip aligned with the visible points after accounting for chart margins and the value-label gutter.
Point-anchored tooltip
The tooltip follows both coordinates of the active point and stays above it. Peaks remain visible instead of being covered by a fixed tooltip.
Quiet depth
A low-opacity area gradient supports the line without competing with it. The line stays fully opaque from its first point to its last.
Equivalent input
The chart uses a real button surface with a changing accessible label. Arrow-key inspection exposes the same values available through pointer scrubbing.
Continue exploring
Another direct-manipulation experiment built for pointer and keyboard input.