30:Tbbe,fibViz = { const padding = 10 const width = 960 - 2* padding //width of svg const height = 800 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) let i = 0 function fib(x) { if (x == 0 || x == 1) { return x } return fib(x - 1) + fib(x - 2) } let out = stackify(fib) fib = out.func fib(4) var data = timeAlive(out.stack) console.log(data) console.log([...new Array(d3.max(data.map(e => e.position)) + 1).keys()]) let yScale = d3.scaleBand().domain([...new Array(d3.max(data.map(e => e.position)) + 1).keys()]).range([0, height]).paddingInner(0.05) let gs = canvas.selectAll('g').data(data).enter().append('g') let rects = gs // .selectAll('rect') // .data(data) // .enter() .append('rect') .attr('y', d => yScale(d.position)) .attr('height', yScale.bandwidth()) .attr('x', 0) .attr('width', width) .style('stroke', 'black').style('fill', 'none') let texts = gs // .selectAll('text') // .data(data) // .enter() .append("text") .text(d => d.call) .attr('x', width / 2) .attr('y', (d) => yScale(d.position) + yScale.bandwidth() / 2) .style('text-anchor', 'middle') .style('alignment-baseline', 'middle') function genText(d) { if (i == d.timeAlive[1] || i == d.timeAlive[1] + 1) { return `${d.call} evaluated to ${d.value}` } else if (d.depends) { const temp = out.original.toString().split('\n') // console.log(temp[temp.length - 2].split(/[a-zA-Z]+$.*?$/)) // return `${d.call} -> ${temp[temp.length - 2]}` return `${d.call} -> ${d.depends.map(j => i > data[j].timeAlive[1] ? data[j].value : data[j].call).join(" + ")}` } else { return d.call } } let update = function() { gs.style('visibility', d => d.timeAlive[0] <= i && d.timeAlive[1] >= i ? 'black' : 'white') texts .text(genText) .transition() .ease(d3.easeCubic) .duration(400) // .attr('x', yScale(i)) .attr('y', (d, idx) => d.timeAlive[0] <= i && d.timeAlive[1] >= i ? yScale(d.position) + yScale.bandwidth()/2 : 3000) rects .transition() .ease(d3.easeCubic) .duration(400) // .attr('x', yScale(i)) .attr('y', (d, idx) => d.timeAlive[0] <= i && d.timeAlive[1] >= i ? yScale(d.position) : 3000) } update() d3.select("#incr").on("click", function() { i = (i + 1) % (data.length * 2) update() }); d3.select("#reset").on("click", function() { i = 0 update() }); return svg.node() // return out.stack }31:Ta64,{ const padding = 10 const width = 960 - 2* padding //width of svg const height = 800 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) let i = 0 function fact(x) { if (x == 1) { return x } return x * fact(x - 1) } let out = stackify(fact) fact = out.func fact(4) var data = timeAlive(out.stack) console.log(data) let yScale = d3.scaleBand().domain(data.keys()).range([0, height]).paddingInner(0.05) let gs = canvas.selectAll('g').data(data).enter().append('g') let rects = gs // .selectAll('rect') // .data(data) // .enter() .append('rect') .attr('y', (_, i) => yScale(i)) .attr('height', yScale.bandwidth()) .attr('x', 0) .attr('width', width) .style('stroke', 'black').style('fill', 'none') let texts = gs // .selectAll('text') // .data(data) // .enter() .append("text") .text(d => d.call) .attr('x', width / 2) .attr('y', (_, i) => yScale(i) + yScale.bandwidth() / 2) .style('text-anchor', 'middle') .style('alignment-baseline', 'middle') function genText(d) { if (i == d.timeAlive[1] || i == d.timeAlive[1] + 1) { return `${d.call} evaluated to ${d.value}` } else if (d.depends) { return `${d.call} -> ${d.depends.map(j => i > data[j].timeAlive[1] ? data[j].value : data[j].call).join(" + ")}` } else { return d.call } } let update = function() { gs.style('visibility', d => d.timeAlive[0] <= i && d.timeAlive[1] >= i ? 'black' : 'white') texts .text(genText) .transition() .ease(d3.easeCubic) .duration(400) // .attr('x', yScale(i)) .attr('y', (d, idx) => d.timeAlive[0] <= i && d.timeAlive[1] >= i ? yScale(idx) + yScale.bandwidth()/2 : 3000) rects .transition() .ease(d3.easeCubic) .duration(400) // .attr('x', yScale(i)) .attr('y', (d, idx) => d.timeAlive[0] <= i && d.timeAlive[1] >= i ? yScale(idx) : 3000) } update() d3.select("#incr-two").on("click", function() { i = (i + 1) % (data.length * 2) update() }); d3.select("#reset-two").on("click", function() { i = 0 update() }); return svg.node() // return out.stack }32:[] 2e:{"title":"Visualizing Recursion","cells":[{"id":276,"value":"md`# Visualizing Recursion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"stack = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"function stackify(f) {\n let ss = []\n let i = 0;\n let balance = 0\n let g = function() {\n var calling = findLast(ss, e => (e.type === \"push\" && !e.satisfied))\n if (calling >= 0) {\n if (ss[calling].called) ss[calling].called.push(i)\n else ss[calling].called = [i]\n }\n ss.push({type:\"push\", call: `${f.name}(${[...arguments].join(\", \")})`, value: null, callNum: i, satisfied: false, position: balance})\n i++\n balance++\n var res = f(...arguments)\n var satisfying = findLast(ss, e => (e.type === \"push\" && !e.satisfied))\n ss[satisfying].satisfied = true\n ss.push({type:\"pop\", call: `${f.name}(${[...arguments].join(\", \")})`, value: res, callNum: ss[satisfying].callNum, satisfied: true});\n balance--\n return res\n }\n return {func: g, stack: ss, original : f}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"{\n function multiply(x, y) {\n if (x == 0) {\n return 0\n }\n const z = multiply(x - 1, y)\n return z + y\n }\n let out = stackify(multiply)\n multiply = out.func\n multiply(3, 4)\n return out.stack\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"{\n function fibb(x) {\n if (x == 0 || x == 1) {\n return x\n }\n return fibb(x - 1) + fibb(x - 2)\n }\n let out = stackify(fibb)\n fibb = out.func\n fibb(4)\n return out.stack\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"x = { return md`\n## Visualizing Recursion with \\`fib\\`\n\nHere's our implementation of \\`public static int fib(int n)\\`, which returns the \\`n\\`th fibonacci number. \nThe first few fibonacci numbers are \\`1, 1, 2, 3, 5, 8, 13, 21, 34\\.\\.\\.\\`, and you can compute the \\`n\\`th fibonacci number as the sum of the previous two: \\`fib(n) = fib(n - 1) + fib(n + 2)\\`.\n\nHere's the full java implementation:\n\\`\\`\\`java\npublic static int fib(int n) {\n if (n == 1 || n == 0) {\n return n;\n }\n return fib(n - 1) + fib(n - 2);\n}\n\\`\\`\\`\n\nWhat follows is a view of the stacked function calls that are processed in solving \\`fib(4)\\`. When one recursive call needs to be evaluated, its activation frame is added to the stack. When that call returns its value, that value is copied in place of the call itself.\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"count = {\n let value = 0;\n const button = html`