# svelte-zoomable-circles

> A [Svelte.js](https://svelte.dev/) component for displaying and browsing hierarchical data using zoomable circles

Latest version **0.0.4** (published 2024-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-zoomable-circles
pnpm add svelte-zoomable-circles
yarn add svelte-zoomable-circles
bun add svelte-zoomable-circles
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2024-03-31 |
| First published | 2024-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tjb111 |
| Keywords | svelte, zoom, circle, d3, dataviz, component |

## Links

- npm: https://www.npmjs.com/package/svelte-zoomable-circles
- npm.io page: https://npm.io/package/svelte-zoomable-circles

## Dependencies (4)

- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [d3-hierarchy](https://npm.io/package/d3-hierarchy.md) ^3.1.2
- [d3-transition](https://npm.io/package/d3-transition.md) ^3.0.1
- [d3-interpolate](https://npm.io/package/d3-interpolate.md) ^3.0.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2024-03-31
- 0.0.3 — 2024-03-31
- 0.0.2 — 2024-03-30
- 0.0.1 — 2024-03-30

## README

# svelte-zoomable-circles

A [Svelte.js](https://svelte.dev/) component for displaying and browsing hierarchical data using zoomable circles

Built with Svelte and D3.js

# demo

![demo](https://i.imgur.com/Yi82D5L.gif)

Live demo: [openopensource.com](https://openopensource.com) 

# usage

```
<script>
	import ZoomableCircles from "svelte-zoomable-circles";
</script>

<ZoomableCircles tree={treeObject} />
```

The `tree` object must be a JSON object in the following format:

```
export const sampleTree = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        {
          name: "Child 1.1",
          value: 1000
        },
        {
          name: "Child 1.2",
          value: 500
        },
        {
          name: "Child 1.3",
          value: 250
        },
      ]
    },
    {
      name: "Child2",
      value: 800
    },
    {
      name: "Child3",
      value: 600
    },
  ]
}

```

# props

| Prop                      | Type                  | Default         | Description                                   | 
|---------------------------|-----------------------|-----------------|-----------------------------------------------|
| `tree`                    | `object`              | `sampleTree`    | Component data                                |
| `svgHeight`               | `number`              | `300`           | Container height                              |
| `svgWidth`                | `number`              | `300`           | Container width                               |
| `startColor`              | `string (hex code)`   | `#555`          | Start color for node color gradient           |
| `endColor`                | `string (hex code)`   | `#ccc`          | End color for node gradient                   |
| `textFillColor`           | `string (hex code)`   | `#000`          | Color of node labels                          |
| `circleHoverStrokeColor`  | `string (hex code)`   | `#000`          | Color of circle outline on hover              |
| `circleHoverStrokeWidth`  | `number`              | `3`             | Width of circle outline on hover in px        |
| `textFontSize`            | `number`              | `25`            | Size of label font in px                      |
| `padding`                 | `number`              | `100`           | Transition duration (ms)                      |
| `zoomDurationMs`          | `number`              | `500`           | Enables autoplay of pages                     |

# authors

- built by [tylerb1](https://github.com/tylerb1) 
- adapted from [this demo](https://svend3r.dev/charts/circlePack) by Svend3r

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