2b:null 2c:["$","title",null,{"children":"Dynamic data binding | parshwa mehta | Observable"}] 31:[{"id":"be995c08bdaae2741c1ebd5304c801ec455e5e89c182e7a82bc5d7be52015d7afcb6763f30750fae6eb47e8418b3214d52a802411492270b771175facccf0b9a","href":"https://static.observableusercontent.com/files/be995c08bdaae2741c1ebd5304c801ec455e5e89c182e7a82bc5d7be52015d7afcb6763f30750fae6eb47e8418b3214d52a802411492270b771175facccf0b9a","name":"enter_append.jpg","type":"image/jpeg","lastModified":1604834478998.993,"size":113209},{"id":"e923dc97e681751f610ab45d00ffdc2dd7b7081e8027c65523ba9298173bddc826af9e4fa8ef0ec9aca31fc430413e803a26254d94df8124d4f192244cd0d16f","href":"https://static.observableusercontent.com/files/e923dc97e681751f610ab45d00ffdc2dd7b7081e8027c65523ba9298173bddc826af9e4fa8ef0ec9aca31fc430413e803a26254d94df8124d4f192244cd0d16f","name":"enter_enter@1.jpg","type":"image/jpeg","lastModified":1604834478998.993,"size":99958},{"id":"5b79cdee075a553d0b198632e7c0261f0cbe958f71f4cc6f3b5c5055e776847418a86379b5fb6c76c2878b355aca86cccda071b2ef27ae8aa7a31a4d89276a5e","href":"https://static.observableusercontent.com/files/5b79cdee075a553d0b198632e7c0261f0cbe958f71f4cc6f3b5c5055e776847418a86379b5fb6c76c2878b355aca86cccda071b2ef27ae8aa7a31a4d89276a5e","name":"enter_data@2.jpg","type":"image/jpeg","lastModified":1604834478998.993,"size":96744},{"id":"2be49cdf268392d5997c8bff5f4a46dbebd6b18ef1d6e9e1bac9654f601325be0f874968053de626ac474f95c044f396ebb2dfa6ce8cff625dc870ac16ac873d","href":"https://static.observableusercontent.com/files/2be49cdf268392d5997c8bff5f4a46dbebd6b18ef1d6e9e1bac9654f601325be0f874968053de626ac474f95c044f396ebb2dfa6ce8cff625dc870ac16ac873d","name":"enter_empty@1.jpg","type":"image/jpeg","lastModified":1604834478998.993,"size":90605}] 2f:{"id":"782642549859ace6","slug":"dynamic-data-binding","title":"Dynamic data binding","thumbnail":"bc2775d589e7257d4cdef21d6e7ec0ec66a882c5d3207ba7da2dd8b04e024652","access_level":"public","create_time":"$D2020-11-08T11:21:18.998Z","update_time":"$D2021-10-08T06:05:50.013Z","view_time":null,"first_public_time":"$D2020-11-08T11:27:18.376Z","fork":{"id":"f31b2033f4fe4e9f","slug":"3-create-a-petal-for-each-movie","title":"3. Create a petal for each movie","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"83eccca209618a73","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":"starter_2024"},"version":639,"publish_version":639,"role":null,"authored":false,"authors":[{"type":"individual","id":"05e7852b4131104b","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":null}],"members":[{"type":"individual","id":"05e7852b4131104b","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Dynamic data binding","cells":[{"id":0,"value":"md`\n# Dynamic data binding\n\nThus far we've been able to bind our data to existing DOM elements and set attributes on them. But we can't possibly go around manually creating SVG elements for every data point we have\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n const rectWidth = 50\n const barData2 = [15,25,30,40,50,60,70, 80, 8];\n const svg = html`\n \n `\n \n d3.select(svg).selectAll('rect')\n .data(barData2).enter().append('rect')\n // calculate x-position based on its index\n .attr('x', (d, i) => i * rectWidth)\n .attr('y', (d) => 100 - d)\n // set height based on the bound datum\n .attr('height', d => d)\n // rest of attributes are constant values\n .attr('width', rectWidth)\n .attr('stroke-width', 3)\n .attr('stroke', 'plum')\n .attr('fill', 'pink')\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"{\n const rectWidth = 50;\n const svg = html`\n \n `\n \n d3.select(svg).selectAll('path')\n .data(barData).enter().append('path')\n .attr('d', (data, index) => {\n const initX = index === 0 ? 0 : (rectWidth * index) - (rectWidth/2);\n const finalX = (rectWidth * index) + (rectWidth/2);\n if (index === 0) {\n return `M${initX},100 L${finalX},${100 - data}`\n } else {\n return `M${initX},${100 - barData[index-1]} L${finalX},${100 - data}`;\n }\n })\n .attr('stroke-width', 3)\n .attr('stroke', 'plum')\n .attr('fill', 'pink')\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"slide`\n**↑** It rendered the same exact bars as before, but this time, the *SVG is empty*!\n\n**↓** These are the **magic✨ lines**:\n\n\\`\\`\\`js\nd3.select(svg).selectAll('rect')\n .data(data).enter().append('rect')\n\\`\\`\\`\n\n
\n\n**Let's break them down together.**\n\n\n${Object.assign(await FileAttachment(\"enter_empty@1.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n\n**So how are the bars appearing?**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"slide`\n\n## ✨.data(data)\n${Object.assign(await FileAttachment(\"enter_data@2.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n**↓** Take a look at how D3 does this with .data(data).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"{\n const svg = html``\n // in Observable we can also create svg with DOM.svg()\n \n return d3.select(svg).selectAll('rect').data(barData)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"slide`\n\n## ✨.enter()\n\n${Object.assign(await FileAttachment(\"enter_enter@1.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n**↓** And this is what .enter() returns:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"{\n const svg = html``\n // in Observable we can also create svg with DOM.svg()\n \n return d3.select(svg).selectAll('rect').data(barData).enter()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"slide`\n\n## ✨.append('rect')\n\n${Object.assign(await FileAttachment(\"enter_append.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"{\n const svg = html``\n // in Observable we can also create svg with DOM.svg()\n \n return d3.select(svg).selectAll('rect')\n .data(barData).enter().append('rect')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"slide`\n# ⚡️\n### D3.js stands for *data-driven documents* because\n### we're letting our *data* drive what is created in the *DOM*.\n\n
\n
\n🚨 Things to look out for when entering and appending:\n- The data passed in *must* be an array\n- The *selector* in selectAll(*selector*) *must* match what is appended. \n For example, if the *selector* is a class name instead of element tag:\n \\`\\`\\`js\nselection.selectAll('.bar')\n .data(data).enter().append('rect')\n .classed('bar', true)\n \\`\\`\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md `\n---\n\n

\n [Scales →](https://observablehq.com/@parshwamehta13/scales)\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"import {\n movies, slide, slide_style, colorObj, pathObj, barData,\n textWidth, transformCode, transformSVG, scrollSVG, svgHeight, calculateGridPos,\n} from 'd8565901a86e96b2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"