Donut, columns and a D3 pie · one effect, any chart
Shot outcomes, three ways
A season's shots on the library's donutChart and barChart, and on a pie drawn with D3. The same effects play on all three with no change to their code. Pick a hover effect, hover or Tab into a chart, then add the next match.
Shot outcomes
The library's own donutChart. The ball rolls round a slice, Wiggle rocks it a few pixels about the centre, and Pulse rings it twice. Next match flashes the slices whose counts changed, one after another (stagger(flash())). In Presentation a new order resizes the slices, then turns them into place.
The same story on a D3 pie
Drawn the way D3 code would draw it, with d3.pie() and d3.arc(). expressive() describes each slice with describe.arc and adds the same effects, dimming and keyboard focus, which goes clockwise from 12 o'clock though d3.pie() returns its arcs in data order. markLabel names the slices as the donut does, and refresh() follows each redraw.
Shot outcomes as columns
The same data and effects on barChart. The columns are one colour: a bar chart colours by series, and this one has a single series, shots. With colorBy: "category" and a shared colorAssignment, each column would take its outcome's colour from the donut, as the morph demo's columns do.
Things to try
- Pick an effect, then hover a slice of the donut, a slice of the D3 pie and a column: the same effect plays on all three. The ball rolls round a slice the way it rolls along a bar.
- Press Next match in Presentation, then in Analysis: the flashes come one after another, then all at once.
- Tab into the donut, then use the arrow keys, Home and End: focus goes round the ring clockwise from 12 o'clock. Escape stops.
- Open the donut's data table: it has a Share column and a total row.