40:null 41:["$","title",null,{"children":"Homework 2 Lab, JavaScript and D3 Basics | UofU DataVis Course Lab | Observable"}] 47:[] 45:{"id":"d33a901073c88ef2","slug":null,"title":"Homework 2 Lab, JavaScript and D3 Basics","thumbnail":"365dee6d63c225b55f3f64befb6536dbae1f3a3a094fa598b0c3e62dc0f10c70","access_level":"public","create_time":"$D2022-09-01T17:16:06.207Z","update_time":"$D2022-10-04T17:03:45.109Z","view_time":null,"first_public_time":"$D2022-09-01T17:16:06.207Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024","bio":"","following":false},"version":380,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"824f67d16ebad7aa","login":"haihan-lin","name":"Haihan Lin","avatar_url":"https://avatars-next.observableusercontent.com/b594fe15a94e984d230bc07e57c1ca92b7cf9ab148c5ee89d12e0d6fedfcca75","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"824f67d16ebad7aa","login":"haihan-lin","name":"Haihan Lin","avatar_url":"https://avatars-next.observableusercontent.com/b594fe15a94e984d230bc07e57c1ca92b7cf9ab148c5ee89d12e0d6fedfcca75","tier":null,"role":"editor"},{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Homework 2 Lab, JavaScript and D3 Basics","cells":[{"id":0,"value":"# Homework 2 Lab, JavaScript and D3 Basics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"To view this notebook, run blocks of code in order.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":" ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"## Selecting existing elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"d3.select('#example-1').select('rect').classed('red-rect',true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"If you run the code in sequence, you will notice that *Rectangle1* that's colored in red is behind *Rectangle3*. That's because `select` will get the first rectangle in the `svg`, and rectangles are added to the svg in the order they are created. `select` will not change the order of the elements, because we are simply selecting elements and applying styling attributes to them. We are not removing or adding elements. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"d3.select('#example-1').selectAll('rect').classed('red-rect',true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"If we use `selectAll`, this will select all the `rect` inside `svg`, regardless of hierarchy. Notice that *Rect4* is wrapped inside a `g` element, but `selectAll` still selected it and applied the class styling to it. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"Using `g` to group elements together can be very useful when several elements should have the same property. For example, if we want to move the text and the rectangle, if they are not grouped together we would have to use the following code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"d3.select('#example-1').select('g').attr('transform','translate(0,100)');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Adding elements with D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"We want one circle in this svg. Instead of using `html`, we can add to it with `d3`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"d3.select('#example-2')\n .append('line')\n .attr('x1',65).attr('y1',65).attr('x2',30).attr('y2',30).attr('stroke','black')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"However, every time this code gets executed, we are adding a new `circle` (inspect the `svg` to see all the circles!). To avoid that from happening, you can check the div and see if there is any circles added already.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"Ignore `viewof Example2 = {}`, that is an Observable syntax. The code is inside the `{}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"viewof Example2 = {\n const circleSelection = d3.select('#example-2').selectAll('circle')\n if (circleSelection.size() === 0){\n d3.select('#example-2').append('circle').attr('cx',50).attr('cy',50).attr('r',30)\n } else {\n console.log(circleSelection.size())\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"Now we check if there is any element in the selection. If there is no element, then we actually append a circle to the svg. If the circle already exists, we just print the size of the selection in the console.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"## Bind data in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"dataArrayExample = [{ color: 'blue', value: 5 }, { color: 'red', value: 8 }]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"The most convenient way to draw elements to a `svg` selection is using `join`. `join` includes \"enter\", \"update\", and \"exit\" all together, meaning, it will add more elements or remove elements based on the number of elements in the array, then merge all the new elements, if any, into the main selection. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"if you look up tutorials on selection, you may see code like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"// let circleSelection = d3.selectAll('circle')\n// .data(dataArrayExample)\n// const newElements = circleSelection.enter()\n// .append('circle');\n// circleSelection.exit().remove();\n// circleSelection = circleSelection.merge(newElements);\n// then style it like: circleSelection.attr(......)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"`join` just takes cares all of these with single line.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"\ncircleSelection = d3.select('#example-3')\n .selectAll('circle')\n .data(dataArrayExample)\n .join('circle')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"After adding the elements, we need to give circles locations, radius, and styling attributes. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"circleSelection.attr('cx', (a,b)=>{console.log(b); return b*150+50})\n .attr('cy', 150)\n .attr('r',d=>d.value*10)\n .attr('fill',d=>d.color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"But we can also write out specific enter, update, exit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"d3.select('#example-4')\n .selectAll('circle')\n .data(dataArrayExample)\n .join(\n enter=>enter.append('circle')\n .attr('cx', (d,i)=>i*150+50)\n .attr('cy', 150)\n .attr('r',d=>d.value*10)\n .attr('fill',d=>d.color),\n update=>update.attr('stroke','black').attr('fill','none'),\n exit=>exit.remove()\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"The first running the block above, the circle that was original in the svg will become no fill. That's because it was already on there, so it is `update` selection. The new circles get filled with colors as the `enter` selection. The second time, all circles will be no fill circles, because they already exist in the svg, and they are part of the `udpate` instead of `enter` now. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"## Recursion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"Recursion is a function that calls itself. When writing recursions, start with the base case, meaning, the `return` statement when the function should all be done. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"function countdown(value, keeper) {\n keeper.push(value);\n if (value <= 0) { //base case or termination condition\n return keeper;\n } else {\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":275,"value":"This is a recursive function that add number initial input to 0 to an array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"countdown(10,[])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"For this example, think recursion as stacks. When the function call itself (the `return` statement in `else`), it adds a layer to the stack, leaving the previous layer \"unresolved\". It will resolve when the new layer is resolved and return the value to it. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"A classic example of using recursion is calculating the **Fibonacci Sequence**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"0, 1, 1, 2, 3, 5, 8, 13, 21, 34...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"Except for the first two elements, every number is the sum of the previous two numbers. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"For this example, we are adding to the array, instead of returning the result. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"function fib(n, sequence) {\n const length = sequence.length;\n if (length === n){\n return sequence;\n }\n if (length === 0 || length === 1){\n sequence.push(length)\n } else{\n sequence.push(sequence[sequence.length-1] + sequence[sequence.length - 2])\n }\n fib(n, sequence);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"{\n const arr = []\n fib(15, arr)\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"To think through this, the first time, we input `fib(10, [])`, length is 0, so we push to the array. Then we call the `fib(10, [0])`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"The second iteration, we have length equal to 1, so push 1 to the array, then call the call `fib(10,[0, 1])` ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"The third iteration, we have length equal to 2, so we are going into the `else` statement, pushing to sequence the sum of previous two elements, 0 and 1, adding 1 to the array, then call `fib(10, [0, 1, 1])`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"And this keeps going until the length of the array matches the input, then we have satisfied the base case. The `return` statement will stop the function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 46:"$45:body"