D3 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.

• D3 is a wonderful library for working with SVG that provides large set of utility functions for graph visualization that includes the computation of scales, interpolation, shapes, and more.
• Svelte is an awesome javascript framework to build user interfaces. Svelte provides modularization, interactivity, reactivity, and responsiveness.

This component library has been heavily inspired by the following works, and borrows concepts from them.

• 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/svelte-charts/examples/graphs my-app

Features

• Fill patterns
• Symbols
• Colors
• Themes

Plots

• Box
• Violin
• Scatter
• Line
• Histogram
• StackedBar

All plots are vertical for now.

Chart

• Axis
• Grid
• Margins
• Legend
• Composable
• Combine multiple plots
• Animation
• Time lapse
  • Sliding window
  • Rolling window