@rokkit/chart

Charts for Svelte

The core idea behind the implementation is to use the respective strengths of both D3 and Svelte to build Themable, Composable, Animated, Responsive, Accessible, and Reactive Data Visualization components.

• D3 makes working with SVG a breeze. It provides a large set of utility functions for graph visualization that includes the computation of scales, interpolation, shapes, and more.
• Svelte makes UI development fun again. It provides modularization, interactivity, reactivity, and responsiveness.

This component library borrows concepts from the following articles, products, and repositories.

• Introduction to Accessible Contrast and Color for Data Visualization by Frank Elavsky
• Animated, Responsive, and Reactive Data Visualization with Svelte
• Barchart Race using Svelte & D3 by Amelia Wattenberger & Russell Goldenberg
• The D3.js Graph Gallery
• DC.js is an awesome implementation of interactive animated charts using D3.

Getting Started

Get started quickly using degit.

degit jerrythomas/sparsh-ui/sites/playground my-app

Features

• [x] Fill patterns
• [x] Symbols
• [x] Colors
• [ ] Themes

Plots

• [x] Box
• [ ] Violin
• [x] Scatter
• [ ] Line
• [ ] Histogram
• [ ] StackedBar
• [ ] Funnel

Chart

• [x] Axis
  • [x] Labels
  • [x] Grid
  • [x] Ticks
• [ ] Margins
• [ ] Legend
• [ ] Composable
• [ ] Facet Grid
• [ ] Combine multiple plots
• [ ] Animation
• [ ] Time lapse
  • [ ] Sliding window
  • [ ] Rolling window