Circlepack-canvas

circle packing based on cavas, inspired by:

Zoomable Circle Packing with Canvas & D3.js - I and circlepack-chart

Dataset

{
  "name": "root name",
  "children": [
    {
      "name": "some random title",
      "children": [
        {
          "name": "hi this is the first child",
          "children": [
            {
              "name": "someone",
              "children": [
                {
                  "name": "still on alpha :D",
                  "ID": "1.1.2.1",
                  "size": 101,
                  "children": [
                    {
                     "name": "alpha.1"
                    },
                    {
                     "name": "wip"
                    },
                    {
                     "name": "hopefully beta soon"
                    }
                   ]
                },
                ...
              ...
            ...
          ...
        ...
      ...
    ...
  ...
}

how to use

<div id="chart"></div>

import circlepackCanvas from 'circlepack-canvas'

circlepackCanvas('#chart', {
  dataset,
  // default values
  padding: 1,
  colorRange: ['#9677FF', '#CFC1FB', '#655E7A', '#765DC7', '#4A3A7A', '#A599C7', '#9475FA', '#FFFFFF'],
  value: node => node.size,
  sort: node => node.ID,
  initCirclesDuration: 2000,
})