45:["$","title",null,{"children":"Lab 1 - JS and D3 Basics + Recursion | Devin Lange | Observable"}] 4d:T423,viewof EnterExitMergeJoin = { let drawCirclesWithJoin = (containerId, dataArray) => { let svg = d3.select(containerId); let circles = svg.selectAll('circle').data(dataArray); // Update circles.join( enter => { enter.append('circle') .attr('cx', (d, i) => i*100+50) .attr('cy', 100) .attr('stroke', 'firebrick') .attr('stroke-width', d => d.borderWidth) .attr('r', d => d.radius); }, update => { update.attr('fill','wheat'); }, exit => exit.remove() ); } let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy drawCirclesWithJoin('#circle-list-container-4', circleSizes); circleSizes.push({radius: 12, borderWidth: 4}); circleSizes.push({radius: 22, borderWidth: 2}); circleSizes.push({radius: 19, borderWidth: 6}); drawCirclesWithJoin('#circle-list-container-4', circleSizes); return md`**Recreating using Join**`} 4e:[] 49:{"id":"722ad73779217d05","slug":"lab-1-javascript-and-d3-basics","title":"Lab 1 - JS and D3 Basics + Recursion","thumbnail":"fc992adad21446e1b36dcfa509ed1eb8458f2d92d0ff6542a21086bfe56e690a","access_level":"public","create_time":"$D2020-09-04T20:34:57.469Z","update_time":"$D2020-09-25T19:05:49.466Z","view_time":null,"first_public_time":"$D2020-09-07T19:09:35.541Z","has_unpublished_edits":null,"fork":{"id":"d2ab17b44816dd05","slug":"lab-javascript-and-d3-basics/2","title":"Lab - JavaScript and D3 Basics","owner":{"id":"d18f470d87fc3b35","login":"jrogerthat","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47d226bb8e0ec98","login":"dev-lan","name":"Devin Lange","avatar_url":"https://avatars-next.observableusercontent.com/ef478eeca21bea8b829dfd52d91780c2326f545b3926f360b26706aa3646a174","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":709,"publish_version":709,"role":null,"authored":false,"authors":[{"type":"individual","id":"a3a49b04f9af68df","login":"dev-lan","name":"Devin Lange","avatar_url":"https://avatars-next.observableusercontent.com/ef478eeca21bea8b829dfd52d91780c2326f545b3926f360b26706aa3646a174","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a3a49b04f9af68df","login":"dev-lan","name":"Devin Lange","avatar_url":"https://avatars-next.observableusercontent.com/ef478eeca21bea8b829dfd52d91780c2326f545b3926f360b26706aa3646a174","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lab 1 - JS and D3 Basics + Recursion","cells":[{"id":0,"value":"md`# Lab 1 - JS and D3 Basics + Recursion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`Importing D3 here`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require('d3');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`# D3 Selections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`## Setting Style - without chaining`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"md `Given the above html you can select the rectangle element with it's id to get a d3 selection object. Once you have that object you can use it to modify the style of the object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewof settingStyle = {\n let rectangleSelection = d3.select('#rect-1');\n rectangleSelection.style('fill', 'firebrick');\n rectangleSelection.style('stroke', 'black');\n rectangleSelection.style('stroke-width', 4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`## Setting Style - with chaining`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"md `An equivalent way to set the style is with this type of chaining syntax. This style is common in code that uses d3. You will see this a lot. Behind the scenes in the style function, d3 is setting the appropriate styles, then at the end it returns a reference to itself so that this style is possible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof settingStyleWithChaining = {\n let rectangleSelection = d3.select('#rect-2')\n .style('fill', 'firebrick')\n .style('stroke', 'black')\n .style('stroke-width', 4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"md`## Setting Style - Multiple Elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"md `Two things happen in the following code. First, the \\`\\`containerSelection object\\`\\` finds the correct svg object. \nSecond the \\`\\`rectangleListSelection\\`\\` uses \\`\\`containerSelection\\`\\` to select **all** the rect elements inside of it. When the style function is called on this selection, it applies to every rectangle element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof settingStyleForMultipleElements = {\n let containerSelection = d3.select('#rectangle-list-container');\n \n let rectangleListSelection = containerSelection.selectAll('rect')\n .style('fill', 'firebrick')\n .style('stroke', 'black')\n .style('stroke-width', 4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`# Data Driven Style enter, exit, merge, join`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"md `To start we have this artificial dataset. This dataset contains a list of objects. Each object as two properties, the radius, and borderWith. For a normal dataset you would have actual data that is mapped to properties such as radius, but for this example we are skipping this part to keep things simple.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"initialCircleSizes = [\n {radius: 18, borderWidth: 4},\n {radius: 22, borderWidth: 2},\n {radius: 16, borderWidth: 6},\n {radius: 29, borderWidth: 7},\n {radius: 35, borderWidth: 1}\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"md `We will be using this \\`\\`drawCircle\\`\\` function multiple times throughout the following examples. It takes a SVG container ID as well as a data arra as input. Then it uses d3 to add the circles to the DOM and style them appropriately, effectively drawing them on the screen.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":" function drawCircles(containerId, dataArray) \n {\n // First select the container\n let svg = d3.select(containerId);\n \n // Get your selection object (circles), and bind it to the data\n let circles = svg.selectAll('circle')\n .data(dataArray);\n \n // UPDATE the elements that already exists\n circles.attr('fill', 'wheat');\n \n // add new elements for data points that are ENTERing\n let circleEnter = circles.enter()\n .append('circle')\n .attr('stroke', 'black');\n\n // remove the elements that have EXITed from the dataset\n circles.exit().remove();\n\n // MERGE the new and existing data\n circles = circleEnter.merge(circles);\n\n \n // set style and position for both the new and existing elements\n circles.attr('cx', (d, i) => i*100+50)\n .attr('cy', 100)\n .attr('stroke', 'firebrick')\n .attr('stroke-width', d => d.borderWidth)\n .attr('r', d => d.radius);\n }\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md `**Excercise 1** Examine the following code. Try to predict/understand what will be drawn on the screen.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof EnterExitMergeInitialLoad = {\n \n let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy\n \n drawCircles('#circle-list-container-1', circleSizes);\n \nreturn md`**Initial Load **`} \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md `**Excercise 2** Again examine the code. Try to predict/understand what will be drawn on the screen after data are added and drawCircles is called again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"viewof EnterExitMergeAdded = { \n \n let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy\n \n drawCircles('#circle-list-container-2', circleSizes);\n circleSizes.push({radius: 12, borderWidth: 4});\n circleSizes.push({radius: 22, borderWidth: 2});\n circleSizes.push({radius: 19, borderWidth: 6});\n drawCircles('#circle-list-container-2', circleSizes);\n \nreturn md`**Data Added **`} \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"md `**Excercise 3** Examine the code. Predict/understand what will be drawn when data are removed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"viewof EnterExitMergeRemoved = { \n let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy\n \n drawCircles('#circle-list-container-3', circleSizes);\n circleSizes.splice(2, 1); // removes 1 element at index 3\n drawCircles('#circle-list-container-3', circleSizes);\n \nreturn md`**Data Removed**`} \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md `The drawCircles code can also be simplified using the newer join function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"md `**Excercise 4** Examine the following code carefully. How does this function compare to the \\`\\`drawCircles\\`\\` function above? `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md `You can simplify this join even further, although this no longer has the same functionality as drawCircles. Fortunately, this behavior is often what you will actually want.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"viewof EnterExitMergeJoinSimple = {\n \n let drawCirclesWithJoinSimple = (containerId, dataArray) => \n {\n let svg = d3.select(containerId);\n \n let circles = svg.selectAll('circle')\n .data(dataArray)\n .join('circle')\n .attr('cx', (d, i) => i*100+50)\n .attr('cy', 100)\n .attr('stroke', 'firebrick')\n .attr('stroke-width', d => d.borderWidth)\n .attr('r', d => d.radius)\n .attr('fill', 'wheat');\n \n } \n \n let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy\n \n drawCirclesWithJoinSimple('#circle-list-container-5', circleSizes);\n circleSizes.push({radius: 12, borderWidth: 4});\n circleSizes.push({radius: 22, borderWidth: 2});\n circleSizes.push({radius: 19, borderWidth: 6});\n drawCirclesWithJoinSimple('#circle-list-container-5', circleSizes);\n\n \nreturn md`**Simplified join scenario**`} \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md `**Excercise 5** Compare the two draw functions that use join. What are the differences? In what scenarios would you use one over the other?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`# Recursion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`A recursive function is a function that call itself. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`We can test out recursion with our simple countdown function, that decrements a number, adds it to an array, and then calls itself until we reach 0.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"function countdown(value, keeper)\n{\n keeper.push(value);\n if (value <= 0)\n { //base case or termination condition\n return keeper;\n }\n else\n {\n return countdown(value - 1, keeper); //function calls itself\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`In recursion, we need a base case that checks if we terminate. In this example, we are checking if we have gotten to zero. If so, we can return the array. Otherwise, we run the function again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"countdown(10, [])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`It is true that any recursive function can be accomplished iteratively. In fact, the countdown function is probably more naturally written as an interative function. *However*, some problems lend themselves to recursive solutions. In particular, algorithms that work with tree data structures are often recursive.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`## Calculating the size of a folder.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`Consider a simple directory structure that has folders and files. Files have metadata associated with them, for our purposes we only care about the size.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"rootNode = ({\n\ttype: \"folder\",\n\tchildren: [\n\t\t{\n\t\t\ttype: \"file\",\n\t\t\tsize: 3\n\t\t},\n\t\t{\n\t\t\ttype: \"file\",\n\t\t\tsize: 2\n\t\t},\n\t\t{\n\t\t\ttype: \"folder\",\n\t\t\tchildren:\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\ttype: \"file\",\n\t\t\t\t\tsize: 6\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: \"folder\",\n\t\t\t\t\tchildren: \n\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\t\tsize: 1\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\t\tsize: 4\n\t\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttype: \"folder\",\n\t\t\tchildren:\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\ttype: \"folder\",\n\t\t\t\t\tchildren:\n\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\t\tsize: 11\n\t\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: \"folder\",\n\t\t\t\t\tchildren:\n\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\t\tsize: 3\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\t\tsize: 6\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\t\t\tsize: 6\n\t\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"function calculateFileSize(fileObject)\n{\n if (fileObject.type === \"file\")\n {\n // termination condition\n return fileObject.size;\n }\n else\n {\n let fileSize = 0;\n for (let child of fileObject.children)\n {\n // recursive call\n fileSize += calculateFileSize(child);\n }\n return fileSize;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"calculateFileSize(rootNode);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`*Hint* this is a good example to refer back to when calculating Position in HW2. There are parallels between this solution and the solution for the homework.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null