svelte-zoomable-circles

A Svelte.js component for displaying and browsing hierarchical data using zoomable circles

Built with Svelte and D3.js

demo

Live demo: 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
• adapted from this demo by Svend3r