D3.js Sample: Radial Reingold–Tilford Tree

The following chart, drawn by D3.js library, is a tree layout which implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance.


Using our plugin, named Blazing Charts, I added the following shortcode to this post:

(left-bracket)BlazingChart charttype="d3" source="d3-js-sample-1"(right bracket)

The first parameter specifies which charting library is used. The second parameter is the slug of a Custom Post Type, named Chart Snippets, introduced by that plugin.

The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<div id="d3-plot">
</div>
<style>
 
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
 
.node {
  font: 10px sans-serif;
}
 
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
 
</style>
 
<script type="text/javascript">
window.onload = function () {
 
var myJson = '{'+
 '"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}'+
'   ]'+
'  }'+
' ]}';
 
    var diameter = 800;
 
    var tree = d3.layout.tree()
      .size([360, diameter / 2 - 120])
      .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
 
    var diagonal = d3.svg.diagonal.radial()
      .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
 
    var svg = d3.select("#d3-plot").append("svg")
      .attr("width", diameter)
      .attr("height", diameter - 150)
    .append("g")
      .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
 
 //   d3.json("#flareJson", function(error, root) {
 root = JSON.parse( myJson );
 
    var nodes = tree.nodes(root),
        links = tree.links(nodes);
 
    var link = svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);
 
    var node = svg.selectAll(".node")
        .data(nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
 
    node.append("circle")
        .attr("r", 4.5);
 
    node.append("text")
        .attr("dy", ".31em")
        .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
        .text(function(d) { return d.name; });
    //});
 
    d3.select(self.frameElement).style("height", diameter - 150 + "px");
}
</script>
<div id="d3-plot">
</div>
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>

<script type="text/javascript">
window.onload = function () {

var myJson = '{'+
 '"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}'+
'   ]'+
'  }'+
' ]}';

    var diameter = 800;

    var tree = d3.layout.tree()
      .size([360, diameter / 2 - 120])
      .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

    var diagonal = d3.svg.diagonal.radial()
      .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

    var svg = d3.select("#d3-plot").append("svg")
      .attr("width", diameter)
      .attr("height", diameter - 150)
    .append("g")
      .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

 //   d3.json("#flareJson", function(error, root) {
 root = JSON.parse( myJson );

    var nodes = tree.nodes(root),
        links = tree.links(nodes);

    var link = svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

    var node = svg.selectAll(".node")
        .data(nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

    node.append("circle")
        .attr("r", 4.5);

    node.append("text")
        .attr("dy", ".31em")
        .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
        .text(function(d) { return d.name; });
    //});

    d3.select(self.frameElement).style("height", diameter - 150 + "px");
}
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.