See Q Sequence.
xxxxxxxxxx<meta charset="utf-8"><style>.node circle { fill: #fff; stroke: #000; stroke-width: 1px;}.node text { font: 11px sans-serif;}.node--internal text { text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;}.link { fill: none; stroke: #555; stroke-width: 1.5px; stroke-opacity: 0.4;}</style><svg width="1400" height="5500"></svg><script src="https://d3js.org/d3.v4.0.0-alpha.44.min.js"></script><script src="hofstadter.js"></script><script>var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), padding = 50, node, link;var tree, root, N = 201, y;svg = svg .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + padding / 2 + ",0)");y = d3.scaleLinear().domain([0, N]).range([height, 0]);/* Build Diagram G from algebratic function*/tree = d3.tree() .size([width - padding, height - padding]);sequence = d3.range(N).map(function(d, i) { return d3.Hofstadter.function.Q(i);});data = sequence.slice(1).map(function(d, i) { var parent = (i === 0) ? "" : d; return {name: "" + (i + 1), parent: "" + parent};});root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (data);tree(root);/* Render tree of Diagram G.*/link = svg.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("d", function(d) { return "M" + d.x + "," + y(+d.data.name) + "C" + (d.x + d.parent.x) / 2 + "," + y(+d.data.name) + " " + (d.x + d.parent.x) / 2 + "," + y(+d.parent.data.name) + " " + d.parent.x + "," + y(+d.parent.data.name); });node = svg.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + y(+d.data.name) + ")"; })node.append("circle") .attr("r", 12)node.append("text") .attr("dy", "0.3em") .style("text-anchor", "middle") .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });</script> https://d3js.org/d3.v4.0.0-alpha.44.min.js