Instantly share code, notes, and snippets.

@mbostock /.block
Last active Nov 27, 2018

Embed
What would you like to do?
Zoomable Circle Packing
license: gpl-3.0
height: 960
redirect: https://beta.observablehq.com/@mbostock/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

This comment has been minimized.

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

This comment has been minimized.

Inflaav1 commented Sep 13, 2016

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

This comment has been minimized.

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

This comment has been minimized.

Tracy2014 commented Oct 21, 2016

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Rutulpatel7077 commented Feb 22, 2018

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

@theindianrishi

This comment has been minimized.

theindianrishi commented Jun 27, 2018

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

This comment has been minimized.

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

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