composable-svelte-charts_skill

Overview

This skill provides state-driven, interactive chart components for Composable Svelte built with Observable Plot and D3. It delivers scatter, line, bar, area, and histogram charts with built-in interactions (zoom, brush, tooltips), responsive sizing, and type-safe state management. Use it to embed production-ready visualizations that update from application state and streams.

How this skill works

Charts are rendered via a high-level Chart component that consumes a Chart store created with createInitialChartState and chartReducer. The component builds an Observable Plot spec and uses D3 utilities for scales and interactions; state changes (data, zoom, selection, dimensions) are dispatched as typed ChartAction values. Interactive features (zoom, brush, tooltips) update the store so UI and logic stay in sync.

When to use it

• You need declarative, interactive charts in a Svelte app.
• Charts must respond to application state or real-time data streams.
• You require accessible, keyboard-navigable visualizations.
• You want composable chart types with consistent APIs (scatter, line, bar, area, histogram).
• You need programmatic control over zoom, selection, or filtering.

Best practices

• Provide explicit x and y accessors or functions to avoid ambiguous parsing.
• Sort time-series data before rendering line/area charts for correct paths.
• Prefer responsive layout (omit width/height) for container-driven sizing and mobile support.
• Use enableBrush for multi-point selection and onSelectionChange to lift selections to parent logic.
• Customize tooltips via the Plot spec for meaningful, accessible hover content.

Example use cases

• Interactive scatter to explore correlations with zoom and tooltips in an analytics dashboard.
• Time series line chart with pan/zoom and multiple series colored by a key.
• Bar chart for categorical comparisons with brush selection to filter other UI components.
• Area chart showing stacked cumulative values with responsive resizing for reports.
• Histogram to inspect distribution and adjust binning via state actions in an ETL tool.