#214
Bubble chart
A bubble chart where each of 50 accounts carries a third value that sets the bubble size.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Bubble chart" pattern (@codeatlasdev/ui demo #214, charts/scatter) in my app.
Call get_demo({ ids: ["#214"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Adding a third dimension, such as account size, to a two-axis comparison.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- ScatterChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `data` is 50 `[number, number, number]` triples from `Array.from({ length: 50 }`
- The third value of each point is the bubble size
- `<ScatterChart series={[{ name: 'Accounts', data }]}`
- `yName="Conversion %"` and `yFormatter={(v) => `${v.toFixed(1)}%`}`
- `height="340px"` inside `<Card full>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - ScatterChart
@codeatlasdev/ui/charts
How it is built
- `data` is 50 `[number, number, number]` triples from `Array.from({ length: 50 }`
- The third value of each point is the bubble size
- `<ScatterChart series={[{ name: 'Accounts', data }]}`
- `yName="Conversion %"` and `yFormatter={(v) => `${v.toFixed(1)}%`}`
- `height="340px"` inside `<Card full>`
Related
Loading source.