Zoomable Circle Packing

.block

license: gpl-3.0
height: 960
redirect: https://observablehq.com/@d3/d3-zoomable-circle-packing

README.md

Click on any package to zoom in or out. See also this static circle packing example.

flare.json

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

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  cursor: pointer;
}

.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.node--leaf {
  fill: white;
}

.label {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
  pointer-events: none;
}

</style>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = 20,
    diameter = +svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var color = d3.scaleLinear()
    .domain([-1, 5])
    .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
    .interpolate(d3.interpolateHcl);

var pack = d3.pack()
    .size([diameter - margin, diameter - margin])
    .padding(2);

d3.json("flare.json", function(error, root) {
  if (error) throw error;

  root = d3.hierarchy(root)
      .sum(function(d) { return d.size; })
      .sort(function(a, b) { return b.value - a.value; });

  var focus = root,
      nodes = pack(root).descendants(),
      view;

  var circle = g.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
      .style("fill", function(d) { return d.children ? color(d.depth) : null; })
      .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

  var text = g.selectAll("text")
    .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
      .text(function(d) { return d.data.name; });

  var node = g.selectAll("circle,text");

  svg
      .style("background", color(-1))
      .on("click", function() { zoom(root); });

  zoomTo([root.x, root.y, root.r * 2 + margin]);

  function zoom(d) {
    var focus0 = focus; focus = d;

    var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
          return function(t) { zoomTo(i(t)); };
        });

    transition.selectAll("text")
      .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
        .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
  }

  function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });
  }
});

</script>

thumbnail.png

I have a json with 2 levels of information:
I would like to build the next draw:

• On the first level, some circles as in this example, with the size variable (especified in the json), for example, put as circles (CL01, CL02, ...)
• On the second level, in spite of more circles inside to another circle, put a word cloud, I mean, inside the first circle, a wordcloud with the words: ingreso, cero, operacion, ....

How can I do this?

