Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 14, 2024 17:51
  • Star 22 You must be signed in to star a gist
  • Fork 45 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/7607535 to your computer and use it in GitHub Desktop.
Zoomable Circle Packing
license: gpl-3.0
height: 960
redirect: https://observablehq.com/@d3/d3-zoomable-circle-packing
{
"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}
]
}
]
}
<!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>
@canoji
Copy link

canoji commented Jun 23, 2014

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

@Inflaav1
Copy link

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?

@rahulgannerlla
Copy link

rahulgannerlla commented Oct 3, 2016

capture

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 ?

@Tracy2014
Copy link

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?

@eranargaman
Copy link

eranargaman commented Mar 27, 2017

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.

@sillicon
Copy link

sillicon commented Nov 8, 2017

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/
giford3

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

@Rutulpatel7077
Copy link

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

@theindianrishi
Copy link

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?

@loganayagimadesh
Copy link

loganayagimadesh commented Nov 14, 2018

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

@devanshuDesai
Copy link

Having trouble running this on Chrome 76.
Screen Shot 2019-08-17 at 5 35 51 AM
Screen Shot 2019-08-17 at 5 35 19 AM

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment