What problem does it solve?
Building bespoke, interactive data visualisations often requires fine-grained control over SVG elements, transitions, layouts, and user interactions that standard charting libraries cannot provide. This Skill reduces the complexity of implementing custom charts, responsive sizing, advanced interactions (zoom, brush, drag), and accessibility best practices across web frameworks.
Core Features & Use Cases
- Custom chart construction: guidance for bar, line, area, scatter, stacked/grouped bars, and bubble charts with scale selection and axis formatting.
- Advanced layouts and networks: force-directed graphs, chord diagrams, hierarchical trees, treemaps, and sunbursts with data-to-visual mapping patterns.
- Geographic visualisations: projections, choropleths, and point overlays with fitSize and geoPath guidance.
- Interactions & animations: tooltips, zoom/pan, brush, drag, enter/update/exit transitions, and path morphing strategies.
- Performance & accessibility: advice on canvas fallbacks for large datasets, ResizeObserver for responsiveness, ARIA, and color-blind friendly palettes.
- Reusable resources: includes reference patterns, color/scale guides, and sample datasets to bootstrap work.
Quick Start
Create a responsive D3 scatter plot of the provided dataset with tooltips, zoom/pan, and an accessible legend.