JSON:
[{"cluster":"CL01 (Nº Documentos: 548) - ingreso cero cajero operacion ","size":"548","topics":
[{"name": "ingreso", "size": 27.0}, {"name": "cero", "size": 20.0}, {"name": "operacion", "size": 20.0}, {"name": "cajero", "size": 15.0}, {"name": "cobro", "size": 15.0}, {"name": "ventanilla", "size": 13.0}, {"name": "incumplimiento", "size": 11.0}, {"name": "caso", "size": 11.0}, {"name": "euros", "size": 11.0}, {"name": "gracias", "size": 11.0}, {"name": "reintegros", "size": 11.0}, {"name": "recibo", "size": 11.0}, {"name": "pantalla", "size": 11.0}, {"name": "vez", "size": 11.0}, {"name": "aviso", "size": 11.0}, {"name": "senal", "size": 11.0}, {"name": "incidencias", "size": 11.0}, {"name": "09", "size": 11.0}, {"name": "mas", "size": 11.0}, {"name": "sistema", "size": 11.0}]},
{"cluster":"CL02(286) - amb els client clients ","size":"286","topics":
[{"name": "amb", "size": 14.0}, {"name": "client", "size": 14.0}, {"name": "els", "size": 14.0}, {"name": "clients", "size": 14.0}, {"name": "ens", "size": 14.0}, {"name": "fer", "size": 14.0}, {"name": "mes", "size": 14.0}, {"name": "ho", "size": 14.0}, {"name": "molt", "size": 14.0}, {"name": "com", "size": 14.0}, {"name": "quan", "size": 14.0}, {"name": "ja", "size": 14.0}, {"name": "hi", "size": 14.0}, {"name": "dia", "size": 14.0}, {"name": "li", "size": 14.0}, {"name": "poder", "size": 14.0}, {"name": "dels", "size": 14.0}, {"name": "aquesta", "size": 14.0}, {"name": "aquest", "size": 14.0}, {"name": "03", "size": 14.0}]},
{"cluster":"CL03(492) - documento firma datos dni ","size":"492","topics":
[{"name": "documento", "size": 24.0}, {"name": "datos", "size": 24.0}, {"name": "persona", "size": 24.0}, {"name": "fecha", "size": 24.0}, {"name": "dni", "size": 24.0}, {"name": "regalo", "size": 24.0}, {"name": "vez", "size": 24.0}, {"name": "dia", "size": 24.0}, {"name": "firma", "size": 24.0}, {"name": "02", "size": 24.0}, {"name": "caso", "size": 24.0}, {"name": "empresas", "size": 24.0}, {"name": "nombre", "size": 24.0}, {"name": "poder", "size": 24.0}, {"name": "documentacion", "size": 24.0}, {"name": "producto", "size": 24.0}, {"name": "01", "size": 24.0}, {"name": "mas", "size": 24.0}, {"name": "puntos", "size": 24.0}, {"name": "sistema", "size": 24.0}]},
{"cluster":"CL04(485) - plan fondos producto inversion ","size":"485","topics":
[{"name": "plan", "size": 24.0}, {"name": "producto", "size": 24.0}, {"name": "fondos", "size": 24.0}, {"name": "pension", "size": 24.0}, {"name": "ficha", "size": 24.0}, {"name": "inversion", "size": 24.0}, {"name": "valor", "size": 24.0}, {"name": "contrato", "size": 24.0}, {"name": "saldo", "size": 24.0}, {"name": "venta", "size": 24.0}, {"name": "11", "size": 24.0}, {"name": "ejemplo", "size": 24.0}, {"name": "informacion", "size": 24.0}, {"name": "expediente", "size": 24.0}, {"name": "poder", "size": 24.0}, {"name": "aportaciones", "size": 24.0}, {"name": "orden", "size": 24.0}, {"name": "gracias", "size": 24.0}, {"name": "caso", "size": 24.0}, {"name": "renta", "size": 24.0}]},
{"cluster":"CL05(423) - bolsa empresas entidad mas ","size":"423","topics":
[{"name": "bolsa", "size": 21.0}, {"name": "mas", "size": 21.0}, {"name": "empresas", "size": 21.0}, {"name": "entidad", "size": 21.0}, {"name": "ser", "size": 21.0}, {"name": "servicio", "size": 21.0}, {"name": "informacion", "size": 21.0}, {"name": "producto", "size": 21.0}, {"name": "ano", "size": 21.0}, {"name": "son", "size": 21.0}, {"name": "caso", "size": 21.0}, {"name": "mes", "size": 21.0}, {"name": "forma", "size": 21.0}, {"name": "poder", "size": 21.0}, {"name": "vez", "size": 21.0}, {"name": "negocio", "size": 21.0}, {"name": "banca", "size": 21.0}, {"name": "pacto", "size": 21.0}, {"name": "vinculacion", "size": 21.0}, {"name": "sistema", "size": 21.0}]},
{"cluster":"CL06(420) - dia intereses plazo cancelacion ","size":"420","topics":
[{"name": "dia", "size": 21.0}, {"name": "intereses", "size": 21.0}, {"name": "cancelacion", "size": 21.0}, {"name": "plazo", "size": 21.0}, {"name": "sugerencia", "size": 21.0}, {"name": "carta", "size": 21.0}, {"name": "vez", "size": 21.0}, {"name": "gracias", "size": 21.0}, {"name": "servicio", "size": 21.0}, {"name": "momento", "size": 21.0}, {"name": "incidencias", "size": 21.0}, {"name": "liquidacion", "size": 21.0}, {"name": "10", "size": 21.0}, {"name": "caso", "size": 21.0}, {"name": "cop", "size": 21.0}, {"name": "sistema", "size": 21.0}, {"name": "saludo", "size": 21.0}, {"name": "03", "size": 21.0}, {"name": "importe", "size": 21.0}, {"name": "respuesta", "size": 21.0}]},
{"cluster":"CL07(696) - libreta cero nomina puntos ","size":"696","topics":
[{"name": "libreta", "size": 34.0}, {"name": "cero", "size": 34.0}, {"name": "nomina", "size": 34.0}, {"name": "tarjeta", "size": 34.0}, {"name": "puntos", "size": 34.0}, {"name": "estrella", "size": 34.0}, {"name": "pension", "size": 34.0}, {"name": "multiestrella", "size": 34.0}, {"name": "mantenimiento", "size": 34.0}, {"name": "regalo", "size": 34.0}, {"name": "pensionistas", "size": 34.0}, {"name": "entidad", "size": 34.0}, {"name": "mas", "size": 34.0}, {"name": "producto", "size": 34.0}, {"name": "poder", "size": 34.0}, {"name": "posibilidad", "size": 34.0}, {"name": "cambio", "size": 34.0}, {"name": "01", "size": 34.0}, {"name": "02", "size": 34.0}, {"name": "son", "size": 34.0}]},
{"cluster":"CL08(900) - contacto acciones poder ave ","size":"900","topics":
[{"name": "poder", "size": 45.0}, {"name": "acciones", "size": 45.0}, {"name": "contacto", "size": 45.0}, {"name": "dia", "size": 45.0}, {"name": "ave", "size": 45.0}, {"name": "simulacion", "size": 45.0}, {"name": "gracias", "size": 45.0}, {"name": "vez", "size": 45.0}, {"name": "gestion", "size": 45.0}, {"name": "tiempo", "size": 45.0}, {"name": "mas", "size": 45.0}, {"name": "muro", "size": 45.0}, {"name": "02", "size": 45.0}, {"name": "opcion", "size": 45.0}, {"name": "mensaje", "size": 45.0}, {"name": "informacion", "size": 45.0}, {"name": "forma", "size": 45.0}, {"name": "mail", "size": 45.0}, {"name": "pdf", "size": 45.0}, {"name": "banca", "size": 45.0}]},
{"cluster":"CL09(320) - campana multiestrella programa ano ","size":"320","topics":
[{"name": "campana", "size": 16.0}, {"name": "multiestrella", "size": 16.0}, {"name": "ano", "size": 16.0}, {"name": "pension", "size": 16.0}, {"name": "pack", "size": 16.0}, {"name": "programa", "size": 16.0}, {"name": "tarjeta", "size": 16.0}, {"name": "descuento", "size": 16.0}, {"name": "ser", "size": 16.0}, {"name": "producto", "size": 16.0}, {"name": "son", "size": 16.0}, {"name": "ahora", "size": 16.0}, {"name": "01", "size": 16.0}, {"name": "folleto", "size": 16.0}, {"name": "club", "size": 16.0}, {"name": "nomina", "size": 16.0}, {"name": "caso", "size": 16.0}, {"name": "persona", "size": 16.0}, {"name": "edad", "size": 16.0}, {"name": "oferta", "size": 16.0}]},
{"cluster":"CL10(828) - pack poliza hogar recibo ","size":"828","topics":
[{"name": "poliza", "size": 41.0}, {"name": "pack", "size": 41.0}, {"name": "poder", "size": 41.0}, {"name": "dia", "size": 41.0}, {"name": "hogar", "size": 41.0}, {"name": "caso", "size": 41.0}, {"name": "recibo", "size": 41.0}, {"name": "mes", "size": 41.0}, {"name": "mas", "size": 41.0}, {"name": "salud", "size": 41.0}, {"name": "gracias", "size": 41.0}, {"name": "compania", "size": 41.0}, {"name": "simulacion", "size": 41.0}, {"name": "precio", "size": 41.0}, {"name": "contratacion", "size": 41.0}, {"name": "coberturas", "size": 41.0}, {"name": "02", "size": 41.0}, {"name": "auto", "size": 41.0}, {"name": "producto", "size": 41.0}, {"name": "ano", "size": 41.0}]}]

