D3 4.0’s pack layout has been improved by computing the smallest enclosing circle for each node. Compare to D3 3.x’s implementation.
Last active
July 12, 2018 06:18
-
-
Save mbostock/467f1a0db47753cc630e to your computer and use it in GitHub Desktop.
Improved Circle Packing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "flare", | |
"children": [ | |
{ | |
"name": "analytics", | |
"children": [ | |
{ | |
"name": "cluster", | |
"children": [ | |
{"name": "AgglomerativeCluster", "value": 3938}, | |
{"name": "CommunityStructure", "value": 3812}, | |
{"name": "HierarchicalCluster", "value": 6714}, | |
{"name": "MergeEdge", "value": 743} | |
] | |
}, | |
{ | |
"name": "graph", | |
"children": [ | |
{"name": "BetweennessCentrality", "value": 3534}, | |
{"name": "LinkDistance", "value": 5731}, | |
{"name": "MaxFlowMinCut", "value": 7840}, | |
{"name": "ShortestPaths", "value": 5914}, | |
{"name": "SpanningTree", "value": 3416} | |
] | |
}, | |
{ | |
"name": "optimization", | |
"children": [ | |
{"name": "AspectRatioBanker", "value": 7074} | |
] | |
} | |
] | |
}, | |
{ | |
"name": "animate", | |
"children": [ | |
{"name": "Easing", "value": 17010}, | |
{"name": "FunctionSequence", "value": 5842}, | |
{ | |
"name": "interpolate", | |
"children": [ | |
{"name": "ArrayInterpolator", "value": 1983}, | |
{"name": "ColorInterpolator", "value": 2047}, | |
{"name": "DateInterpolator", "value": 1375}, | |
{"name": "Interpolator", "value": 8746}, | |
{"name": "MatrixInterpolator", "value": 2202}, | |
{"name": "NumberInterpolator", "value": 1382}, | |
{"name": "ObjectInterpolator", "value": 1629}, | |
{"name": "PointInterpolator", "value": 1675}, | |
{"name": "RectangleInterpolator", "value": 2042} | |
] | |
}, | |
{"name": "ISchedulable", "value": 1041}, | |
{"name": "Parallel", "value": 5176}, | |
{"name": "Pause", "value": 449}, | |
{"name": "Scheduler", "value": 5593}, | |
{"name": "Sequence", "value": 5534}, | |
{"name": "Transition", "value": 9201}, | |
{"name": "Transitioner", "value": 19975}, | |
{"name": "TransitionEvent", "value": 1116}, | |
{"name": "Tween", "value": 6006} | |
] | |
}, | |
{ | |
"name": "data", | |
"children": [ | |
{ | |
"name": "converters", | |
"children": [ | |
{"name": "Converters", "value": 721}, | |
{"name": "DelimitedTextConverter", "value": 4294}, | |
{"name": "GraphMLConverter", "value": 9800}, | |
{"name": "IDataConverter", "value": 1314}, | |
{"name": "JSONConverter", "value": 2220} | |
] | |
}, | |
{"name": "DataField", "value": 1759}, | |
{"name": "DataSchema", "value": 2165}, | |
{"name": "DataSet", "value": 586}, | |
{"name": "DataSource", "value": 3331}, | |
{"name": "DataTable", "value": 772}, | |
{"name": "DataUtil", "value": 3322} | |
] | |
}, | |
{ | |
"name": "display", | |
"children": [ | |
{"name": "DirtySprite", "value": 8833}, | |
{"name": "LineSprite", "value": 1732}, | |
{"name": "RectSprite", "value": 3623}, | |
{"name": "TextSprite", "value": 10066} | |
] | |
}, | |
{ | |
"name": "flex", | |
"children": [ | |
{"name": "FlareVis", "value": 4116} | |
] | |
}, | |
{ | |
"name": "physics", | |
"children": [ | |
{"name": "DragForce", "value": 1082}, | |
{"name": "GravityForce", "value": 1336}, | |
{"name": "IForce", "value": 319}, | |
{"name": "NBodyForce", "value": 10498}, | |
{"name": "Particle", "value": 2822}, | |
{"name": "Simulation", "value": 9983}, | |
{"name": "Spring", "value": 2213}, | |
{"name": "SpringForce", "value": 1681} | |
] | |
}, | |
{ | |
"name": "query", | |
"children": [ | |
{"name": "AggregateExpression", "value": 1616}, | |
{"name": "And", "value": 1027}, | |
{"name": "Arithmetic", "value": 3891}, | |
{"name": "Average", "value": 891}, | |
{"name": "BinaryExpression", "value": 2893}, | |
{"name": "Comparison", "value": 5103}, | |
{"name": "CompositeExpression", "value": 3677}, | |
{"name": "Count", "value": 781}, | |
{"name": "DateUtil", "value": 4141}, | |
{"name": "Distinct", "value": 933}, | |
{"name": "Expression", "value": 5130}, | |
{"name": "ExpressionIterator", "value": 3617}, | |
{"name": "Fn", "value": 3240}, | |
{"name": "If", "value": 2732}, | |
{"name": "IsA", "value": 2039}, | |
{"name": "Literal", "value": 1214}, | |
{"name": "Match", "value": 3748}, | |
{"name": "Maximum", "value": 843}, | |
{ | |
"name": "methods", | |
"children": [ | |
{"name": "add", "value": 593}, | |
{"name": "and", "value": 330}, | |
{"name": "average", "value": 287}, | |
{"name": "count", "value": 277}, | |
{"name": "distinct", "value": 292}, | |
{"name": "div", "value": 595}, | |
{"name": "eq", "value": 594}, | |
{"name": "fn", "value": 460}, | |
{"name": "gt", "value": 603}, | |
{"name": "gte", "value": 625}, | |
{"name": "iff", "value": 748}, | |
{"name": "isa", "value": 461}, | |
{"name": "lt", "value": 597}, | |
{"name": "lte", "value": 619}, | |
{"name": "max", "value": 283}, | |
{"name": "min", "value": 283}, | |
{"name": "mod", "value": 591}, | |
{"name": "mul", "value": 603}, | |
{"name": "neq", "value": 599}, | |
{"name": "not", "value": 386}, | |
{"name": "or", "value": 323}, | |
{"name": "orderby", "value": 307}, | |
{"name": "range", "value": 772}, | |
{"name": "select", "value": 296}, | |
{"name": "stddev", "value": 363}, | |
{"name": "sub", "value": 600}, | |
{"name": "sum", "value": 280}, | |
{"name": "update", "value": 307}, | |
{"name": "variance", "value": 335}, | |
{"name": "where", "value": 299}, | |
{"name": "xor", "value": 354}, | |
{"name": "_", "value": 264} | |
] | |
}, | |
{"name": "Minimum", "value": 843}, | |
{"name": "Not", "value": 1554}, | |
{"name": "Or", "value": 970}, | |
{"name": "Query", "value": 13896}, | |
{"name": "Range", "value": 1594}, | |
{"name": "StringUtil", "value": 4130}, | |
{"name": "Sum", "value": 791}, | |
{"name": "Variable", "value": 1124}, | |
{"name": "Variance", "value": 1876}, | |
{"name": "Xor", "value": 1101} | |
] | |
}, | |
{ | |
"name": "scale", | |
"children": [ | |
{"name": "IScaleMap", "value": 2105}, | |
{"name": "LinearScale", "value": 1316}, | |
{"name": "LogScale", "value": 3151}, | |
{"name": "OrdinalScale", "value": 3770}, | |
{"name": "QuantileScale", "value": 2435}, | |
{"name": "QuantitativeScale", "value": 4839}, | |
{"name": "RootScale", "value": 1756}, | |
{"name": "Scale", "value": 4268}, | |
{"name": "ScaleType", "value": 1821}, | |
{"name": "TimeScale", "value": 5833} | |
] | |
}, | |
{ | |
"name": "util", | |
"children": [ | |
{"name": "Arrays", "value": 8258}, | |
{"name": "Colors", "value": 10001}, | |
{"name": "Dates", "value": 8217}, | |
{"name": "Displays", "value": 12555}, | |
{"name": "Filter", "value": 2324}, | |
{"name": "Geometry", "value": 10993}, | |
{ | |
"name": "heap", | |
"children": [ | |
{"name": "FibonacciHeap", "value": 9354}, | |
{"name": "HeapNode", "value": 1233} | |
] | |
}, | |
{"name": "IEvaluable", "value": 335}, | |
{"name": "IPredicate", "value": 383}, | |
{"name": "IValueProxy", "value": 874}, | |
{ | |
"name": "math", | |
"children": [ | |
{"name": "DenseMatrix", "value": 3165}, | |
{"name": "IMatrix", "value": 2815}, | |
{"name": "SparseMatrix", "value": 3366} | |
] | |
}, | |
{"name": "Maths", "value": 17705}, | |
{"name": "Orientation", "value": 1486}, | |
{ | |
"name": "palette", | |
"children": [ | |
{"name": "ColorPalette", "value": 6367}, | |
{"name": "Palette", "value": 1229}, | |
{"name": "ShapePalette", "value": 2059}, | |
{"name": "SizePalette", "value": 2291} | |
] | |
}, | |
{"name": "Property", "value": 5559}, | |
{"name": "Shapes", "value": 19118}, | |
{"name": "Sort", "value": 6887}, | |
{"name": "Stats", "value": 6557}, | |
{"name": "Strings", "value": 22026} | |
] | |
}, | |
{ | |
"name": "vis", | |
"children": [ | |
{ | |
"name": "axis", | |
"children": [ | |
{"name": "Axes", "value": 1302}, | |
{"name": "Axis", "value": 24593}, | |
{"name": "AxisGridLine", "value": 652}, | |
{"name": "AxisLabel", "value": 636}, | |
{"name": "CartesianAxes", "value": 6703} | |
] | |
}, | |
{ | |
"name": "controls", | |
"children": [ | |
{"name": "AnchorControl", "value": 2138}, | |
{"name": "ClickControl", "value": 3824}, | |
{"name": "Control", "value": 1353}, | |
{"name": "ControlList", "value": 4665}, | |
{"name": "DragControl", "value": 2649}, | |
{"name": "ExpandControl", "value": 2832}, | |
{"name": "HoverControl", "value": 4896}, | |
{"name": "IControl", "value": 763}, | |
{"name": "PanZoomControl", "value": 5222}, | |
{"name": "SelectionControl", "value": 7862}, | |
{"name": "TooltipControl", "value": 8435} | |
] | |
}, | |
{ | |
"name": "data", | |
"children": [ | |
{"name": "Data", "value": 20544}, | |
{"name": "DataList", "value": 19788}, | |
{"name": "DataSprite", "value": 10349}, | |
{"name": "EdgeSprite", "value": 3301}, | |
{"name": "NodeSprite", "value": 19382}, | |
{ | |
"name": "render", | |
"children": [ | |
{"name": "ArrowType", "value": 698}, | |
{"name": "EdgeRenderer", "value": 5569}, | |
{"name": "IRenderer", "value": 353}, | |
{"name": "ShapeRenderer", "value": 2247} | |
] | |
}, | |
{"name": "ScaleBinding", "value": 11275}, | |
{"name": "Tree", "value": 7147}, | |
{"name": "TreeBuilder", "value": 9930} | |
] | |
}, | |
{ | |
"name": "events", | |
"children": [ | |
{"name": "DataEvent", "value": 2313}, | |
{"name": "SelectionEvent", "value": 1880}, | |
{"name": "TooltipEvent", "value": 1701}, | |
{"name": "VisualizationEvent", "value": 1117} | |
] | |
}, | |
{ | |
"name": "legend", | |
"children": [ | |
{"name": "Legend", "value": 20859}, | |
{"name": "LegendItem", "value": 4614}, | |
{"name": "LegendRange", "value": 10530} | |
] | |
}, | |
{ | |
"name": "operator", | |
"children": [ | |
{ | |
"name": "distortion", | |
"children": [ | |
{"name": "BifocalDistortion", "value": 4461}, | |
{"name": "Distortion", "value": 6314}, | |
{"name": "FisheyeDistortion", "value": 3444} | |
] | |
}, | |
{ | |
"name": "encoder", | |
"children": [ | |
{"name": "ColorEncoder", "value": 3179}, | |
{"name": "Encoder", "value": 4060}, | |
{"name": "PropertyEncoder", "value": 4138}, | |
{"name": "ShapeEncoder", "value": 1690}, | |
{"name": "SizeEncoder", "value": 1830} | |
] | |
}, | |
{ | |
"name": "filter", | |
"children": [ | |
{"name": "FisheyeTreeFilter", "value": 5219}, | |
{"name": "GraphDistanceFilter", "value": 3165}, | |
{"name": "VisibilityFilter", "value": 3509} | |
] | |
}, | |
{"name": "IOperator", "value": 1286}, | |
{ | |
"name": "label", | |
"children": [ | |
{"name": "Labeler", "value": 9956}, | |
{"name": "RadialLabeler", "value": 3899}, | |
{"name": "StackedAreaLabeler", "value": 3202} | |
] | |
}, | |
{ | |
"name": "layout", | |
"children": [ | |
{"name": "AxisLayout", "value": 6725}, | |
{"name": "BundledEdgeRouter", "value": 3727}, | |
{"name": "CircleLayout", "value": 9317}, | |
{"name": "CirclePackingLayout", "value": 12003}, | |
{"name": "DendrogramLayout", "value": 4853}, | |
{"name": "ForceDirectedLayout", "value": 8411}, | |
{"name": "IcicleTreeLayout", "value": 4864}, | |
{"name": "IndentedTreeLayout", "value": 3174}, | |
{"name": "Layout", "value": 7881}, | |
{"name": "NodeLinkTreeLayout", "value": 12870}, | |
{"name": "PieLayout", "value": 2728}, | |
{"name": "RadialTreeLayout", "value": 12348}, | |
{"name": "RandomLayout", "value": 870}, | |
{"name": "StackedAreaLayout", "value": 9121}, | |
{"name": "TreeMapLayout", "value": 9191} | |
] | |
}, | |
{"name": "Operator", "value": 2490}, | |
{"name": "OperatorList", "value": 5248}, | |
{"name": "OperatorSequence", "value": 4190}, | |
{"name": "OperatorSwitch", "value": 2581}, | |
{"name": "SortOperator", "value": 2023} | |
] | |
}, | |
{"name": "Visualization", "value": 16540} | |
] | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<canvas width="960" height="960"></canvas> | |
<script> | |
/* https://github.com/d3/d3-xhr Copyright 2015 Mike Bostock */ | |
"undefined"==typeof Map?(Map=function(){this.clear()},Map.prototype={set:function(e,n){return this._[e]=n,this},get:function(e){return this._[e]},has:function(e){return e in this._},"delete":function(e){return e in this._&&delete this._[e]},clear:function(){this._=Object.create(null)},get size(){var e=0;for(var n in this._)++e;return e},forEach:function(e){for(var n in this._)e(this._[n],n,this)}}):function(){var e=new Map;e.set(0,0)!==e&&(e=e.set,Map.prototype.set=function(){return e.apply(this,arguments),this})}(),function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.xhr={})}(this,function(e){"use strict";function n(e){function n(e,n){var r;return t(e,function(e,t){if(r)return r(e,t-1);var o=new Function("d","return {"+e.map(function(e,n){return JSON.stringify(e)+": d["+n+"]"}).join(",")+"}");r=n?function(e,t){return n(o(e),t)}:o})}function t(e,n){function t(){if(f>=c)return i;if(o)return o=!1,u;var n=f;if(34===e.charCodeAt(n)){for(var t=n;t++<c;)if(34===e.charCodeAt(t)){if(34!==e.charCodeAt(t+1))break;++t}f=t+2;var r=e.charCodeAt(t+1);return 13===r?(o=!0,10===e.charCodeAt(t+2)&&++f):10===r&&(o=!0),e.slice(n+1,t).replace(/""/g,'"')}for(;c>f;){var r=e.charCodeAt(f++),a=1;if(10===r)o=!0;else if(13===r)o=!0,10===e.charCodeAt(f)&&(++f,++a);else if(r!==s)continue;return e.slice(n,f-a)}return e.slice(n)}for(var r,o,u={},i={},a=[],c=e.length,f=0,l=0;(r=t())!==i;){for(var p=[];r!==u&&r!==i;)p.push(r),r=t();n&&null==(p=n(p,l++))||a.push(p)}return a}function r(n){if(Array.isArray(n[0]))return o(n);var t=Object.create(null),r=[];return n.forEach(function(e){for(var n in e)(n+="")in t||r.push(t[n]=n)}),[r.map(i).join(e)].concat(n.map(function(n){return r.map(function(e){return i(n[e])}).join(e)})).join("\n")}function o(e){return e.map(u).join("\n")}function u(n){return n.map(i).join(e)}function i(e){return a.test(e)?'"'+e.replace(/\"/g,'""')+'"':e}var a=new RegExp('["'+e+"\n]"),s=e.charCodeAt(0);return{parse:n,parseRows:t,format:r,formatRows:o}}function t(e,n){return function(t){return e.parse(t.responseText,n)}}function r(e){return function(n,t){e(null==n?t:null)}}function o(e){var n=e.responseType;return n&&"text"!==n?e.response:e.responseText}function u(e){function n(e){var n=(e+="").indexOf("."),t=e;if(n>=0?e=e.slice(0,n):t+=".",e&&!i.hasOwnProperty(e))throw new Error("unknown type: "+e);return{type:e,name:t}}function t(e){return function(){for(var n,t,r=i[e],o=-1,u=r.length;++o<u;)(t=(n=r[o]).value)&&t.apply(this,arguments);return s}}var r,o=-1,u=e.length,i={},a={},s=this;for(s.on=function(e,t){if(e=n(e),arguments.length<2)return(t=a[e.name])&&t.value;if(e.type){var r,o=i[e.type],u=a[e.name];u&&(u.value=null,r=o.indexOf(u),i[e.type]=o=o.slice(0,r).concat(o.slice(r+1)),delete a[e.name]),t&&(t={value:t},a[e.name]=t,o.push(t))}else if(null==t)for(var c in i)if(t=a[c+e.name]){t.value=null;var o=i[c],r=o.indexOf(t);i[c]=o.slice(0,r).concat(o.slice(r+1)),delete a[t.name]}return s};++o<u;){if(r=e[o]+"",!r||r in s)throw new Error("illegal or duplicate type: "+r);i[r]=[],s[r]=t(r)}}function i(){return new u(arguments)}function a(e,n){function t(){var e,n=p.status;if(!n&&o(p)||n>=200&&300>n||304===n){if(s)try{e=s.call(u,p)}catch(t){return void f.error.call(u,t)}else e=p;f.load.call(u,e)}else f.error.call(u,p)}var u,a,s,c,f=i("beforesend","progress","load","error"),l=new Map,p=new XMLHttpRequest;return"undefined"==typeof XDomainRequest||"withCredentials"in p||!/^(http(s)?:)?\/\//.test(e)||(p=new XDomainRequest),"onload"in p?p.onload=p.onerror=t:p.onreadystatechange=function(){p.readyState>3&&t()},p.onprogress=function(e){f.progress.call(u,e)},u={header:function(e,n){return e=(e+"").toLowerCase(),arguments.length<2?l.get(e):(null==n?l["delete"](e):l.set(e,n+""),u)},mimeType:function(e){return arguments.length?(a=null==e?null:e+"",u):a},responseType:function(e){return arguments.length?(c=e,u):c},response:function(e){return s=e,u},get:function(e,n){return u.send("GET",e,n)},post:function(e,n){return u.send("POST",e,n)},send:function(n,t,o){return o||"function"!=typeof t||(o=t,t=null),o&&1===o.length&&(o=r(o)),p.open(n,e,!0),null==a||l.has("accept")||l.set("accept",a+",*/*"),p.setRequestHeader&&l.forEach(function(e,n){p.setRequestHeader(n,e)}),null!=a&&p.overrideMimeType&&p.overrideMimeType(a),null!=c&&(p.responseType=c),o&&u.on("error",o).on("load",function(e){o(null,e)}),f.beforesend.call(u,p),p.send(null==t?null:t),u},abort:function(){return p.abort(),u},on:function(){var e=f.on.apply(f,arguments);return e===f?u:e}},n?u.get(n):u}function s(e,n){return function(r,o,u){arguments.length<3&&(u=o,o=null);var i=a(r).mimeType(e);return i.row=function(e){return arguments.length?i.response(t(n,o=e)):o},i.row(o),u?i.get(u):i}}function c(e,n){return function(t,r){var o=a(t).mimeType(e).response(n);return r?o.get(r):o}}var f=n(" ");i.prototype=u.prototype;var l=s("text/tab-separated-values",f),p=n(","),h=s("text/csv",p),d=c("application/xml",function(e){return e.responseXML}),m=c("text/plain",function(e){return e.responseText}),v=c("application/json",function(e){return JSON.parse(e.responseText)}),g=c("text/html",function(e){return document.createRange().createContextualFragment(e.responseText)});e.xhr=a,e.html=g,e.json=v,e.text=m,e.xml=d,e.csv=h,e.tsv=l}); | |
/* https://github.com/d3/d3-hierarchy Copyright 2015 Mike Bostock */ | |
!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(n.hierarchy={})}(this,function(n){"use strict";function r(n){var r=[];return n.forEach(function(n){n.children&&n.children.forEach(function(e){r.push({source:n,target:e})})}),r}function e(n,e){return n.sort=function(){var r=e.sort.apply(e,arguments);return r===e?n:r},n.children=function(){var r=e.children.apply(e,arguments);return r===e?n:r},n.value=function(){var r=e.value.apply(e,arguments);return r===e?n:r},n.nodes=n,n.links=r,n}function t(n){return{x:n.x,y:n.y,dx:n.dx,dy:n.dy}}function u(n,r){var e=n.x+r[3],t=n.y+r[0],u=n.dx-r[1]-r[3],a=n.dy-r[0]-r[2];return 0>u&&(e+=u/2,u=0),0>a&&(t+=a/2,a=0),{x:e,y:t,dx:u,dy:a}}function a(n,r){for(var e=[n],t=[];null!=(n=e.pop());)if(t.push(n),(a=n.children)&&(u=a.length))for(var u,a,l=-1;++l<u;)e.push(a[l]);for(;null!=(n=t.pop());)r(n)}function l(n,r){for(var e=[n];null!=(n=e.pop());)if(r(n),(u=n.children)&&(t=u.length))for(var t,u;--t>=0;)e.push(u[t])}function i(n){return n.value}function c(n){return n.children}function o(n,r){return r.value-n.value}function f(){function n(r){var l,i=[r],c=[];for(r.parent=null,r.depth=0;null!=(l=i.pop());)if(c.push(l),(f=t.call(n,l,l.depth))&&(o=f.length)){for(var o,f,h;--o>=0;)i.push(h=f[o]),h.parent=l,h.depth=l.depth+1;u&&(l.value=0),l.children=f}else u&&(l.value=+u.call(n,l,l.depth)||0),delete l.children;return a(r,function(n){var r,t;e&&(r=n.children)&&r.sort(e),u&&(t=n.parent)&&(t.value+=n.value)}),c}var e=o,t=c,u=i;return n.nodes=n,n.links=r,n.sort=function(r){return arguments.length?(e=r,n):e},n.children=function(r){return arguments.length?(t=r,n):t},n.value=function(r){return arguments.length?(u=r,n):u},n.revalue=function(r){return u&&(l(r,function(n){n.children&&(n.value=0)}),a(r,function(r){var e;r.children||(r.value=+u.call(n,r,r.depth)||0),(e=r.parent)&&(e.value+=r.value)})),r},n}function h(){function n(n){var r=x.call(h,n,n.depth);return null==r?t(n):u(n,"number"==typeof r?[r,r,r,r]:r)}function r(n){return u(n,x)}function a(n,r){for(var e,t,u=-1,a=n.length;++u<a;)t=(e=n[u]).value*(0>r?0:r),e.area=isNaN(t)||0>=t?0:t}function l(n){var r=n.children;if(r&&r.length){var e,t,u,i=y(n),f=[],h=r.slice(),d=1/0,p="slice"===m?i.dx:"dice"===m?i.dy:"slice-dice"===m?1&n.depth?i.dy:i.dx:Math.min(i.dx,i.dy);for(a(h,i.dx*i.dy/n.value),f.area=0;(u=h.length)>0;)f.push(e=h[u-1]),f.area+=e.area,"squarify"!==m||(t=c(f,p))<=d?(h.pop(),d=t):(f.area-=f.pop().area,o(f,p,i,!1),p=Math.min(i.dx,i.dy),f.length=f.area=0,d=1/0);f.length&&(o(f,p,i,!0),f.length=f.area=0),r.forEach(l)}}function i(n){var r=n.children;if(r&&r.length){var e,t=y(n),u=r.slice(),l=[];for(a(u,t.dx*t.dy/n.value),l.area=0;e=u.pop();)l.push(e),l.area+=e.area,null!=e.z&&(o(l,e.z?t.dx:t.dy,t,!u.length),l.length=l.area=0);r.forEach(i)}}function c(n,r){for(var e,t=n.area,u=0,a=1/0,l=-1,i=n.length;++l<i;)(e=n[l].area)&&(a>e&&(a=e),e>u&&(u=e));return t*=t,r*=r,t?Math.max(r*u*_/t,t/(r*a*_)):1/0}function o(n,r,e,t){var u,a=-1,l=n.length,i=e.x,c=e.y,o=r?v(n.area/r):0;if(r==e.dx){for((t||o>e.dy)&&(o=e.dy);++a<l;)u=n[a],u.x=i,u.y=c,u.dy=o,i+=u.dx=Math.min(e.x+e.dx-i,o?v(u.area/o):0);u.z=!0,u.dx+=e.x+e.dx-i,e.y+=o,e.dy-=o}else{for((t||o>e.dx)&&(o=e.dx);++a<l;)u=n[a],u.x=i,u.y=c,u.dx=o,c+=u.dy=Math.min(e.y+e.dy-c,o?v(u.area/o):0);u.z=!1,u.dy+=e.y+e.dy-c,e.x+=o,e.dx-=o}}function h(n){var r=d||p(n),e=r[0];return e.x=0,e.y=0,e.dx=s[0],e.dy=s[1],d&&p.revalue(e),a([e],e.dx*e.dy/e.value),(d?i:l)(e),g&&(d=r),r}var d,p=f(),v=Number,s=[1,1],x=null,y=t,g=!1,m="squarify",_=V;return h.size=function(n){return arguments.length?(s=[+n[0],+n[1]],h):s.slice()},h.padding=function(e){if(!arguments.length)return Array.isArray(x)?x.slice():x;var u;return y=null==e?(x=null,t):"function"==(u=typeof e)?(x=e,n):"number"===u?(x=[e,e,e,e],r):(x=[+e[0],+e[1],+e[2],+e[3]],r),h},h.round=function(n){return arguments.length?(v=n?Math.round:Number,h):v!==Number},h.sticky=function(n){return arguments.length?(g=!!n,d=null,h):g},h.ratio=function(n){return arguments.length?(_=+n,h):_},h.mode=function(n){return arguments.length?(m=U.hasOwnProperty(n)?n+"":"squarify",h):m},e(h,p)}function d(n){var r=n.children;return r.length?r[0]:n.t}function p(n){var r,e=n.children;return(r=e.length)?e[r-1]:n.t}function v(n,r,e){return n.a.parent===r.parent?n.a:e}function s(n,r,e){var t=e/(r.i-n.i);r.c-=t,r.s+=e,n.c+=t,r.z+=e,r.m+=e}function x(n){for(var r,e=0,t=0,u=n.children,a=u.length;--a>=0;)r=u[a],r.z+=e,r.m+=e,e+=r.s+(t+=r.c)}function y(n,r){return n.parent===r.parent?1:2}function g(){function n(n,e){var i=o.call(this,n,e),f=i[0],d=r(f);if(a(d,t),d.parent.m=-d.z,l(d,u),m)l(f,c);else{var p=f,v=f,s=f;l(f,function(n){n.x<p.x&&(p=n),n.x>v.x&&(v=n),n.depth>s.depth&&(s=n)});var x=h(p,v)/2-p.x,y=g[0]/(v.x+h(v,p)/2+x),_=g[1]/(s.depth||1);l(f,function(n){n.x=(n.x+x)*y,n.y=n.depth*_})}return i}function r(n){for(var r,e={A:null,children:[n]},t=[e];null!=(r=t.pop());)for(var u,a=r.children,l=0,i=a.length;i>l;++l)t.push((a[l]=u={_:a[l],parent:r,children:(u=a[l].children)&&u.slice()||[],A:null,a:null,z:0,m:0,c:0,s:0,t:null,i:l}).a=u);return e.children[0]}function t(n){var r=n.children,e=n.parent.children,t=n.i?e[n.i-1]:null;if(r.length){x(n);var u=(r[0].z+r[r.length-1].z)/2;t?(n.z=t.z+h(n._,t._),n.m=n.z-u):n.z=u}else t&&(n.z=t.z+h(n._,t._));n.parent.A=i(n,t,n.parent.A||e[0])}function u(n){n._.x=n.z+n.parent.m,n.m+=n.parent.m}function i(n,r,e){if(r){for(var t,u=n,a=n,l=r,i=u.parent.children[0],c=u.m,o=a.m,f=l.m,x=i.m;l=p(l),u=d(u),l&&u;)i=d(i),a=p(a),a.a=n,t=l.z+f-u.z-c+h(l._,u._),t>0&&(s(v(l,n,e),n,t),c+=t,o+=t),f+=l.m,c+=u.m,x+=i.m,o+=a.m;l&&!p(a)&&(a.t=l,a.m+=f-o),u&&!d(i)&&(i.t=u,i.m+=c-x,e=n)}return e}function c(n){n.x*=g[0],n.y=n.depth*g[1]}var o=f().sort(null).value(null),h=y,g=[1,1],m=null;return n.separation=function(r){return arguments.length?(h=r,n):h},n.size=function(r){return arguments.length?(m=null==(g=r)?c:null,n):m?null:g},n.nodeSize=function(r){return arguments.length?(m=null==(g=r)?null:c,n):m?g:null},e(n,o)}function m(n){var r,e,t=n.children,u=0;if(t)for(r=0,e=t.length;e>r;++r)u=Math.max(u,m(t[r]));return 1+u}function _(n,r,e,t){var u=n.children;if(n.x=r,n.y=n.depth*t,n.dx=e,n.dy=t,u&&(a=u.length)){var a,l,i,c=-1;for(e=n.value?e/n.value:0;++c<a;)_(l=u[c],r,i=l.value*e,t),r+=i}}function k(){function n(n,e){var u=r.call(this,n,e);return _(u[0],0,t[0],t[1]/m(u[0])),u}var r=f(),t=[1,1];return n.size=function(r){return arguments.length?(t=[+r[0],+r[1]],n):t.slice()},e(n,r)}function z(n,r,e,t){var u=n.children;if(n.x=r+=t*n.x,n.y=e+=t*n.y,n.r*=t,u)for(var a=-1,l=u.length;++a<l;)z(u[a],r,e,t)}function M(n){delete n._pack_next,delete n._pack_prev}function b(n){for(var r,e=(n=n.slice()).length,t=null,u=t;e;){var a={id:n.length-e,value:n[e-1],next:null};u=u?u.next=a:t=a,n[r]=n[--e]}return{head:t,tail:u}}function q(n,r){var e=n.x-r.x,t=n.y-r.y;return Math.sqrt(e*e+t*t)<n.r-r.r+1e-6}function A(n,r,e){var t=n.x,u=n.y,a=n.r,l=r.x,i=r.y,c=r.r,o=e.x,f=e.y,h=e.r,d=2*(t-l),p=2*(u-i),v=2*(c-a),s=t*t+u*u-a*a-l*l-i*i+c*c,x=2*(t-o),y=2*(u-f),g=2*(h-a),m=t*t+u*u-a*a-o*o-f*f+h*h,_=x*p-d*y,k=(p*m-y*s)/_-t,z=(y*v-p*g)/_,M=(x*s-d*m)/_-u,b=(d*g-x*v)/_,q=z*z+b*b-1,A=2*(k*z+M*b+a),E=k*k+M*M-a*a,N=(-A-Math.sqrt(A*A-4*q*E))/(2*q);return{x:k+z*N+t,y:M+b*N+u,r:N}}function E(n,r){var e=n.x,t=n.y,u=n.r,a=r.x,l=r.y,i=r.r,c=a-e,o=l-t,f=i-u,h=Math.sqrt(c*c+o*o);return{x:(e+a+c/h*f)/2,y:(t+l+o/h*f)/2,r:(h+u+i)/2}}function N(n,r){var e,t,u,a=null,l=n.head;switch(r.length){case 1:e=r[0];break;case 2:e=E(r[0],r[1]);break;case 3:e=A(r[0],r[1],r[2])}for(;l;)u=l.value,t=l.next,e&&q(e,u)?a=l:(a?(n.tail=a,a.next=null):n.head=n.tail=null,r.push(u),e=N(n,r),r.pop(),n.head?(l.next=n.head,n.head=l):(l.next=null,n.head=n.tail=l),a=n.tail,a.next=t),l=t;return n.tail=a,e}function w(n){return N(b(n),[])}function S(n,r){var e=n._pack_next;n._pack_next=r,r._pack_prev=n,r._pack_next=e,e._pack_prev=r}function j(n,r){n._pack_next=r,r._pack_prev=n}function O(n,r){var e=r.x-n.x,t=r.y-n.y,u=n.r+r.r;return.999*u*u>e*e+t*t}function P(n,r,e){var t=n.r+e.r,u=r.x-n.x,a=r.y-n.y;if(t&&(u||a)){var l=r.r+e.r,i=u*u+a*a;l*=l,t*=t;var c=.5+(t-l)/(2*i),o=Math.sqrt(Math.max(0,2*l*(t+i)-(t-=i)*t-l*l))/(2*i);e.x=n.x+c*u+o*a,e.y=n.y+c*a-o*u}else e.x=n.x+t,e.y=n.y}function B(n){n._pack_next=n._pack_prev=n}function C(n){if((r=n.children)&&(c=r.length)){var r,e,t,u,a,l,i,c;if(r.forEach(B),e=r[0],e.x=-e.r,e.y=0,c>1&&(t=r[1],t.x=t.r,t.y=0,c>2))for(u=r[2],P(e,t,u),S(e,u),e._pack_prev=u,S(u,t),t=e._pack_next,a=3;c>a;a++){P(e,t,u=r[a]);var o=0,f=1,h=1;for(l=t._pack_next;l!==t;l=l._pack_next,f++)if(O(l,u)){o=1;break}if(1==o)for(i=e._pack_prev;i!==l._pack_prev&&!O(i,u);i=i._pack_prev,h++);o?(h>f||f==h&&t.r<e.r?j(e,t=l):j(e=i,t),a--):(S(e,u),t=u)}var u=w(r);for(a=0;c>a;++a)e=r[a],e.x-=u.x,e.y-=u.y;n.r=u.r,r.forEach(M)}}function D(n,r){return n.value-r.value}function F(){function n(n,e){var i=t.call(this,n,e),c=i[0],o=l[0],f=l[1],h=null==r?Math.sqrt:"function"==typeof r?r:function(){return r};if(c.x=c.y=0,a(c,function(n){n.r=+h(n.value)}),a(c,C),u){var d=u*(r?1:Math.max(2*c.r/o,2*c.r/f))/2;a(c,function(n){n.r+=d}),a(c,C),a(c,function(n){n.r-=d})}return z(c,o/2,f/2,r?1:1/Math.max(2*c.r/o,2*c.r/f)),i}var r,t=f().sort(D),u=0,l=[1,1];return n.size=function(r){return arguments.length?(l=[+r[0],+r[1]],n):l.slice()},n.radius=function(e){return arguments.length?(r=null==e||"function"==typeof e?e:+e,n):r},n.padding=function(r){return arguments.length?(u=+r,n):u},e(n,t)}function G(n){for(var r,e;(r=n.children)&&(e=r.length);)n=r[e-1];return n}function H(n){for(var r;(r=n.children)&&r.length;)n=r[0];return n}function I(n){return 1+n.reduce(function(n,r){return Math.max(n,r.y)},0)}function J(n){return n.reduce(function(n,r){return n+r.x},0)/n.length}function K(){function n(n,e){var i,c=r.call(this,n,e),o=c[0],f=0;a(o,function(n){var r=n.children;r&&r.length?(n.x=J(r),n.y=I(r)):(n.x=i?f+=t(n,i):0,n.y=0,i=n)});var h=H(o),d=G(o),p=h.x-t(h,d)/2,v=d.x+t(d,h)/2;return a(o,l?function(n){n.x=(n.x-o.x)*u[0],n.y=(o.y-n.y)*u[1]}:function(n){n.x=(n.x-p)/(v-p)*u[0],n.y=(1-(o.y?n.y/o.y:1))*u[1]}),c}var r=f().sort(null).value(null),t=y,u=[1,1],l=!1;return n.separation=function(r){return arguments.length?(t=r,n):t},n.size=function(r){return arguments.length?(l=null==(u=r),n):l?null:u},n.nodeSize=function(r){return arguments.length?(l=null!=(u=r),n):l?u:null},e(n,r)}function L(n){for(var r=[],e=n.parent;null!=e;)r.push(n),n=e,e=e.parent;return r.push(n),r}function Q(n,r){if(n===r)return n;var e=L(n),t=L(r),u=null;for(n=e.pop(),r=t.pop();n===r;)u=n,n=e.pop(),r=t.pop();return u}function R(n,r){for(var e=Q(n,r),t=[n];n!==e;)n=n.parent,t.push(n);for(var u=t.length;r!==e;)t.splice(u,0,r),r=r.parent;return t}function T(){return function(n){for(var r,e=-1,t=n.length,u=new Array(t);++e<t;)r=n[e],u[e]=R(r.source,r.end);return u}}var U={slice:1,dice:1,"slice-dice":1,squarify:1},V=(1+Math.sqrt(5))/2;n.bundle=T,n.cluster=K,n.links=r,n.pack=F,n.partition=k,n.tree=g,n.treemap=h}); | |
var canvas = document.querySelector("canvas"), | |
context = canvas.getContext("2d"); | |
var tau = 2 * Math.PI, | |
margin = 2, | |
diameter = canvas.width; | |
var pack = hierarchy.pack() | |
.size([diameter - margin * 2, diameter - margin * 2]); | |
xhr.json("flare.json", function(error, root) { | |
if (error) throw error; | |
context.translate(margin, margin); | |
context.strokeStyle = "rgb(31,119,180)"; | |
pack.nodes(root).forEach(function(node) { | |
context.beginPath(); | |
context.moveTo(node.x + node.r, node.y); | |
context.arc(node.x, node.y, node.r, 0, tau); | |
context.fillStyle = node.children ? "rgba(31,119,180,.25)" : "rgb(255,127,14)"; | |
context.fill(); | |
context.stroke(); | |
}); | |
}); | |
if (self.frameElement) self.frameElement.style.height = diameter + "px"; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment