{"id":105,"date":"2015-08-31T06:30:59","date_gmt":"2015-08-31T06:30:59","guid":{"rendered":"http:\/\/blazingspider.com\/wp-demo\/?p=105"},"modified":"2015-08-31T06:51:55","modified_gmt":"2015-08-31T06:51:55","slug":"d3-js-sample-radial-reingold-tilford-tree","status":"publish","type":"post","link":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/","title":{"rendered":"D3.js Sample: Radial Reingold\u2013Tilford Tree"},"content":{"rendered":"<p>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.<!--more--><\/p>\n<p><div id=\"d3-plot\">\r\n<\/div>\r\n<style>\r\n\r\n.node circle {\r\n  fill: #fff;\r\n  stroke: steelblue;\r\n  stroke-width: 1.5px;\r\n}\r\n\r\n.node {\r\n  font: 10px sans-serif;\r\n}\r\n\r\n.link {\r\n  fill: none;\r\n  stroke: #ccc;\r\n  stroke-width: 1.5px;\r\n}\r\n\r\n<\/style>\r\n\r\n<script type=\"text\/javascript\">\r\nwindow.onload = function () {\r\n\r\nvar myJson = '{'+\r\n '\"name\": \"flare\",'+\r\n '\"children\": ['+\r\n  '{'+\r\n   '\"name\": \"analytics\",'+\r\n   '\"children\": ['+\r\n    '{'+\r\n     '\"name\": \"cluster\",'+\r\n     '\"children\": ['+\r\n     ' {\"name\": \"AgglomerativeCluster\", \"size\": 3938},'+\r\n     ' {\"name\": \"CommunityStructure\", \"size\": 3812},'+\r\n     ' {\"name\": \"HierarchicalCluster\", \"size\": 6714},'+\r\n     ' {\"name\": \"MergeEdge\", \"size\": 743}'+\r\n     ']'+\r\n    '},'+\r\n    '{'+\r\n    ' \"name\": \"graph\",'+\r\n    ' \"children\": ['+\r\n    '  {\"name\": \"BetweennessCentrality\", \"size\": 3534},'+\r\n    '  {\"name\": \"LinkDistance\", \"size\": 5731},'+\r\n    '  {\"name\": \"MaxFlowMinCut\", \"size\": 7840},'+\r\n     ' {\"name\": \"ShortestPaths\", \"size\": 5914},'+\r\n     ' {\"name\": \"SpanningTree\", \"size\": 3416}'+\r\n    ' ]'+\r\n   ' },'+\r\n   ' {'+\r\n    ' \"name\": \"optimization\",'+\r\n    ' \"children\": ['+\r\n    '  {\"name\": \"AspectRatioBanker\", \"size\": 7074}'+\r\n    ' ]'+\r\n   ' }'+\r\n  ' ]'+\r\n ' },'+\r\n ' {'+\r\n  ' \"name\": \"animate\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"Easing\", \"size\": 17010},'+\r\n   ' {\"name\": \"FunctionSequence\", \"size\": 5842},'+\r\n   ' {'+\r\n   '  \"name\": \"interpolate\",'+\r\n   '  \"children\": ['+\r\n   '   {\"name\": \"ArrayInterpolator\", \"size\": 1983},'+\r\n    '  {\"name\": \"ColorInterpolator\", \"size\": 2047},'+\r\n    '  {\"name\": \"DateInterpolator\", \"size\": 1375},'+\r\n    '  {\"name\": \"Interpolator\", \"size\": 8746},'+\r\n    '  {\"name\": \"MatrixInterpolator\", \"size\": 2202},'+\r\n    '  {\"name\": \"NumberInterpolator\", \"size\": 1382},'+\r\n    '  {\"name\": \"ObjectInterpolator\", \"size\": 1629},'+\r\n    '  {\"name\": \"PointInterpolator\", \"size\": 1675},'+\r\n    '  {\"name\": \"RectangleInterpolator\", \"size\": 2042}'+\r\n    ' ]'+\r\n    '},'+\r\n    '{\"name\": \"ISchedulable\", \"size\": 1041},'+\r\n    '{\"name\": \"Parallel\", \"size\": 5176},'+\r\n   ' {\"name\": \"Pause\", \"size\": 449},'+\r\n   ' {\"name\": \"Scheduler\", \"size\": 5593},'+\r\n   ' {\"name\": \"Sequence\", \"size\": 5534},'+\r\n   ' {\"name\": \"Transition\", \"size\": 9201},'+\r\n   ' {\"name\": \"Transitioner\", \"size\": 19975},'+\r\n    '{\"name\": \"TransitionEvent\", \"size\": 1116},'+\r\n    '{\"name\": \"Tween\", \"size\": 6006}'+\r\n   ']'+\r\n ' },'+\r\n  '{'+\r\n  ' \"name\": \"data\",'+\r\n  ' \"children\": ['+\r\n  '  {'+\r\n   '  \"name\": \"converters\",'+\r\n   '  \"children\": ['+\r\n   '   {\"name\": \"Converters\", \"size\": 721},'+\r\n   '   {\"name\": \"DelimitedTextConverter\", \"size\": 4294},'+\r\n   '   {\"name\": \"GraphMLConverter\", \"size\": 9800},'+\r\n    '  {\"name\": \"IDataConverter\", \"size\": 1314},'+\r\n    '  {\"name\": \"JSONConverter\", \"size\": 2220}'+\r\n    ' ]'+\r\n   ' },'+\r\n   ' {\"name\": \"DataField\", \"size\": 1759},'+\r\n   ' {\"name\": \"DataSchema\", \"size\": 2165},'+\r\n   ' {\"name\": \"DataSet\", \"size\": 586},'+\r\n   ' {\"name\": \"DataSource\", \"size\": 3331},'+\r\n   ' {\"name\": \"DataTable\", \"size\": 772},'+\r\n   ' {\"name\": \"DataUtil\", \"size\": 3322}'+\r\n  ' ]'+\r\n ' },'+\r\n ' {'+\r\n '  \"name\": \"display\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"DirtySprite\", \"size\": 8833},'+\r\n  '  {\"name\": \"LineSprite\", \"size\": 1732},'+\r\n  '  {\"name\": \"RectSprite\", \"size\": 3623},'+\r\n  '  {\"name\": \"TextSprite\", \"size\": 10066}'+\r\n  ' ]'+\r\n'  },'+\r\n ' {'+\r\n  ' \"name\": \"flex\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"FlareVis\", \"size\": 4116}'+\r\n  ' ]'+\r\n ' },'+\r\n ' {'+\r\n  ' \"name\": \"physics\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"DragForce\", \"size\": 1082},'+\r\n  '  {\"name\": \"GravityForce\", \"size\": 1336},'+\r\n  '  {\"name\": \"IForce\", \"size\": 319},'+\r\n  '  {\"name\": \"NBodyForce\", \"size\": 10498},'+\r\n  '  {\"name\": \"Particle\", \"size\": 2822},'+\r\n  '  {\"name\": \"Simulation\", \"size\": 9983},'+\r\n  '  {\"name\": \"Spring\", \"size\": 2213},'+\r\n   ' {\"name\": \"SpringForce\", \"size\": 1681}'+\r\n '  ]'+\r\n'  },'+\r\n  '{'+\r\n  ' \"name\": \"query\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"AggregateExpression\", \"size\": 1616},'+\r\n   ' {\"name\": \"And\", \"size\": 1027},'+\r\n   ' {\"name\": \"Arithmetic\", \"size\": 3891},'+\r\n    '{\"name\": \"Average\", \"size\": 891},'+\r\n   ' {\"name\": \"BinaryExpression\", \"size\": 2893},'+\r\n   ' {\"name\": \"Comparison\", \"size\": 5103},'+\r\n  '  {\"name\": \"CompositeExpression\", \"size\": 3677},'+\r\n  '  {\"name\": \"Count\", \"size\": 781},'+\r\n  '  {\"name\": \"DateUtil\", \"size\": 4141},'+\r\n  '  {\"name\": \"Distinct\", \"size\": 933},'+\r\n   ' {\"name\": \"Expression\", \"size\": 5130},'+\r\n  '  {\"name\": \"ExpressionIterator\", \"size\": 3617},'+\r\n  '  {\"name\": \"Fn\", \"size\": 3240},'+\r\n   ' {\"name\": \"If\", \"size\": 2732},'+\r\n   ' {\"name\": \"IsA\", \"size\": 2039},'+\r\n   ' {\"name\": \"Literal\", \"size\": 1214},'+\r\n   ' {\"name\": \"Match\", \"size\": 3748},'+\r\n  '  {\"name\": \"Maximum\", \"size\": 843},'+\r\n   ' {'+\r\n   '  \"name\": \"methods\",'+\r\n    ' \"children\": ['+\r\n    '  {\"name\": \"add\", \"size\": 593},'+\r\n    '  {\"name\": \"and\", \"size\": 330},'+\r\n    '  {\"name\": \"average\", \"size\": 287},'+\r\n    '  {\"name\": \"count\", \"size\": 277},'+\r\n    '  {\"name\": \"distinct\", \"size\": 292},'+\r\n'      {\"name\": \"div\", \"size\": 595},'+\r\n'      {\"name\": \"eq\", \"size\": 594},'+\r\n'      {\"name\": \"fn\", \"size\": 460},'+\r\n'      {\"name\": \"gt\", \"size\": 603},'+\r\n'      {\"name\": \"gte\", \"size\": 625},'+\r\n'      {\"name\": \"iff\", \"size\": 748},'+\r\n'      {\"name\": \"isa\", \"size\": 461},'+\r\n'      {\"name\": \"lt\", \"size\": 597},'+\r\n'      {\"name\": \"lte\", \"size\": 619},'+\r\n'      {\"name\": \"max\", \"size\": 283},'+\r\n'      {\"name\": \"min\", \"size\": 283},'+\r\n'      {\"name\": \"mod\", \"size\": 591},'+\r\n'      {\"name\": \"mul\", \"size\": 603},'+\r\n'      {\"name\": \"neq\", \"size\": 599},'+\r\n'      {\"name\": \"not\", \"size\": 386},'+\r\n'      {\"name\": \"or\", \"size\": 323},'+\r\n'      {\"name\": \"orderby\", \"size\": 307},'+\r\n'      {\"name\": \"range\", \"size\": 772},'+\r\n'      {\"name\": \"select\", \"size\": 296},'+\r\n'      {\"name\": \"stddev\", \"size\": 363},'+\r\n'      {\"name\": \"sub\", \"size\": 600},'+\r\n'      {\"name\": \"sum\", \"size\": 280},'+\r\n'      {\"name\": \"update\", \"size\": 307},'+\r\n'      {\"name\": \"variance\", \"size\": 335},'+\r\n'      {\"name\": \"where\", \"size\": 299},'+\r\n'      {\"name\": \"xor\", \"size\": 354},'+\r\n'      {\"name\": \"_\", \"size\": 264}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Minimum\", \"size\": 843},'+\r\n'    {\"name\": \"Not\", \"size\": 1554},'+\r\n'    {\"name\": \"Or\", \"size\": 970},'+\r\n'    {\"name\": \"Query\", \"size\": 13896},'+\r\n'    {\"name\": \"Range\", \"size\": 1594},'+\r\n'    {\"name\": \"StringUtil\", \"size\": 4130},'+\r\n'    {\"name\": \"Sum\", \"size\": 791},'+\r\n'    {\"name\": \"Variable\", \"size\": 1124},'+\r\n'    {\"name\": \"Variance\", \"size\": 1876},'+\r\n'    {\"name\": \"Xor\", \"size\": 1101}'+\r\n'   ]'+\r\n'  },'+\r\n'  {'+\r\n'   \"name\": \"scale\",'+\r\n'   \"children\": ['+\r\n'    {\"name\": \"IScaleMap\", \"size\": 2105},'+\r\n'    {\"name\": \"LinearScale\", \"size\": 1316},'+\r\n'    {\"name\": \"LogScale\", \"size\": 3151},'+\r\n'    {\"name\": \"OrdinalScale\", \"size\": 3770},'+\r\n'    {\"name\": \"QuantileScale\", \"size\": 2435},'+\r\n'    {\"name\": \"QuantitativeScale\", \"size\": 4839},'+\r\n'    {\"name\": \"RootScale\", \"size\": 1756},'+\r\n'    {\"name\": \"Scale\", \"size\": 4268},'+\r\n'    {\"name\": \"ScaleType\", \"size\": 1821},'+\r\n'    {\"name\": \"TimeScale\", \"size\": 5833}'+\r\n'   ]'+\r\n'  },'+\r\n'  {'+\r\n'   \"name\": \"util\",'+\r\n'   \"children\": ['+\r\n'    {\"name\": \"Arrays\", \"size\": 8258},'+\r\n'    {\"name\": \"Colors\", \"size\": 10001},'+\r\n'    {\"name\": \"Dates\", \"size\": 8217},'+\r\n'    {\"name\": \"Displays\", \"size\": 12555},'+\r\n'    {\"name\": \"Filter\", \"size\": 2324},'+\r\n'    {\"name\": \"Geometry\", \"size\": 10993},'+\r\n'    {'+\r\n'     \"name\": \"heap\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"FibonacciHeap\", \"size\": 9354},'+\r\n'      {\"name\": \"HeapNode\", \"size\": 1233}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"IEvaluable\", \"size\": 335},'+\r\n'    {\"name\": \"IPredicate\", \"size\": 383},'+\r\n'    {\"name\": \"IValueProxy\", \"size\": 874},'+\r\n'    {'+\r\n'     \"name\": \"math\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"DenseMatrix\", \"size\": 3165},'+\r\n'      {\"name\": \"IMatrix\", \"size\": 2815},'+\r\n'      {\"name\": \"SparseMatrix\", \"size\": 3366}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Maths\", \"size\": 17705},'+\r\n'    {\"name\": \"Orientation\", \"size\": 1486},'+\r\n'    {'+\r\n'     \"name\": \"palette\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"ColorPalette\", \"size\": 6367},'+\r\n'      {\"name\": \"Palette\", \"size\": 1229},'+\r\n'      {\"name\": \"ShapePalette\", \"size\": 2059},'+\r\n'      {\"name\": \"SizePalette\", \"size\": 2291}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Property\", \"size\": 5559},'+\r\n'    {\"name\": \"Shapes\", \"size\": 19118},'+\r\n'    {\"name\": \"Sort\", \"size\": 6887},'+\r\n'    {\"name\": \"Stats\", \"size\": 6557},'+\r\n'    {\"name\": \"Strings\", \"size\": 22026}'+\r\n'   ]'+\r\n'  },'+\r\n'  {'+\r\n'   \"name\": \"vis\",'+\r\n'   \"children\": ['+\r\n'    {'+\r\n'     \"name\": \"axis\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"Axes\", \"size\": 1302},'+\r\n'      {\"name\": \"Axis\", \"size\": 24593},'+\r\n'      {\"name\": \"AxisGridLine\", \"size\": 652},'+\r\n'      {\"name\": \"AxisLabel\", \"size\": 636},'+\r\n'      {\"name\": \"CartesianAxes\", \"size\": 6703}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"controls\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"AnchorControl\", \"size\": 2138},'+\r\n'      {\"name\": \"ClickControl\", \"size\": 3824},'+\r\n'      {\"name\": \"Control\", \"size\": 1353},'+\r\n'      {\"name\": \"ControlList\", \"size\": 4665},'+\r\n'      {\"name\": \"DragControl\", \"size\": 2649},'+\r\n'      {\"name\": \"ExpandControl\", \"size\": 2832},'+\r\n'      {\"name\": \"HoverControl\", \"size\": 4896},'+\r\n'      {\"name\": \"IControl\", \"size\": 763},'+\r\n'      {\"name\": \"PanZoomControl\", \"size\": 5222},'+\r\n'      {\"name\": \"SelectionControl\", \"size\": 7862},'+\r\n'      {\"name\": \"TooltipControl\", \"size\": 8435}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"data\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"Data\", \"size\": 20544},'+\r\n'      {\"name\": \"DataList\", \"size\": 19788},'+\r\n'      {\"name\": \"DataSprite\", \"size\": 10349},'+\r\n'      {\"name\": \"EdgeSprite\", \"size\": 3301},'+\r\n'      {\"name\": \"NodeSprite\", \"size\": 19382},'+\r\n'      {'+\r\n'       \"name\": \"render\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"ArrowType\", \"size\": 698},'+\r\n'        {\"name\": \"EdgeRenderer\", \"size\": 5569},'+\r\n'        {\"name\": \"IRenderer\", \"size\": 353},'+\r\n'        {\"name\": \"ShapeRenderer\", \"size\": 2247}'+\r\n'       ]'+\r\n'      },'+\r\n'      {\"name\": \"ScaleBinding\", \"size\": 11275},'+\r\n'      {\"name\": \"Tree\", \"size\": 7147},'+\r\n'      {\"name\": \"TreeBuilder\", \"size\": 9930}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"events\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"DataEvent\", \"size\": 2313},'+\r\n'      {\"name\": \"SelectionEvent\", \"size\": 1880},'+\r\n'      {\"name\": \"TooltipEvent\", \"size\": 1701},'+\r\n'      {\"name\": \"VisualizationEvent\", \"size\": 1117}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"legend\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"Legend\", \"size\": 20859},'+\r\n'      {\"name\": \"LegendItem\", \"size\": 4614},'+\r\n'      {\"name\": \"LegendRange\", \"size\": 10530}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"operator\",'+\r\n'     \"children\": ['+\r\n'      {'+\r\n'       \"name\": \"distortion\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"BifocalDistortion\", \"size\": 4461},'+\r\n'        {\"name\": \"Distortion\", \"size\": 6314},'+\r\n'        {\"name\": \"FisheyeDistortion\", \"size\": 3444}'+\r\n'       ]'+\r\n'      },'+\r\n'      {'+\r\n'       \"name\": \"encoder\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"ColorEncoder\", \"size\": 3179},'+\r\n'        {\"name\": \"Encoder\", \"size\": 4060},'+\r\n'        {\"name\": \"PropertyEncoder\", \"size\": 4138},'+\r\n'        {\"name\": \"ShapeEncoder\", \"size\": 1690},'+\r\n'        {\"name\": \"SizeEncoder\", \"size\": 1830}'+\r\n'       ]'+\r\n'      },'+\r\n'      {'+\r\n'       \"name\": \"filter\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"FisheyeTreeFilter\", \"size\": 5219},'+\r\n'        {\"name\": \"GraphDistanceFilter\", \"size\": 3165},'+\r\n'        {\"name\": \"VisibilityFilter\", \"size\": 3509}'+\r\n'       ]'+\r\n'      },'+\r\n'      {\"name\": \"IOperator\", \"size\": 1286},'+\r\n'      {'+\r\n'       \"name\": \"label\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"Labeler\", \"size\": 9956},'+\r\n'        {\"name\": \"RadialLabeler\", \"size\": 3899},'+\r\n'        {\"name\": \"StackedAreaLabeler\", \"size\": 3202}'+\r\n'       ]'+\r\n'      },'+\r\n'      {'+\r\n'       \"name\": \"layout\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"AxisLayout\", \"size\": 6725},'+\r\n'        {\"name\": \"BundledEdgeRouter\", \"size\": 3727},'+\r\n'        {\"name\": \"CircleLayout\", \"size\": 9317},'+\r\n'        {\"name\": \"CirclePackingLayout\", \"size\": 12003},'+\r\n'        {\"name\": \"DendrogramLayout\", \"size\": 4853},'+\r\n'        {\"name\": \"ForceDirectedLayout\", \"size\": 8411},'+\r\n'        {\"name\": \"IcicleTreeLayout\", \"size\": 4864},'+\r\n'        {\"name\": \"IndentedTreeLayout\", \"size\": 3174},'+\r\n'        {\"name\": \"Layout\", \"size\": 7881},'+\r\n'        {\"name\": \"NodeLinkTreeLayout\", \"size\": 12870},'+\r\n'        {\"name\": \"PieLayout\", \"size\": 2728},'+\r\n'        {\"name\": \"RadialTreeLayout\", \"size\": 12348},'+\r\n'        {\"name\": \"RandomLayout\", \"size\": 870},'+\r\n'        {\"name\": \"StackedAreaLayout\", \"size\": 9121},'+\r\n'        {\"name\": \"TreeMapLayout\", \"size\": 9191}'+\r\n'       ]'+\r\n'      },'+\r\n'      {\"name\": \"Operator\", \"size\": 2490},'+\r\n'      {\"name\": \"OperatorList\", \"size\": 5248},'+\r\n'      {\"name\": \"OperatorSequence\", \"size\": 4190},'+\r\n'      {\"name\": \"OperatorSwitch\", \"size\": 2581},'+\r\n'      {\"name\": \"SortOperator\", \"size\": 2023}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Visualization\", \"size\": 16540}'+\r\n'   ]'+\r\n'  }'+\r\n' ]}';\r\n\r\n    var diameter = 800;\r\n\r\n    var tree = d3.layout.tree()\r\n      .size([360, diameter \/ 2 - 120])\r\n      .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) \/ a.depth; });\r\n\r\n    var diagonal = d3.svg.diagonal.radial()\r\n      .projection(function(d) { return [d.y, d.x \/ 180 * Math.PI]; });\r\n\r\n    var svg = d3.select(\"#d3-plot\").append(\"svg\")\r\n      .attr(\"width\", diameter)\r\n      .attr(\"height\", diameter - 150)\r\n    .append(\"g\")\r\n      .attr(\"transform\", \"translate(\" + diameter \/ 2 + \",\" + diameter \/ 2 + \")\");\r\n\r\n \/\/   d3.json(\"#flareJson\", function(error, root) {\r\n root = JSON.parse( myJson );\r\n\r\n    var nodes = tree.nodes(root),\r\n        links = tree.links(nodes);\r\n\r\n    var link = svg.selectAll(\".link\")\r\n        .data(links)\r\n      .enter().append(\"path\")\r\n        .attr(\"class\", \"link\")\r\n        .attr(\"d\", diagonal);\r\n\r\n    var node = svg.selectAll(\".node\")\r\n        .data(nodes)\r\n      .enter().append(\"g\")\r\n        .attr(\"class\", \"node\")\r\n        .attr(\"transform\", function(d) { return \"rotate(\" + (d.x - 90) + \")translate(\" + d.y + \")\"; })\r\n\r\n    node.append(\"circle\")\r\n        .attr(\"r\", 4.5);\r\n\r\n    node.append(\"text\")\r\n        .attr(\"dy\", \".31em\")\r\n        .attr(\"text-anchor\", function(d) { return d.x < 180 ? \"start\" : \"end\"; })\r\n        .attr(\"transform\", function(d) { return d.x < 180 ? \"translate(8)\" : \"rotate(180)translate(-8)\"; })\r\n        .text(function(d) { return d.name; });\r\n    \/\/});\r\n\r\n    d3.select(self.frameElement).style(\"height\", diameter - 150 + \"px\");\r\n}\r\n<\/script>\r\n<br \/>\nUsing our plugin, named <em>Blazing Charts<\/em>, I added the following shortcode to this post:<\/p>\n<pre toggle=\"no\">(left-bracket)BlazingChart charttype=\"d3\" source=\"d3-js-sample-1\"(right bracket)<\/pre>\n<p>The first parameter specifies which charting library is used. The second parameter is the slug of a Custom Post Type, named <em>Chart Snippets<\/em>, introduced by that plugin.<\/p>\n<p>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:<\/p>\n<p>&nbsp;<\/p>\n<pre lang=\"html\" toggle=\"no\">&lt;div id=\"d3-plot\"&gt;\r\n&lt;\/div&gt;\r\n&lt;style&gt;\r\n\r\n.node circle {\r\n  fill: #fff;\r\n  stroke: steelblue;\r\n  stroke-width: 1.5px;\r\n}\r\n\r\n.node {\r\n  font: 10px sans-serif;\r\n}\r\n\r\n.link {\r\n  fill: none;\r\n  stroke: #ccc;\r\n  stroke-width: 1.5px;\r\n}\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\nwindow.onload = function () {\r\n\r\nvar myJson = '{'+\r\n '\"name\": \"flare\",'+\r\n '\"children\": ['+\r\n  '{'+\r\n   '\"name\": \"analytics\",'+\r\n   '\"children\": ['+\r\n    '{'+\r\n     '\"name\": \"cluster\",'+\r\n     '\"children\": ['+\r\n     ' {\"name\": \"AgglomerativeCluster\", \"size\": 3938},'+\r\n     ' {\"name\": \"CommunityStructure\", \"size\": 3812},'+\r\n     ' {\"name\": \"HierarchicalCluster\", \"size\": 6714},'+\r\n     ' {\"name\": \"MergeEdge\", \"size\": 743}'+\r\n     ']'+\r\n    '},'+\r\n    '{'+\r\n    ' \"name\": \"graph\",'+\r\n    ' \"children\": ['+\r\n    '  {\"name\": \"BetweennessCentrality\", \"size\": 3534},'+\r\n    '  {\"name\": \"LinkDistance\", \"size\": 5731},'+\r\n    '  {\"name\": \"MaxFlowMinCut\", \"size\": 7840},'+\r\n     ' {\"name\": \"ShortestPaths\", \"size\": 5914},'+\r\n     ' {\"name\": \"SpanningTree\", \"size\": 3416}'+\r\n    ' ]'+\r\n   ' },'+\r\n   ' {'+\r\n    ' \"name\": \"optimization\",'+\r\n    ' \"children\": ['+\r\n    '  {\"name\": \"AspectRatioBanker\", \"size\": 7074}'+\r\n    ' ]'+\r\n   ' }'+\r\n  ' ]'+\r\n ' },'+\r\n ' {'+\r\n  ' \"name\": \"animate\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"Easing\", \"size\": 17010},'+\r\n   ' {\"name\": \"FunctionSequence\", \"size\": 5842},'+\r\n   ' {'+\r\n   '  \"name\": \"interpolate\",'+\r\n   '  \"children\": ['+\r\n   '   {\"name\": \"ArrayInterpolator\", \"size\": 1983},'+\r\n    '  {\"name\": \"ColorInterpolator\", \"size\": 2047},'+\r\n    '  {\"name\": \"DateInterpolator\", \"size\": 1375},'+\r\n    '  {\"name\": \"Interpolator\", \"size\": 8746},'+\r\n    '  {\"name\": \"MatrixInterpolator\", \"size\": 2202},'+\r\n    '  {\"name\": \"NumberInterpolator\", \"size\": 1382},'+\r\n    '  {\"name\": \"ObjectInterpolator\", \"size\": 1629},'+\r\n    '  {\"name\": \"PointInterpolator\", \"size\": 1675},'+\r\n    '  {\"name\": \"RectangleInterpolator\", \"size\": 2042}'+\r\n    ' ]'+\r\n    '},'+\r\n    '{\"name\": \"ISchedulable\", \"size\": 1041},'+\r\n    '{\"name\": \"Parallel\", \"size\": 5176},'+\r\n   ' {\"name\": \"Pause\", \"size\": 449},'+\r\n   ' {\"name\": \"Scheduler\", \"size\": 5593},'+\r\n   ' {\"name\": \"Sequence\", \"size\": 5534},'+\r\n   ' {\"name\": \"Transition\", \"size\": 9201},'+\r\n   ' {\"name\": \"Transitioner\", \"size\": 19975},'+\r\n    '{\"name\": \"TransitionEvent\", \"size\": 1116},'+\r\n    '{\"name\": \"Tween\", \"size\": 6006}'+\r\n   ']'+\r\n ' },'+\r\n  '{'+\r\n  ' \"name\": \"data\",'+\r\n  ' \"children\": ['+\r\n  '  {'+\r\n   '  \"name\": \"converters\",'+\r\n   '  \"children\": ['+\r\n   '   {\"name\": \"Converters\", \"size\": 721},'+\r\n   '   {\"name\": \"DelimitedTextConverter\", \"size\": 4294},'+\r\n   '   {\"name\": \"GraphMLConverter\", \"size\": 9800},'+\r\n    '  {\"name\": \"IDataConverter\", \"size\": 1314},'+\r\n    '  {\"name\": \"JSONConverter\", \"size\": 2220}'+\r\n    ' ]'+\r\n   ' },'+\r\n   ' {\"name\": \"DataField\", \"size\": 1759},'+\r\n   ' {\"name\": \"DataSchema\", \"size\": 2165},'+\r\n   ' {\"name\": \"DataSet\", \"size\": 586},'+\r\n   ' {\"name\": \"DataSource\", \"size\": 3331},'+\r\n   ' {\"name\": \"DataTable\", \"size\": 772},'+\r\n   ' {\"name\": \"DataUtil\", \"size\": 3322}'+\r\n  ' ]'+\r\n ' },'+\r\n ' {'+\r\n '  \"name\": \"display\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"DirtySprite\", \"size\": 8833},'+\r\n  '  {\"name\": \"LineSprite\", \"size\": 1732},'+\r\n  '  {\"name\": \"RectSprite\", \"size\": 3623},'+\r\n  '  {\"name\": \"TextSprite\", \"size\": 10066}'+\r\n  ' ]'+\r\n'  },'+\r\n ' {'+\r\n  ' \"name\": \"flex\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"FlareVis\", \"size\": 4116}'+\r\n  ' ]'+\r\n ' },'+\r\n ' {'+\r\n  ' \"name\": \"physics\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"DragForce\", \"size\": 1082},'+\r\n  '  {\"name\": \"GravityForce\", \"size\": 1336},'+\r\n  '  {\"name\": \"IForce\", \"size\": 319},'+\r\n  '  {\"name\": \"NBodyForce\", \"size\": 10498},'+\r\n  '  {\"name\": \"Particle\", \"size\": 2822},'+\r\n  '  {\"name\": \"Simulation\", \"size\": 9983},'+\r\n  '  {\"name\": \"Spring\", \"size\": 2213},'+\r\n   ' {\"name\": \"SpringForce\", \"size\": 1681}'+\r\n '  ]'+\r\n'  },'+\r\n  '{'+\r\n  ' \"name\": \"query\",'+\r\n  ' \"children\": ['+\r\n  '  {\"name\": \"AggregateExpression\", \"size\": 1616},'+\r\n   ' {\"name\": \"And\", \"size\": 1027},'+\r\n   ' {\"name\": \"Arithmetic\", \"size\": 3891},'+\r\n    '{\"name\": \"Average\", \"size\": 891},'+\r\n   ' {\"name\": \"BinaryExpression\", \"size\": 2893},'+\r\n   ' {\"name\": \"Comparison\", \"size\": 5103},'+\r\n  '  {\"name\": \"CompositeExpression\", \"size\": 3677},'+\r\n  '  {\"name\": \"Count\", \"size\": 781},'+\r\n  '  {\"name\": \"DateUtil\", \"size\": 4141},'+\r\n  '  {\"name\": \"Distinct\", \"size\": 933},'+\r\n   ' {\"name\": \"Expression\", \"size\": 5130},'+\r\n  '  {\"name\": \"ExpressionIterator\", \"size\": 3617},'+\r\n  '  {\"name\": \"Fn\", \"size\": 3240},'+\r\n   ' {\"name\": \"If\", \"size\": 2732},'+\r\n   ' {\"name\": \"IsA\", \"size\": 2039},'+\r\n   ' {\"name\": \"Literal\", \"size\": 1214},'+\r\n   ' {\"name\": \"Match\", \"size\": 3748},'+\r\n  '  {\"name\": \"Maximum\", \"size\": 843},'+\r\n   ' {'+\r\n   '  \"name\": \"methods\",'+\r\n    ' \"children\": ['+\r\n    '  {\"name\": \"add\", \"size\": 593},'+\r\n    '  {\"name\": \"and\", \"size\": 330},'+\r\n    '  {\"name\": \"average\", \"size\": 287},'+\r\n    '  {\"name\": \"count\", \"size\": 277},'+\r\n    '  {\"name\": \"distinct\", \"size\": 292},'+\r\n'      {\"name\": \"div\", \"size\": 595},'+\r\n'      {\"name\": \"eq\", \"size\": 594},'+\r\n'      {\"name\": \"fn\", \"size\": 460},'+\r\n'      {\"name\": \"gt\", \"size\": 603},'+\r\n'      {\"name\": \"gte\", \"size\": 625},'+\r\n'      {\"name\": \"iff\", \"size\": 748},'+\r\n'      {\"name\": \"isa\", \"size\": 461},'+\r\n'      {\"name\": \"lt\", \"size\": 597},'+\r\n'      {\"name\": \"lte\", \"size\": 619},'+\r\n'      {\"name\": \"max\", \"size\": 283},'+\r\n'      {\"name\": \"min\", \"size\": 283},'+\r\n'      {\"name\": \"mod\", \"size\": 591},'+\r\n'      {\"name\": \"mul\", \"size\": 603},'+\r\n'      {\"name\": \"neq\", \"size\": 599},'+\r\n'      {\"name\": \"not\", \"size\": 386},'+\r\n'      {\"name\": \"or\", \"size\": 323},'+\r\n'      {\"name\": \"orderby\", \"size\": 307},'+\r\n'      {\"name\": \"range\", \"size\": 772},'+\r\n'      {\"name\": \"select\", \"size\": 296},'+\r\n'      {\"name\": \"stddev\", \"size\": 363},'+\r\n'      {\"name\": \"sub\", \"size\": 600},'+\r\n'      {\"name\": \"sum\", \"size\": 280},'+\r\n'      {\"name\": \"update\", \"size\": 307},'+\r\n'      {\"name\": \"variance\", \"size\": 335},'+\r\n'      {\"name\": \"where\", \"size\": 299},'+\r\n'      {\"name\": \"xor\", \"size\": 354},'+\r\n'      {\"name\": \"_\", \"size\": 264}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Minimum\", \"size\": 843},'+\r\n'    {\"name\": \"Not\", \"size\": 1554},'+\r\n'    {\"name\": \"Or\", \"size\": 970},'+\r\n'    {\"name\": \"Query\", \"size\": 13896},'+\r\n'    {\"name\": \"Range\", \"size\": 1594},'+\r\n'    {\"name\": \"StringUtil\", \"size\": 4130},'+\r\n'    {\"name\": \"Sum\", \"size\": 791},'+\r\n'    {\"name\": \"Variable\", \"size\": 1124},'+\r\n'    {\"name\": \"Variance\", \"size\": 1876},'+\r\n'    {\"name\": \"Xor\", \"size\": 1101}'+\r\n'   ]'+\r\n'  },'+\r\n'  {'+\r\n'   \"name\": \"scale\",'+\r\n'   \"children\": ['+\r\n'    {\"name\": \"IScaleMap\", \"size\": 2105},'+\r\n'    {\"name\": \"LinearScale\", \"size\": 1316},'+\r\n'    {\"name\": \"LogScale\", \"size\": 3151},'+\r\n'    {\"name\": \"OrdinalScale\", \"size\": 3770},'+\r\n'    {\"name\": \"QuantileScale\", \"size\": 2435},'+\r\n'    {\"name\": \"QuantitativeScale\", \"size\": 4839},'+\r\n'    {\"name\": \"RootScale\", \"size\": 1756},'+\r\n'    {\"name\": \"Scale\", \"size\": 4268},'+\r\n'    {\"name\": \"ScaleType\", \"size\": 1821},'+\r\n'    {\"name\": \"TimeScale\", \"size\": 5833}'+\r\n'   ]'+\r\n'  },'+\r\n'  {'+\r\n'   \"name\": \"util\",'+\r\n'   \"children\": ['+\r\n'    {\"name\": \"Arrays\", \"size\": 8258},'+\r\n'    {\"name\": \"Colors\", \"size\": 10001},'+\r\n'    {\"name\": \"Dates\", \"size\": 8217},'+\r\n'    {\"name\": \"Displays\", \"size\": 12555},'+\r\n'    {\"name\": \"Filter\", \"size\": 2324},'+\r\n'    {\"name\": \"Geometry\", \"size\": 10993},'+\r\n'    {'+\r\n'     \"name\": \"heap\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"FibonacciHeap\", \"size\": 9354},'+\r\n'      {\"name\": \"HeapNode\", \"size\": 1233}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"IEvaluable\", \"size\": 335},'+\r\n'    {\"name\": \"IPredicate\", \"size\": 383},'+\r\n'    {\"name\": \"IValueProxy\", \"size\": 874},'+\r\n'    {'+\r\n'     \"name\": \"math\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"DenseMatrix\", \"size\": 3165},'+\r\n'      {\"name\": \"IMatrix\", \"size\": 2815},'+\r\n'      {\"name\": \"SparseMatrix\", \"size\": 3366}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Maths\", \"size\": 17705},'+\r\n'    {\"name\": \"Orientation\", \"size\": 1486},'+\r\n'    {'+\r\n'     \"name\": \"palette\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"ColorPalette\", \"size\": 6367},'+\r\n'      {\"name\": \"Palette\", \"size\": 1229},'+\r\n'      {\"name\": \"ShapePalette\", \"size\": 2059},'+\r\n'      {\"name\": \"SizePalette\", \"size\": 2291}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Property\", \"size\": 5559},'+\r\n'    {\"name\": \"Shapes\", \"size\": 19118},'+\r\n'    {\"name\": \"Sort\", \"size\": 6887},'+\r\n'    {\"name\": \"Stats\", \"size\": 6557},'+\r\n'    {\"name\": \"Strings\", \"size\": 22026}'+\r\n'   ]'+\r\n'  },'+\r\n'  {'+\r\n'   \"name\": \"vis\",'+\r\n'   \"children\": ['+\r\n'    {'+\r\n'     \"name\": \"axis\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"Axes\", \"size\": 1302},'+\r\n'      {\"name\": \"Axis\", \"size\": 24593},'+\r\n'      {\"name\": \"AxisGridLine\", \"size\": 652},'+\r\n'      {\"name\": \"AxisLabel\", \"size\": 636},'+\r\n'      {\"name\": \"CartesianAxes\", \"size\": 6703}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"controls\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"AnchorControl\", \"size\": 2138},'+\r\n'      {\"name\": \"ClickControl\", \"size\": 3824},'+\r\n'      {\"name\": \"Control\", \"size\": 1353},'+\r\n'      {\"name\": \"ControlList\", \"size\": 4665},'+\r\n'      {\"name\": \"DragControl\", \"size\": 2649},'+\r\n'      {\"name\": \"ExpandControl\", \"size\": 2832},'+\r\n'      {\"name\": \"HoverControl\", \"size\": 4896},'+\r\n'      {\"name\": \"IControl\", \"size\": 763},'+\r\n'      {\"name\": \"PanZoomControl\", \"size\": 5222},'+\r\n'      {\"name\": \"SelectionControl\", \"size\": 7862},'+\r\n'      {\"name\": \"TooltipControl\", \"size\": 8435}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"data\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"Data\", \"size\": 20544},'+\r\n'      {\"name\": \"DataList\", \"size\": 19788},'+\r\n'      {\"name\": \"DataSprite\", \"size\": 10349},'+\r\n'      {\"name\": \"EdgeSprite\", \"size\": 3301},'+\r\n'      {\"name\": \"NodeSprite\", \"size\": 19382},'+\r\n'      {'+\r\n'       \"name\": \"render\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"ArrowType\", \"size\": 698},'+\r\n'        {\"name\": \"EdgeRenderer\", \"size\": 5569},'+\r\n'        {\"name\": \"IRenderer\", \"size\": 353},'+\r\n'        {\"name\": \"ShapeRenderer\", \"size\": 2247}'+\r\n'       ]'+\r\n'      },'+\r\n'      {\"name\": \"ScaleBinding\", \"size\": 11275},'+\r\n'      {\"name\": \"Tree\", \"size\": 7147},'+\r\n'      {\"name\": \"TreeBuilder\", \"size\": 9930}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"events\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"DataEvent\", \"size\": 2313},'+\r\n'      {\"name\": \"SelectionEvent\", \"size\": 1880},'+\r\n'      {\"name\": \"TooltipEvent\", \"size\": 1701},'+\r\n'      {\"name\": \"VisualizationEvent\", \"size\": 1117}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"legend\",'+\r\n'     \"children\": ['+\r\n'      {\"name\": \"Legend\", \"size\": 20859},'+\r\n'      {\"name\": \"LegendItem\", \"size\": 4614},'+\r\n'      {\"name\": \"LegendRange\", \"size\": 10530}'+\r\n'     ]'+\r\n'    },'+\r\n'    {'+\r\n'     \"name\": \"operator\",'+\r\n'     \"children\": ['+\r\n'      {'+\r\n'       \"name\": \"distortion\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"BifocalDistortion\", \"size\": 4461},'+\r\n'        {\"name\": \"Distortion\", \"size\": 6314},'+\r\n'        {\"name\": \"FisheyeDistortion\", \"size\": 3444}'+\r\n'       ]'+\r\n'      },'+\r\n'      {'+\r\n'       \"name\": \"encoder\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"ColorEncoder\", \"size\": 3179},'+\r\n'        {\"name\": \"Encoder\", \"size\": 4060},'+\r\n'        {\"name\": \"PropertyEncoder\", \"size\": 4138},'+\r\n'        {\"name\": \"ShapeEncoder\", \"size\": 1690},'+\r\n'        {\"name\": \"SizeEncoder\", \"size\": 1830}'+\r\n'       ]'+\r\n'      },'+\r\n'      {'+\r\n'       \"name\": \"filter\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"FisheyeTreeFilter\", \"size\": 5219},'+\r\n'        {\"name\": \"GraphDistanceFilter\", \"size\": 3165},'+\r\n'        {\"name\": \"VisibilityFilter\", \"size\": 3509}'+\r\n'       ]'+\r\n'      },'+\r\n'      {\"name\": \"IOperator\", \"size\": 1286},'+\r\n'      {'+\r\n'       \"name\": \"label\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"Labeler\", \"size\": 9956},'+\r\n'        {\"name\": \"RadialLabeler\", \"size\": 3899},'+\r\n'        {\"name\": \"StackedAreaLabeler\", \"size\": 3202}'+\r\n'       ]'+\r\n'      },'+\r\n'      {'+\r\n'       \"name\": \"layout\",'+\r\n'       \"children\": ['+\r\n'        {\"name\": \"AxisLayout\", \"size\": 6725},'+\r\n'        {\"name\": \"BundledEdgeRouter\", \"size\": 3727},'+\r\n'        {\"name\": \"CircleLayout\", \"size\": 9317},'+\r\n'        {\"name\": \"CirclePackingLayout\", \"size\": 12003},'+\r\n'        {\"name\": \"DendrogramLayout\", \"size\": 4853},'+\r\n'        {\"name\": \"ForceDirectedLayout\", \"size\": 8411},'+\r\n'        {\"name\": \"IcicleTreeLayout\", \"size\": 4864},'+\r\n'        {\"name\": \"IndentedTreeLayout\", \"size\": 3174},'+\r\n'        {\"name\": \"Layout\", \"size\": 7881},'+\r\n'        {\"name\": \"NodeLinkTreeLayout\", \"size\": 12870},'+\r\n'        {\"name\": \"PieLayout\", \"size\": 2728},'+\r\n'        {\"name\": \"RadialTreeLayout\", \"size\": 12348},'+\r\n'        {\"name\": \"RandomLayout\", \"size\": 870},'+\r\n'        {\"name\": \"StackedAreaLayout\", \"size\": 9121},'+\r\n'        {\"name\": \"TreeMapLayout\", \"size\": 9191}'+\r\n'       ]'+\r\n'      },'+\r\n'      {\"name\": \"Operator\", \"size\": 2490},'+\r\n'      {\"name\": \"OperatorList\", \"size\": 5248},'+\r\n'      {\"name\": \"OperatorSequence\", \"size\": 4190},'+\r\n'      {\"name\": \"OperatorSwitch\", \"size\": 2581},'+\r\n'      {\"name\": \"SortOperator\", \"size\": 2023}'+\r\n'     ]'+\r\n'    },'+\r\n'    {\"name\": \"Visualization\", \"size\": 16540}'+\r\n'   ]'+\r\n'  }'+\r\n' ]}';\r\n\r\n    var diameter = 800;\r\n\r\n    var tree = d3.layout.tree()\r\n      .size([360, diameter \/ 2 - 120])\r\n      .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) \/ a.depth; });\r\n\r\n    var diagonal = d3.svg.diagonal.radial()\r\n      .projection(function(d) { return [d.y, d.x \/ 180 * Math.PI]; });\r\n\r\n    var svg = d3.select(\"#d3-plot\").append(\"svg\")\r\n      .attr(\"width\", diameter)\r\n      .attr(\"height\", diameter - 150)\r\n    .append(\"g\")\r\n      .attr(\"transform\", \"translate(\" + diameter \/ 2 + \",\" + diameter \/ 2 + \")\");\r\n\r\n \/\/   d3.json(\"#flareJson\", function(error, root) {\r\n root = JSON.parse( myJson );\r\n\r\n    var nodes = tree.nodes(root),\r\n        links = tree.links(nodes);\r\n\r\n    var link = svg.selectAll(\".link\")\r\n        .data(links)\r\n      .enter().append(\"path\")\r\n        .attr(\"class\", \"link\")\r\n        .attr(\"d\", diagonal);\r\n\r\n    var node = svg.selectAll(\".node\")\r\n        .data(nodes)\r\n      .enter().append(\"g\")\r\n        .attr(\"class\", \"node\")\r\n        .attr(\"transform\", function(d) { return \"rotate(\" + (d.x - 90) + \")translate(\" + d.y + \")\"; })\r\n\r\n    node.append(\"circle\")\r\n        .attr(\"r\", 4.5);\r\n\r\n    node.append(\"text\")\r\n        .attr(\"dy\", \".31em\")\r\n        .attr(\"text-anchor\", function(d) { return d.x &lt; 180 ? \"start\" : \"end\"; })\r\n        .attr(\"transform\", function(d) { return d.x &lt; 180 ? \"translate(8)\" : \"rotate(180)translate(-8)\"; })\r\n        .text(function(d) { return d.name; });\r\n    \/\/});\r\n\r\n    d3.select(self.frameElement).style(\"height\", diameter - 150 + \"px\");\r\n}\r\n&lt;\/script&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,17],"tags":[20],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-chart-libraries","category-d3-js","tag-d3-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>D3.js Sample: Radial Reingold\u2013Tilford Tree - WordPress Demo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D3.js Sample: Radial Reingold\u2013Tilford Tree - WordPress Demo\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress Demo\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/blazingspider\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-31T06:30:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-31T06:51:55+00:00\" \/>\n<meta name=\"author\" content=\"massoud Shakeri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BlazingSpider\" \/>\n<meta name=\"twitter:site\" content=\"@BlazingSpider\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"massoud Shakeri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/\",\"url\":\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/\",\"name\":\"D3.js Sample: Radial Reingold\u2013Tilford Tree - WordPress Demo\",\"isPartOf\":{\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#website\"},\"datePublished\":\"2015-08-31T06:30:59+00:00\",\"dateModified\":\"2015-08-31T06:51:55+00:00\",\"author\":{\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd\"},\"breadcrumb\":{\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blazingspider.com\/wp-demo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D3.js Sample: Radial Reingold\u2013Tilford Tree\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#website\",\"url\":\"https:\/\/blazingspider.com\/wp-demo\/\",\"name\":\"WordPress Demo\",\"description\":\"Blazing Spider WordPress Demo\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blazingspider.com\/wp-demo\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd\",\"name\":\"massoud Shakeri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g\",\"caption\":\"massoud Shakeri\"},\"sameAs\":[\"http:\/\/blazingspider.com\"],\"url\":\"https:\/\/blazingspider.com\/wp-demo\/author\/massoudshakeri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D3.js Sample: Radial Reingold\u2013Tilford Tree - WordPress Demo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/","og_locale":"en_US","og_type":"article","og_title":"D3.js Sample: Radial Reingold\u2013Tilford Tree - WordPress Demo","og_description":"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.","og_url":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/","og_site_name":"WordPress Demo","article_publisher":"https:\/\/www.facebook.com\/blazingspider","article_published_time":"2015-08-31T06:30:59+00:00","article_modified_time":"2015-08-31T06:51:55+00:00","author":"massoud Shakeri","twitter_card":"summary_large_image","twitter_creator":"@BlazingSpider","twitter_site":"@BlazingSpider","twitter_misc":{"Written by":"massoud Shakeri","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/","url":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/","name":"D3.js Sample: Radial Reingold\u2013Tilford Tree - WordPress Demo","isPartOf":{"@id":"https:\/\/blazingspider.com\/wp-demo\/#website"},"datePublished":"2015-08-31T06:30:59+00:00","dateModified":"2015-08-31T06:51:55+00:00","author":{"@id":"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd"},"breadcrumb":{"@id":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blazingspider.com\/wp-demo\/105\/d3-js-sample-radial-reingold-tilford-tree\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blazingspider.com\/wp-demo\/"},{"@type":"ListItem","position":2,"name":"D3.js Sample: Radial Reingold\u2013Tilford Tree"}]},{"@type":"WebSite","@id":"https:\/\/blazingspider.com\/wp-demo\/#website","url":"https:\/\/blazingspider.com\/wp-demo\/","name":"WordPress Demo","description":"Blazing Spider WordPress Demo","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blazingspider.com\/wp-demo\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/78f615e83cf347ec4b200f825ba2fecd","name":"massoud Shakeri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blazingspider.com\/wp-demo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3f3d05ee01040cb3ff9bd45b9a45027330209a9a0807f4ad9b195ec7f678f333?s=96&d=mm&r=g","caption":"massoud Shakeri"},"sameAs":["http:\/\/blazingspider.com"],"url":"https:\/\/blazingspider.com\/wp-demo\/author\/massoudshakeri\/"}]}},"_links":{"self":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":4,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/posts\/105\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blazingspider.com\/wp-demo\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}