skills.rest
jonathanbelolo
jonathanbeloloCOMMUNITY
Explore all skills by this author →
GitHub

composable-svelte-charts

Build interactive Svelte charts with reducer-driven state and Observable Plot.

3|Updated Oct 26, 2025
Search Tags:#charts#interactive#visualization#charting#Svelte#D3#Observable Plot
One-click install
npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-charts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: composable-svelte-charts
Source: https://github.com/jonathanbelolo/composable-svelte/tree/main/.claude/skills/composable-svelte-charts
Command: npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-charts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a modular, state-driven charting toolkit for building interactive data visualizations in Svelte using Observable Plot and D3.

Core Features & Use Cases

  • Chart types: Scatter, Line, Bar, Area, Histogram
  • Interactive features: Zoom, Brush, Tooltips, and responsive sizing
  • State-driven architecture: Reducer-based data flows with typed actions for predictable updates
  • Reusable Chart component: High-level Chart wrapper designed for dashboards and analytics
  • Use cases: Real-time dashboards, exploratory data analysis, and presentation-ready visuals

Quick Start

Install the charts package and create a chart store to render a chart:

  • Install: npm install @composable-svelte/charts @composable-svelte/core
  • Create store: import { createStore } from '@composable-svelte/core'; import { Chart, chartReducer, createInitialChartState } from '@composable-svelte/charts'; const data = [{x:1,y:2}, {x:2,y:3}]; const chartStore = createStore({ initialState: createInitialChartState({ data }), reducer: chartReducer, dependencies: {} });
  • Render: <Chart store={chartStore} type="scatter" x="x" y="y" />

Frequently Asked Questions about composable-svelte-charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build interactive Svelte charts with Observable Plot?▼

You can build interactive Svelte charts by installing the necessary packages, creating a state store with your dataset, and rendering a high-level Chart component. This reducer-driven system supports various chart types like scatter, line, and bar for analytics dashboards.

What chart types are available for data visualization in Svelte?▼

The toolkit supports scatter, line, bar, area, and histogram chart types for Svelte data visualization. These charts include interactive features like zoom, brush, tooltips, and responsive sizing, making them ideal for dashboards and exploratory data analysis.

How does the reducer-driven architecture work for Svelte data visualizations?▼

The reducer-driven architecture works by using typed actions to predictably update a well-defined ChartState. This state-driven approach ensures modular data flows, allowing developers to manage interactive chart updates predictably using a core store.

Can I use D3 and Observable Plot for responsive dashboards in Svelte?▼

Yes, you can use D3 and Observable Plot for responsive dashboards in Svelte. The toolkit provides responsive sizing alongside interactive features like zoom and brush, specifically designed for building real-time analytics dashboards and presentation-ready visuals.

Do I need to install external dependencies to create Svelte charts?▼

Yes, you need to install @composable-svelte/charts and @composable-svelte/core via npm. These packages provide the necessary Chart component, chartReducer, and createStore functions required to initialize state and render visualizations.

Related Skills

Explore More Data & Analytics Skills→
BaoNguyen09BaoNguyen09
6

install-windows

Install Node.js and project dependencies on Windows with PowerShell.

Community
Intermediate
inbharataiinbharatai
22

dashboard-builder

Build interactive data dashboards and reports with Streamlit and Dash.

Community
Intermediate
syncfusionsyncfusion

syncfusion-aspnetcore-dashboard-layout

Build responsive draggable dashboard layouts for Syncfusion ASP.NET Core.

Official
Advanced
kvnapontekvnaponte

svelte-template-directives

Add reactive template directives for DOM manipulation and library integration in Svelte.

Community
Intermediate