# sveltevis

> A Svelte component library for composing responsive interactive data visualisations.

Latest version **0.0.16** (published 2025-05-27) · 0 weekly downloads

## Install

```sh
npm install sveltevis
pnpm add sveltevis
yarn add sveltevis
bun add sveltevis
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.16 |
| Published | 2025-05-27 |
| First published | 2025-05-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 76.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | olihawkins |
| Keywords | svelte |

## Links

- npm: https://www.npmjs.com/package/sveltevis
- npm.io page: https://npm.io/package/sveltevis

## Dependencies (3)

- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [d3-shape](https://npm.io/package/d3-shape.md) ^3.2.0
- [@types/d3](https://npm.io/package/@types/d3.md) ^7.4.3

## Recent versions

- 0.0.16 (latest) — 2025-05-27

## README

# SvelteVis

A Svelte component library for composing responsive interactive data visualisations.

https://github.com/olihawkins/sveltevis

## Status

This package is in active development. The API should be regarded as unstable until version 1.0.0. The package supports Svelte 5 and TypeScript.

## Roadmap

The goal of the project is to provide a Svelte component library that allows you to quickly compose a responsive interactive visualisation from a set of components and a JSON object that specifies their behaviour. The components include standard chart elements like axes and gridlines, along with *geometries* that map input data to a specfific visual representation (e.g. points, lines, bars, areas). The library is extensible, so if you want to implement a new kind of visualisation you only need to implement a new geometry for the kind of data represention you want to create. All of the infrastructure for handling responsiveness and interactivity is available via the parent `Visualisation` component's shared context.

The project currently contains the components needed to make responsive scatterplots and line charts. It also includes a system for sending messages between components about events, which is used to implement a `Popup` component. 

### Components completed

- `Visualisation`
- `Header`
- `Footer`
- `Graphic`
- `Svg`
- `Gridlines`
- `AxisX`
- `AxisY`
- `Plot`
- `CircleGeometry`
- `LineGeometry`
- `Popup`
- `ColorSchemeObserver`

## Using the components

If you want to try the existing components, the easiest way right now is to download and run the demo project.

1. Clone the project repository from <a href="https://github.com/olihawkins/sveltevis">GitHub</a>

2. Run `npm install` to install the dependencies

3. Run `npm run dev` to start the demo application on localhost:5173 

It is also possible to install the package from NPM into a Vite Svelte template.

1. Create a Svelte project with Vite using `npm create vite@latest my-svelte-project -- --template svelte`

2. Run `npm install` to install the dependencies

3. Install the package with `npm install sveltevis`

## Styling components

SvelteVis allows you to target the styles used in its components using your own stylesheet, so that the styles of your visualisations match your website. Importing SvelteVis components into a new project doesn't automatically add the default styles used in the demo application. However, if you want to use these stylesheets as a starting point for making modifications, they can be found in the `css` folder: simply copy them as stylesheets to use in your own app. 

The stylesheet for targeting SvelteVis components is called `sveltevis.css` and this is the stylesheet you should modify to implement your own visualisation styles. The `site.css` stylesheet is the css used for the demo application, and it doesn't contain any of the selectors used to target the visualisation components. Both of these default stylesheets are set up to provide alternate light and dark styles based on the operating system mode.

---
_Source: https://npm.io/package/sveltevis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._