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

Built with Svelte and D3.js

Live demo: openopensource.com

<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
    },
  ]
}

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

• built by tylerb1
• adapted from this demo by Svend3r