<script>
  import { InternSet, hierarchy, pack, range, scaleOrdinal, schemeTableau10 } from 'd3';
  import data from './bubble-data' // or pass data to component as prop
  
  const width = $ChartDocs[0].value; //the margin top, bottom, left, right margin offset relative to the radius
  const padding = $ChartDocs[1].value; // the all padding all around each circle, in pixels
  const margin = $ChartDocs[2].value; // the all margin all around, in pixels
  const textColor = $ChartDocs[3].value; //the color of the text
  const fill = $ChartDocs[4].value; // a static fill color, if no group channel is specified
  const fillOpacity = $ChartDocs[5].value; // the fill opacity of the bubbles
  const strokeColor = $ChartDocs[6].value; // a static stroke around the bubbles
  const strokeWidth = $ChartDocs[7].value; // the stroke width around the bubbles, if any
  const strokeOpacity = $ChartDocs[8].value; // the stroke opacity around the bubbles, if any
  const height = width; // the outer height of the chart, in pixels
  const marginLeft = margin; // the left margin, in pixels
  const marginRight = margin; // the right margin, in pixels
  const marginTop = margin; // the top margin, in pixels
  const marginBottom = margin; // the bottom margin, in pixels

  //update link to the desired address path or remove.
  const link = (d) => `https://github.com/prefuse/Flare/blob/master/flare/src/${d.id.replace(/\./g, '/')}.as`;

  // Compute the values.
  const dVals = data.map((el) => el);
  const vVals = data.map((el) => el.value);
  const gVals = data.map((el) => el.id.split('.')[1]);
  const iVals = range(vVals.length).filter(i => vVals[i] > 0);

  let groups = iVals.map(i => gVals[i]);
  groups = new InternSet(groups);

  const colorScale = scaleOrdinal(groups, schemeTableau10);  

  // // Compute labels.
  const lVals = data.map((el) => [...el.id.split('.').pop().split(/(?=[A-Z][a-z])/g), el.value.toLocaleString('en')].join('\n'));
  const tVals = data.map((el) => `${el.id}\n${el.value.toLocaleString('en')}`);

  const uid = `O-${Math.random().toString(16).slice(2)}`;

  const root = pack()
  .size([width - marginLeft - marginRight, height - marginTop - marginBottom])
  .padding(padding)
  (hierarchy({children: iVals})
      .sum(i => vVals[i]));
</script>
  
