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