expressive-charts demos

expressive-charts is a library of composable motion and expressive effects for SVG charts. Install it with npm install expressive-charts; its README has a quick start, and the API reference documents every export.

Each page puts the library's own charts beside charts drawn by other code, with the same effects on both. Switch your system between light and dark to see both themes, and turn on reduced motion to see where every effect ends.

• Ball and cleat: a ball rolls along each player's goals and a boot steps along their assists, on barChart and on a hand-written SVG chart through expressive(), with staged sorting and a flash on the bars that change.
• Shot outcomes, three ways: the same effects on donutChart, barChart and a D3 pie through expressive(), with a hover effect picker and staggered flashes after each match.
• Goals vs expected goals, three ways: lineChart, a D3 line through expressive() and a Vega-Lite line through fromVegaView(), each with the goals line red below xG and a ball riding its leading edge. One Play button and scrubber drive the first two.
• Shot outcomes, as a donut and as columns: a donutChart and category columns on barChart in one chartSwitch, each slice turning into its own column and back with morph(), and a control to compare its two mappings.
• The season so far: goals per matchweek on barChart, goals vs xG on lineChart and shots on D3 columns, linked by matchweek with link(); each player's change since the last matchweek rising past their bar with delta(); and a D3 slope chart with each player's change since matchweek 1 written by label(), traced on hover with trace().
• Dots, curves and areas: a scatter, a curved line and an area drawn with D3, and a dot chart drawn with Observable Plot, each attached through expressive(), which reads their circles and paths by tag; the curved line red below xG with a ball riding its tip, and a hover effect picker that swaps the effects in place with update({ on }).
• Stress cases: each case at sizes up to past its limit, with a frame readout: bars that update, hover on a large chart, years of daily values on a date axis played through playback(), D3 columns followed with watch, a switch with many pairs, and the first draw.
• Expressive Chart Lab: the single-file prototype the library grew out of, written before it and without it. Its three cards are bars with ball and cleat hover, a goals vs xG line, and a donut that morphs into bars.