<svg {width} {height} viewBox="{-marginLeft} {-marginTop} {width} {height}" fill={textColor}>
    {#each root.leaves() as leaf, i}
      <a href={link === null ? null : link(dVals[leaf.data])} target="_blank" rel="noopener noreferrer">
        <g class='node' transform="translate({(leaf.x)},{(leaf.y)})">
          <circle id="node-{i}"
            stroke={strokeColor} stroke-width={strokeWidth} stroke-opacity={strokeOpacity}
            fill={gVals ? colorScale(gVals[leaf.data]) : fill == null ? 'none' : fill}
            fill-opacity={fillOpacity}
            r={leaf.r}
          >
            <title>{tVals[i]}</title>
          </circle>
          <clipPath id={`${uid}-clip-${leaf.data}`}>
            <circle r={leaf.r}></circle>
          </clipPath>
          <text clip-path={`url(${new URL(`#${uid}-clip-${leaf.data}`, location)})`}>
            {#each `${lVals[leaf.data]}`.split(/\n/g) as subtext, j}
              <tspan 
                x='0'  
                y={`${j - `${lVals[leaf.data]}`.split(/\n/g).length / 2 + 0.85}em`}
                fill-opacity={j === `${lVals[leaf.data]}`.split(/\n/g).length - 1 ? 0.7 : null}
                font-size={leaf.r * 0.3}
              >
                {subtext}
              </tspan>
            {/each}
          </text>
        </g>
      </a>
    {/each}
</svg>

<style>
  svg {
    max-width: 100%;
    height: auto;
    height: intrinsic;
    font-size: 10;
    font-family: sans-serif;
    text-anchor: middle;
  }

  .node {
    cursor: pointer;
  }

  .node:hover {
    font-weight: 700;
  }
</style>

export default [
    {
      'id': 'flare.analytics.cluster.AgglomerativeCluster',
      'value': 3938
    },
    {
      'id': 'flare.analytics.cluster.CommunityStructure',
      'value': 3812
    },
    {
      'id': 'flare.analytics.cluster.HierarchicalCluster',
      'value': 6714
    },
    {
      'id': 'flare.analytics.cluster.MergeEdge',
      'value': 743
    },
    {
      'id': 'flare.analytics.graph.BetweennessCentrality',
      'value': 3534
    },
    {
      'id': 'flare.analytics.graph.LinkDistance',
      'value': 5731
    },
    {
      'id': 'flare.analytics.graph.MaxFlowMinCut',
      'value': 7840
    },
    {
      'id': 'flare.analytics.graph.ShortestPaths',
      'value': 5914
    },
    {
      'id': 'flare.analytics.graph.SpanningTree',
      'value': 3416
    },
    {
      'id': 'flare.analytics.optimization.AspectRatioBanker',
      'value': 7074
    },
    {
      'id': 'flare.animate.Easing',
      'value': 17010
    },
    {
      'id': 'flare.animate.FunctionSequence',
      'value': 5842
    },
    {
      'id': 'flare.animate.interpolate.ArrayInterpolator',
      'value': 1983
    },
    {
      'id': 'flare.animate.interpolate.ColorInterpolator',
      'value': 2047
    },
    {
      'id': 'flare.animate.interpolate.DateInterpolator',
      'value': 1375
    },
    {
      'id': 'flare.animate.interpolate.Interpolator',
      'value': 8746
    },
    {
      'id': 'flare.animate.interpolate.MatrixInterpolator',
      'value': 2202
    },
    {
      'id': 'flare.animate.interpolate.NumberInterpolator',
      'value': 1382
    },
    {
      'id': 'flare.animate.interpolate.ObjectInterpolator',
      'value': 1629
    },
    {
      'id': 'flare.animate.interpolate.PointInterpolator',
      'value': 1675
    },
    {
      'id': 'flare.animate.interpolate.RectangleInterpolator',
      'value': 2042
    },
    {
      'id': 'flare.animate.ISchedulable',
      'value': 1041
    },
    {
      'id': 'flare.animate.Parallel',
      'value': 5176
    },
    {
      'id': 'flare.animate.Pause',
      'value': 449
    },
    {
      'id': 'flare.animate.Scheduler',
      'value': 5593
    },
    {
      'id': 'flare.animate.Sequence',
      'value': 5534
    },
    {
      'id': 'flare.animate.Transition',
      'value': 9201
    },
    {
      'id': 'flare.animate.Transitioner',
      'value': 19975
    },
    {
      'id': 'flare.animate.TransitionEvent',
      'value': 1116
    },
    {
      'id': 'flare.animate.Tween',
      'value': 6006
    },
    {
      'id': 'flare.data.converters.Converters',
      'value': 721
    },
    {
      'id': 'flare.data.converters.DelimitedTextConverter',
      'value': 4294
    },
    {
      'id': 'flare.data.converters.GraphMLConverter',
      'value': 9800
    },
    {
      'id': 'flare.data.converters.IDataConverter',
      'value': 1314
    },
    {
      'id': 'flare.data.converters.JSONConverter',
      'value': 2220
    },
    {
      'id': 'flare.data.DataField',
      'value': 1759
    },
    {
      'id': 'flare.data.DataSchema',
      'value': 2165
    },
    {
      'id': 'flare.data.DataSet',
      'value': 586
    },
    {
      'id': 'flare.data.DataSource',
      'value': 3331
    },
    {
      'id': 'flare.data.DataTable',
      'value': 772
    },
    {
      'id': 'flare.data.DataUtil',
      'value': 3322
    },
    {
      'id': 'flare.display.DirtySprite',
      'value': 8833
    },
    {
      'id': 'flare.display.LineSprite',
      'value': 1732
    },
    {
      'id': 'flare.display.RectSprite',
      'value': 3623
    },
    {
      'id': 'flare.display.TextSprite',
      'value': 10066
    },
    {
      'id': 'flare.flex.FlareVis',
      'value': 4116
    },
    {
      'id': 'flare.physics.DragForce',
      'value': 1082
    },
    {
      'id': 'flare.physics.GravityForce',
      'value': 1336
    },
    {
      'id': 'flare.physics.IForce',
      'value': 319
    },
    {
      'id': 'flare.physics.NBodyForce',
      'value': 10498
    },
    {
      'id': 'flare.physics.Particle',
      'value': 2822
    },
    {
      'id': 'flare.physics.Simulation',
      'value': 9983
    },
    {
      'id': 'flare.physics.Spring',
      'value': 2213
    },
    {
      'id': 'flare.physics.SpringForce',
      'value': 1681
    },
    {
      'id': 'flare.query.AggregateExpression',
      'value': 1616
    },
    {
      'id': 'flare.query.And',
      'value': 1027
    },
    {
      'id': 'flare.query.Arithmetic',
      'value': 3891
    },
    {
      'id': 'flare.query.Average',
      'value': 891
    },
    {
      'id': 'flare.query.BinaryExpression',
      'value': 2893
    },
    {
      'id': 'flare.query.Comparison',
      'value': 5103
    },
    {
      'id': 'flare.query.CompositeExpression',
      'value': 3677
    },
    {
      'id': 'flare.query.Count',
      'value': 781
    },
    {
      'id': 'flare.query.DateUtil',
      'value': 4141
    },
    {
      'id': 'flare.query.Distinct',
      'value': 933
    },
    {
      'id': 'flare.query.Expression',
      'value': 5130
    },
    {
      'id': 'flare.query.ExpressionIterator',
      'value': 3617
    },
    {
      'id': 'flare.query.Fn',
      'value': 3240
    },
    {
      'id': 'flare.query.If',
      'value': 2732
    },
    {
      'id': 'flare.query.IsA',
      'value': 2039
    },
    {
      'id': 'flare.query.Literal',
      'value': 1214
    },
    {
      'id': 'flare.query.Match',
      'value': 3748
    },
    {
      'id': 'flare.query.Maximum',
      'value': 843
    },
    {
      'id': 'flare.query.methods.add',
      'value': 593
    },
    {
      'id': 'flare.query.methods.and',
      'value': 330
    },
    {
      'id': 'flare.query.methods.average',
      'value': 287
    },
    {
      'id': 'flare.query.methods.count',
      'value': 277
    },
    {
      'id': 'flare.query.methods.distinct',
      'value': 292
    },
    {
      'id': 'flare.query.methods.div',
      'value': 595
    },
    {
      'id': 'flare.query.methods.eq',
      'value': 594
    },
    {
      'id': 'flare.query.methods.fn',
      'value': 460
    },
    {
      'id': 'flare.query.methods.gt',
      'value': 603
    },
    {
      'id': 'flare.query.methods.gte',
      'value': 625
    },
    {
      'id': 'flare.query.methods.iff',
      'value': 748
    },
    {
      'id': 'flare.query.methods.isa',
      'value': 461
    },
    {
      'id': 'flare.query.methods.lt',
      'value': 597
    },
    {
      'id': 'flare.query.methods.lte',
      'value': 619
    },
    {
      'id': 'flare.query.methods.max',
      'value': 283
    },
    {
      'id': 'flare.query.methods.min',
      'value': 283
    },
    {
      'id': 'flare.query.methods.mod',
      'value': 591
    },
    {
      'id': 'flare.query.methods.mul',
      'value': 603
    },
    {
      'id': 'flare.query.methods.neq',
      'value': 599
    },
    {
      'id': 'flare.query.methods.not',
      'value': 386
    },
    {
      'id': 'flare.query.methods.or',
      'value': 323
    },
    {
      'id': 'flare.query.methods.orderby',
      'value': 307
    },
    {
      'id': 'flare.query.methods.range',
      'value': 772
    },
    {
      'id': 'flare.query.methods.select',
      'value': 296
    },
    {
      'id': 'flare.query.methods.stddev',
      'value': 363
    },
    {
      'id': 'flare.query.methods.sub',
      'value': 600
    },
    {
      'id': 'flare.query.methods.sum',
      'value': 280
    },
    {
      'id': 'flare.query.methods.update',
      'value': 307
    },
    {
      'id': 'flare.query.methods.variance',
      'value': 335
    },
    {
      'id': 'flare.query.methods.where',
      'value': 299
    },
    {
      'id': 'flare.query.methods.xor',
      'value': 354
    },
    {
      'id': 'flare.query.methods._',
      'value': 264
    },
    {
      'id': 'flare.query.Minimum',
      'value': 843
    },
    {
      'id': 'flare.query.Not',
      'value': 1554
    },
    {
      'id': 'flare.query.Or',
      'value': 970
    },
    {
      'id': 'flare.query.Query',
      'value': 13896
    },
    {
      'id': 'flare.query.Range',
      'value': 1594
    },
    {
      'id': 'flare.query.StringUtil',
      'value': 4130
    },
    {
      'id': 'flare.query.Sum',
      'value': 791
    },
    {
      'id': 'flare.query.Variable',
      'value': 1124
    },
    {
      'id': 'flare.query.Variance',
      'value': 1876
    },
    {
      'id': 'flare.query.Xor',
      'value': 1101
    },
    {
      'id': 'flare.scale.IScaleMap',
      'value': 2105
    },
    {
      'id': 'flare.scale.LinearScale',
      'value': 1316
    },
    {
      'id': 'flare.scale.LogScale',
      'value': 3151
    },
    {
      'id': 'flare.scale.OrdinalScale',
      'value': 3770
    },
    {
      'id': 'flare.scale.QuantileScale',
      'value': 2435
    },
    {
      'id': 'flare.scale.QuantitativeScale',
      'value': 4839
    },
    {
      'id': 'flare.scale.RootScale',
      'value': 1756
    },
    {
      'id': 'flare.scale.Scale',
      'value': 4268
    },
    {
      'id': 'flare.scale.ScaleType',
      'value': 1821
    },
    {
      'id': 'flare.scale.TimeScale',
      'value': 5833
    },
    {
      'id': 'flare.util.Arrays',
      'value': 8258
    },
    {
      'id': 'flare.util.Colors',
      'value': 10001
    },
    {
      'id': 'flare.util.Dates',
      'value': 8217
    },
    {
      'id': 'flare.util.Displays',
      'value': 12555
    },
    {
      'id': 'flare.util.Filter',
      'value': 2324
    },
    {
      'id': 'flare.util.Geometry',
      'value': 10993
    },
    {
      'id': 'flare.util.heap.FibonacciHeap',
      'value': 9354
    },
    {
      'id': 'flare.util.heap.HeapNode',
      'value': 1233
    },
    {
      'id': 'flare.util.IEvaluable',
      'value': 335
    },
    {
      'id': 'flare.util.IPredicate',
      'value': 383
    },
    {
      'id': 'flare.util.IValueProxy',
      'value': 874
    },
    {
      'id': 'flare.util.math.DenseMatrix',
      'value': 3165
    },
    {
      'id': 'flare.util.math.IMatrix',
      'value': 2815
    },
    {
      'id': 'flare.util.math.SparseMatrix',
      'value': 3366
    },
    {
      'id': 'flare.util.Maths',
      'value': 17705
    },
    {
      'id': 'flare.util.Orientation',
      'value': 1486
    },
    {
      'id': 'flare.util.palette.ColorPalette',
      'value': 6367
    },
    {
      'id': 'flare.util.palette.Palette',
      'value': 1229
    },
    {
      'id': 'flare.util.palette.ShapePalette',
      'value': 2059
    },
    {
      'id': 'flare.util.palette.SizePalette',
      'value': 2291
    },
    {
      'id': 'flare.util.Property',
      'value': 5559
    },
    {
      'id': 'flare.util.Shapes',
      'value': 19118
    },
    {
      'id': 'flare.util.Sort',
      'value': 6887
    },
    {
      'id': 'flare.util.Stats',
      'value': 6557
    },
    {
      'id': 'flare.util.Strings',
      'value': 22026
    },
    {
      'id': 'flare.vis.axis.Axes',
      'value': 1302
    },
    {
      'id': 'flare.vis.axis.Axis',
      'value': 24593
    },
    {
      'id': 'flare.vis.axis.AxisGridLine',
      'value': 652
    },
    {
      'id': 'flare.vis.axis.AxisLabel',
      'value': 636
    },
    {
      'id': 'flare.vis.axis.CartesianAxes',
      'value': 6703
    },
    {
      'id': 'flare.vis.controls.AnchorControl',
      'value': 2138
    },
    {
      'id': 'flare.vis.controls.ClickControl',
      'value': 3824
    },
    {
      'id': 'flare.vis.controls.Control',
      'value': 1353
    },
    {
      'id': 'flare.vis.controls.ControlList',
      'value': 4665
    },
    {
      'id': 'flare.vis.controls.DragControl',
      'value': 2649
    },
    {
      'id': 'flare.vis.controls.ExpandControl',
      'value': 2832
    },
    {
      'id': 'flare.vis.controls.HoverControl',
      'value': 4896
    },
    {
      'id': 'flare.vis.controls.IControl',
      'value': 763
    },
    {
      'id': 'flare.vis.controls.PanZoomControl',
      'value': 5222
    },
    {
      'id': 'flare.vis.controls.SelectionControl',
      'value': 7862
    },
    {
      'id': 'flare.vis.controls.TooltipControl',
      'value': 8435
    },
    {
      'id': 'flare.vis.data.Data',
      'value': 20544
    },
    {
      'id': 'flare.vis.data.DataList',
      'value': 19788
    },
    {
      'id': 'flare.vis.data.DataSprite',
      'value': 10349
    },
    {
      'id': 'flare.vis.data.EdgeSprite',
      'value': 3301
    },
    {
      'id': 'flare.vis.data.NodeSprite',
      'value': 19382
    },
    {
      'id': 'flare.vis.data.render.ArrowType',
      'value': 698
    },
    {
      'id': 'flare.vis.data.render.EdgeRenderer',
      'value': 5569
    },
    {
      'id': 'flare.vis.data.render.IRenderer',
      'value': 353
    },
    {
      'id': 'flare.vis.data.render.ShapeRenderer',
      'value': 2247
    },
    {
      'id': 'flare.vis.data.ScaleBinding',
      'value': 11275
    },
    {
      'id': 'flare.vis.data.Tree',
      'value': 7147
    },
    {
      'id': 'flare.vis.data.TreeBuilder',
      'value': 9930
    },
    {
      'id': 'flare.vis.events.DataEvent',
      'value': 2313
    },
    {
      'id': 'flare.vis.events.SelectionEvent',
      'value': 1880
    },
    {
      'id': 'flare.vis.events.TooltipEvent',
      'value': 1701
    },
    {
      'id': 'flare.vis.events.VisualizationEvent',
      'value': 1117
    },
    {
      'id': 'flare.vis.legend.Legend',
      'value': 20859
    },
    {
      'id': 'flare.vis.legend.LegendItem',
      'value': 4614
    },
    {
      'id': 'flare.vis.legend.LegendRange',
      'value': 10530
    },
    {
      'id': 'flare.vis.operator.distortion.BifocalDistortion',
      'value': 4461
    },
    {
      'id': 'flare.vis.operator.distortion.Distortion',
      'value': 6314
    },
    {
      'id': 'flare.vis.operator.distortion.FisheyeDistortion',
      'value': 3444
    },
    {
      'id': 'flare.vis.operator.encoder.ColorEncoder',
      'value': 3179
    },
    {
      'id': 'flare.vis.operator.encoder.Encoder',
      'value': 4060
    },
    {
      'id': 'flare.vis.operator.encoder.PropertyEncoder',
      'value': 4138
    },
    {
      'id': 'flare.vis.operator.encoder.ShapeEncoder',
      'value': 1690
    },
    {
      'id': 'flare.vis.operator.encoder.SizeEncoder',
      'value': 1830
    },
    {
      'id': 'flare.vis.operator.filter.FisheyeTreeFilter',
      'value': 5219
    },
    {
      'id': 'flare.vis.operator.filter.GraphDistanceFilter',
      'value': 3165
    },
    {
      'id': 'flare.vis.operator.filter.VisibilityFilter',
      'value': 3509
    },
    {
      'id': 'flare.vis.operator.IOperator',
      'value': 1286
    },
    {
      'id': 'flare.vis.operator.label.Labeler',
      'value': 9956
    },
    {
      'id': 'flare.vis.operator.label.RadialLabeler',
      'value': 3899
    },
    {
      'id': 'flare.vis.operator.label.StackedAreaLabeler',
      'value': 3202
    },
    {
      'id': 'flare.vis.operator.layout.AxisLayout',
      'value': 6725
    },
    {
      'id': 'flare.vis.operator.layout.BundledEdgeRouter',
      'value': 3727
    },
    {
      'id': 'flare.vis.operator.layout.CircleLayout',
      'value': 9317
    },
    {
      'id': 'flare.vis.operator.layout.CirclePackingLayout',
      'value': 12003
    },
    {
      'id': 'flare.vis.operator.layout.DendrogramLayout',
      'value': 4853
    },
    {
      'id': 'flare.vis.operator.layout.ForceDirectedLayout',
      'value': 8411
    },
    {
      'id': 'flare.vis.operator.layout.IcicleTreeLayout',
      'value': 4864
    },
    {
      'id': 'flare.vis.operator.layout.IndentedTreeLayout',
      'value': 3174
    },
    {
      'id': 'flare.vis.operator.layout.Layout',
      'value': 7881
    },
    {
      'id': 'flare.vis.operator.layout.NodeLinkTreeLayout',
      'value': 12870
    },
    {
      'id': 'flare.vis.operator.layout.PieLayout',
      'value': 2728
    },
    {
      'id': 'flare.vis.operator.layout.RadialTreeLayout',
      'value': 12348
    },
    {
      'id': 'flare.vis.operator.layout.RandomLayout',
      'value': 870
    },
    {
      'id': 'flare.vis.operator.layout.StackedAreaLayout',
      'value': 9121
    },
    {
      'id': 'flare.vis.operator.layout.TreeMapLayout',
      'value': 9191
    },
    {
      'id': 'flare.vis.operator.Operator',
      'value': 2490
    },
    {
      'id': 'flare.vis.operator.OperatorList',
      'value': 5248
    },
    {
      'id': 'flare.vis.operator.OperatorSequence',
      'value': 4190
    },
    {
      'id': 'flare.vis.operator.OperatorSwitch',
      'value': 2581
    },
    {
      'id': 'flare.vis.operator.SortOperator',
      'value': 2023
    },
    {
      'id': 'flare.vis.Visualization',
      'value': 16540
    }
  ];
  

const data = [
    {
      'id': 'path',
      'value': value
    },
    {
      'id': 'path',
      'value': value
    },
    //insert additional object data sets
  ];