title: d3 refocusable tree Chart in R
body: <p><strong>Background:</strong>
  I am new to both R and Javascript, and recently I came across an request to create a chart in R using D3. I have decent understanding of R but javascript is almost alien to me.We are trying to replicate the below chart in R using r2d3 library.</p>
  
  <p><strong>Chart Link</strong>
  <a href="https://codepen.io/mikefab/full/IDdts" rel="nofollow noreferrer">https://codepen.io/mikefab/full/IDdts</a></p>
  
  <p>The link above shows the Chart and the Javascript &amp; CSS behind it. The data is being prepared in the Javascript. I created a jason file for the data and saved the Javascript as "<strong><em>rtree.js</em></strong>" and CSS as "<strong><em>rtree.css</em></strong>" file and a separate dependencies file "<strong><em>jquery1.js</em></strong>" from the link (<a href="http://code.jquery.com/jquery-2.1.1.min.js" rel="nofollow noreferrer">http://code.jquery.com/jquery-2.1.1.min.js</a>) tried to use it in the r2d3 function in r. The code is below</p>
  
  <pre><code>library(r2d3)
  r2d3(data=read_json("flare.json"), d3_version = 3, script = 
   "rtree.js",css="rtree.css",dependencies = "jquery1.js",viewer = "internal")
  </code></pre>
  
  <p>I am constantly getting the error</p>
  
  <pre><code>Error: Cannot set property 'x0' of undefined in (rtree.js#221:4)
  TypeError: Cannot set property 'x0' of undefined
  at r2d3-script-783:226:11
  </code></pre>
  
  <p>I have done a lot of research online, and the only thing i found out that this javascript code is correct and working, but when I am trying to plug into R, I am getting this issue.</p>
  
  <p>It will be a great help if the community here can help me in identifying what I am missing or doing incorrectly and also show me the right path forward.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Edit 1 : Adding the flare.jason, rtree.js and rtree.css code below</strong></p>
  
  <p><strong>flare.json</strong></p>
  
  <pre><code>{
  "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}
  ]
  }
  ]
  }
  </code></pre>
  
  <p><strong>rtree.js</strong></p>
  
  <pre><code>(function() {
  var construct_generations, diagonal, diameter, div, duration, height, i, radius, reconstruct_ancestors, reform_focus, root, store_and_update, svg, tree, treeData, update, zoom;
  
  treeData = data;
  tree = d3.layout.tree().size([360, radius - 120]);
  
  
  // ************** Generate the tree diagram *****************
  window.current_nodes = [];
  
  update = function(source) {
  var link, links, node, nodeEnter, nodeExit, nodeUpdate, nodes;
  // Compute the new tree layout.
  nodes = tree.nodes(root).reverse();
  links = tree.links(nodes);
  // Normalize for fixed-depth.
  nodes.forEach(function(d) {
  return d.y = d.depth * 80;
  });
  // Update the nodes…
  node = svg.selectAll("g.node").data(nodes, function(d) {
  return d.id || (d.id = ++i);
  });
  // Enter any new nodes at the parent's previous position.
  nodeEnter = node.enter().append("g").attr("class", "node").attr("transform", function(d) {}, {}, "translate(" + source.y0 + "," + source.x0 + ")").on("mouseover", function(d) {}).on("click", function(d) {
  var clicked_same_node;
  clicked_same_node = false;
  if (window.current_nodes.length &gt; 0) {
  if (d.id === window.current_nodes[window.current_nodes.length - 1][0].id) {
  clicked_same_node = true;
  d3.event.stopPropagation();
  }
  }
  if (!clicked_same_node) {
  return store_and_update(d);
  }
  });
  nodeEnter.append("circle").attr("r", 1e-6).style("fill", function(d) {
  if (d._children) {
  return "lightsteelblue";
  } else {
  return "#fff";
  }
  });
  nodeEnter.append("text").attr("dy", ".31em").attr("text-anchor", function(d) {
  if (d.x &lt; 180) {
  return "start";
  } else {
  return "end";
  }
  }).attr("transform", function(d) {
  if (d.x &lt; 180) {
  return "translate(8)";
  } else {
  return "rotate(180)translate(-8)";
  }
  }).text(function(d) {
  return d.name;
  });
  // Transition nodes to their new position.
  nodeUpdate = node.transition().duration(duration).attr("transform", function(d) {
  return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
  });
  nodeUpdate.select("circle").attr("r", 10).style("fill", function(d) {
  if (d._children) {
  return "black";
  } else {
  return "black";
  }
  });
  nodeUpdate.select("text").style("fill-opacity", 1).attr("dy", ".31em").attr("text-anchor", function(d) {
  if (d.x &lt; 180) {
  return "start";
  } else {
  return "end";
  }
  }).attr("transform", function(d) {
  if (d.x &lt; 180) {
  return "translate(8)";
  } else {
  return "rotate(180)translate(-8)";
  }
  });
  // Transition exiting nodes to the parent's new position.
  nodeExit = node.exit().transition().duration(duration).attr("transform", function(d) {
  return "translate(" + source.y + "," + source.x + ")";
  }).remove();
  nodeExit.select("circle").attr("r", 1e-6);
  nodeExit.select("text").style("fill-opacity", 1e-6);
  // Update the links…
  link = svg.selectAll("path.link").data(links, function(d) {
  return d.target.id;
  });
  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g").attr("class", "link").attr("d", function(d) {
  var o;
  o = {
  x: source.x0,
  y: source.y0
  };
  return diagonal({
  source: o,
  target: o
  });
  });
  // Transition links to their new position.
  link.transition().duration(duration).attr("d", diagonal);
  // Transition exiting nodes to the parent's new position.
  link.exit().transition().duration(duration).attr("d", function(d) {
  var o;
  o = {
  x: source.x,
  y: source.y
  };
  return diagonal({
  source: o,
  target: o
  });
  }).remove();
  // Stash the old positions for transition.
  return nodes.forEach(function(d) {
  d.x0= d.x;
  return d.y0 = d.y;
  });
  };
  
  construct_generations = function(d) {
  var c, generations;
  c = d; // make a clone of d.
  generations = []; // Array for each ancestors children. Will reconstruct later on body click
  while (c.parent) {
  generations.push(c.parent.children);
  c = c.parent;
  }
  return generations;
  };
  
  reform_focus = function() {
  var count, d, set;
  if (window.current_nodes.length &gt; 0) {
  set = window.current_nodes.pop();
  d = set[0];
  count = 0;
  d.parent._children = set[1];
  if (d.parent._children) {
  while (d.parent) {
  d.parent.children = set[1][count];
  count++;
  d = d.parent;
  }
  return update(d);
  }
  }
  };
  
  store_and_update = function(d) {
  window.current_nodes.push([d, construct_generations(d)]);
  while (d.parent) {
  // Back up original tree
  d.parent._children = d.parent.children;
  // Filter out non line of site children
  d.parent.children = [
  _.find(d.parent.children,
  function(e) {
  return e.name === d.name;
  })
  ];
  d = d.parent;
  }
  d3.event.stopPropagation();
  return update(d);
  };
  
  reconstruct_ancestors = function(n, generations) {
  var count;
  count = generations.length - 1;
  while (n.parent) {
  n.parent.children = generations[count];
  count -= 1;
  n = n.parent;
  }
  return n;
  };
  
  $("body").click(function() {
  return reform_focus();
  });
  
  diameter = 720;
  
  height = diameter - 150;
  
  radius = diameter / 2;
  
  root = void 0;
  
  
  i = 0;
  
  duration = 2000;
  
  diagonal = d3.svg.diagonal.radial().projection(function(d) {
  return [d.y, d.x / 180 * Math.PI];
  });
  
  zoom = function() {
  return svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  };
  
  div = d3.select("#focus");
  
  svg = div.insert("svg").attr("viewbox", "0 0 " + diameter / 2 + "," + diameter / 2).attr("width", "900px").attr("height", "100%").append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")").append("g").call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));
  
  root = treeData[0];
  
  root.x0 = height/2;
  
  root.y0 = 0;
  
  update(root);
  
  }).call(this);
  </code></pre>
  
  <p><strong>rtree.css</strong></p>
  
  <pre><code>.node {cursor: pointer;
  }
  
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
  }
  
  .node text {
    font: 12px sans-serif;
  }
  
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
  }
  </code></pre>