Chart switch · morph · link
Shot outcomes, as a donut and as columns
A season's shots as a donutChart and as columns on barChart, in one chartSwitch. Each slice turns into its own column and back with morph(), and its labels move with it. Beside it, the same shots as bars are linked with the switch.
Shot outcomes
Switch between share of total and side-by-side counts. The same four shapes morph into each other, so you never lose which slice became which column. Click again mid-way and they go back from where they are. With a slice or column focused, V switches too, and focus follows its outcome.
Linked, largest first
The same shots on barChart, largest first, in one link() with the switch. Hover a bar, or Tab in and use the arrow keys, and its slice or column lights up in whichever view shows; hover a slice or a column, and its bar does. The link takes the switch's view on show, so it holds across a switch.
Two ways to morph
- Drop turns each slice's outer arc into its column's top, so the slice settles onto the baseline.
- Unroll,
morph()'s default, matches each side with the same side. The slice stands up: its outer arc becomes the column's left side, and the angle it spans becomes its height. - Either way, a switch back retraces the same path, from wherever the shapes are.
Design notes
- Each view is a whole chart, with its own legend, tooltip, keyboard order and data table, and only the one showing can be reached or read.
- Each outcome keeps its colour in both views and in the bars beside them: the three charts share one
colorAssignment, and the columns and bars colour by category. - The bars are in a different order from the slices and the columns, so the link goes by outcome, each mark's key, never by place. A linked mark shows no tooltip or focus ring, and nothing is announced: the chart under the pointer or the keyboard says it.
- The old view's legend and table fade out by 40% of the way and the new view's fade in from half way, so for a moment neither shows.
- V on a focused slice or column is how a keyboard user switches and keeps their place.
Things to try
- Switch in each mode: about 950 ms in Presentation, 200 ms in Analysis, and none in Off or under reduced motion.
- Watch the labels: they move with their shapes and swap their text half way, while the centre total fades out and the axes fade in.
- Switch with Drop, then with Unroll, and click again mid-way with each: the shapes go back the way they came.
- Hover a bar beside the switch, then a slice: each lights up its partner. Switch to the columns and try again: the link follows the view on show.