Can't get this working. Created both the index.html and the flare.json.

<script src="d3js.org/d3.v3.min.js"></script> should reference correctly.

Any ideas?

I displayed titles for 2 levels in Zoomable circle dependencies d3 chart. The Red font in the image is the parent title (level 1) and black font are children (level 2). In the image, parent title is partially hidden by the children title. I tried adjusting the font-size and z-index for text label but the parent title is not completely visible. Is there a way to show the parent title completely visible on top of children title ?

Hi Thanks for sharing the code.

Do you know how to enable "hover" action to display the label of each node (parent and children) when mouse over?

This is awesome stuff, was wondering about the licensing though, what is being licensed under GPL 3 exactly? the pack layout is part of d3 as far as I can tell. Checking what it would mean to have a Zoomable Circle Packing info graphic in a commercial product.

Hi Mike, when viewing this in raw in IE 11, the circles expand out of the SVG when you click on child circles.
https://bl.ocks.org/mbostock/raw/7607535/

Do you have any recommendations for fixing this? Thank you very much!

how can I add url in json and can can really go to url by clicking on it?

Hello Sir!
The data input is static. How can I feed dynamic data from MySQL so that when I update my database, it is reflected in the chart? What modifications are required to be made?

Hey I tried the zoomable circle packing chart in Angular 6. But graph is not shown. Can I get link to use zoomable circle packing in Angular 6 with D3 V4

Having trouble running this on Chrome 76.

I think it is unable to draw the circles because we didn't specify a radius, so all the text is accumulated together. I've not made any modifications to the gist. Any suggestions how I can display the packing properly?