2b:null 2c:["$","title",null,{"children":"1. Draw a flower petal on the screen | Anjana Vakil | Observable"}] 31:[{"id":"9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","href":"https://static.observableusercontent.com/files/9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","name":"petal_steps.JPG","type":"image/jpeg","lastModified":1596653821679.03,"size":644013},{"id":"b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","href":"https://static.observableusercontent.com/files/b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","name":"svg_curveto.JPG","type":"image/jpeg","lastModified":1596653821679.03,"size":38022},{"id":"848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","href":"https://static.observableusercontent.com/files/848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","name":"svg_lineto.JPG","type":"image/jpeg","lastModified":1596653821679.03,"size":14238},{"id":"50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","href":"https://static.observableusercontent.com/files/50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","name":"svg_coordinates.JPG","type":"image/jpeg","lastModified":1596653821679.03,"size":267662},{"id":"9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","href":"https://static.observableusercontent.com/files/9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","name":"svg_viewport.JPG","type":"image/jpeg","lastModified":1596653821679.03,"size":266477}] 2f:{"id":"ed9ce3e33591b14d","slug":null,"title":"1. Draw a flower petal on the screen","thumbnail":"2be7592be35e65bf195b9cf869f5b0a68e9f6cd045d1fbd64441990c7f915368","access_level":"unlisted","create_time":"$D2020-08-05T18:57:01.679Z","update_time":"$D2020-08-05T18:57:01.679Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"c6629eb98b76cea3","slug":"1-draw-a-flower-petal-on-the-screen","title":"1. Draw a flower petal on the screen","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":669,"publish_version":669,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"1. Draw a flower petal on the screen","cells":[{"id":0,"value":"md`\n# 1. Draw a flower petal on the screen\n\nThere are two main web technologies we use to draw shapes onto the screen (and thus create our visualizations): SVG and HTML5 Canvas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"slide`\n## svg vs. canvas\n\n--\n\nSVG (Scalable Vector Graphics)\n- XML syntax\n- each shape is a DOM element\n- **pro**: easy to get started and interact with\n- **con**: not performant at large scale\n\nHTML5 Canvas\n- Javascript API\n- One Canvas element, shapes are inaccessible once drawn\n- **pro**: very performant, especially for animations\n- **con**: hard to interact with\n\n--\n\n*\"SVG is like Illustrator and Canvas is like Photoshop.\"*\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md `\n## ✨ svg viewport & coordinate system\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"slide`\n${Object.assign(\n await FileAttachment(\"svg_viewport.JPG\").image(),\n { alt: 'SVG is like a window to a whold world.', style: 'width: 100%; max-width: 640px' }\n)}\n\n\nI like to think of SVG as a window into a world. We can draw shapes in this world and they exist beyond the boundaries of the window. To be able to see them, we need to specify the **width** and **height** of the window:\n\n

\n<svg width=800 height=600>\n  <-- a whole world -->\n</svg>\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"slide`\nWithin the SVG world, **x** increases going right and **y** increases going down:\n\n${Object.assign(\n await FileAttachment(\"svg_coordinates.JPG\").image(),\n { alt: \"With SVG's coordinate system, the x-value increases going right and the y-value increases going down.\" , style: 'width: 100%; max-width: 640px' }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"md`\n

\n* If you're interested in a deep-dive of the SVG coordinate system, I highly recommend Sara Soueidan's [extremely thorough blog series on the topic](https://www.sarasoueidan.com/blog/svg-coordinate-systems/). Note though, that in general the width and height attributes are more than enough for data visualization.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`\n## ✨ svg elements (I use often)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"slide`\ntag | example | attributes | optional attributes\n--- | --- | ---\n<rect> | ${tableSVG('')} | width, height | x, y\n<circle> | ${tableSVG('')} | r | cx, cy\n<path> | ${tableSVG('')} | d |\n<text> | ${tableSVG('hi there!')} | | x, y, text-anchor, dy\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md`\n

\n* For a complete list of SVG shapes, see MDN's [Basic Shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) article.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md `\n## ✨ svg paths & the d attribute\n\nEven within the SVG elements I use often, I find the path element especially powerful. Once we master the syntax for the d attribute (which dictates how the path *defines* its shape), we can draw any shape we might dream up.\n\nTake a look at this flower petal:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`\nThere's a lot going on here, but the main part we want to focus on is:\n\n\nM0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\n\n\nAnd this might look like a bunch of gibberish, but we can actually break this down to a series of three commands:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"slide`\n\ncommand | syntax | (how I think about them)\n--- | --- | ---\nMove To | M ${colorXY(pathColors[0])} | *Pick the pen off the paper, put it back down at ${colorXY(pathColors[0])}.*\nLine To | L ${colorXY(pathColors[3])} | ${Object.assign(\n await FileAttachment(\"svg_lineto.JPG\").image(),\n { alt: 'Line to', style: 'width: 100%; max-width: 120px; margin: 20px 0;' }\n)}\nCurve To
^{(Cubic Bézier)} | C ${colorXY(pathColors[1])} ${colorXY(pathColors[2])} ${colorXY(pathColors[3])} | ${Object.assign(\n await FileAttachment(\"svg_curveto.JPG\").image(),\n { alt: 'Cubic bezier curve to', style: 'width: 100%; max-width: 240px; margin: 20px 0;' }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`\nSo here's how we break down that flower petal's d attribute:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"slide`\n${Object.assign(\n await FileAttachment(\"petal_steps.JPG\").image(),\n { alt: 'Cubic bezier curve to', style: 'width: 100%; max-width: 640px;'}\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`\n## 🔥 exercise time 🔥\nLet's create a smiley face together!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"html`\n\n100px\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"smileyPath = ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md `\n## 🔥 exercise time 🔥\nUse SVG paths to create your own flower petal!\n\n^{Tip: try sketching your idea with pen and paper first, just like how we did with the smiley exercise 😊}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html`\n\n100px\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"path = `M0,0 C60,30 50,70 20,100 L0,60 L-20,100 C-50,70 -60,30 0,0`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md `\n## ✨ svg debugging pro-tips\nif you don't see your shape rendering on the screen, it might be because:\n- you didn't set **width** and **height** on your SVG (which defaults to 300x150px) and your shapes are rendering outside of the viewport.\n- you didn't set the necessary attributes (width, height, r, d) on the shape.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md `\n---\n\n

\n [2. Select existing petal(s) and bind movie data →](https://observablehq.com/d/dd416c1d85760363)\n

\n\n
\n
\n
\n
\n
\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md `\n\n\n### ~ appendix ~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {slide} from \"@mbostock/slide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"colorXY = (color) => {\n return html`\n x,y`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"pathColors = ['#46e276', '#6e94e7', '#b877e9', '#f25d75']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"petalPath = path || 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"