25:["$","title",null,{"children":"1. Draw a flower petal on the screen | segundev | Observable"}] 49:[{"id":"9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","href":"https://static.observableusercontent.com/files/9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","name":"svg_viewport.JPG","type":"image/jpeg","lastModified":1671253435945.556,"size":266477},{"id":"50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","href":"https://static.observableusercontent.com/files/50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","name":"svg_coordinates.JPG","type":"image/jpeg","lastModified":1671253435945.556,"size":267662},{"id":"848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","href":"https://static.observableusercontent.com/files/848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","name":"svg_lineto.JPG","type":"image/jpeg","lastModified":1671253435945.556,"size":14238},{"id":"b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","href":"https://static.observableusercontent.com/files/b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","name":"svg_curveto.JPG","type":"image/jpeg","lastModified":1671253435945.556,"size":38022},{"id":"9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","href":"https://static.observableusercontent.com/files/9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","name":"petal_steps.JPG","type":"image/jpeg","lastModified":1671253435945.556,"size":644013}] 29:{"id":"85a0736d39dc4c80","slug":null,"title":"1. Draw a flower petal on the screen","thumbnail":"fa7feb3b849a0010bb1c30a8c3dcb3ce76b085a05be6789a76da6983fbaabd77","access_level":"public","create_time":"$D2022-12-17T05:03:55.945Z","update_time":"$D2022-12-17T05:07:50.056Z","view_time":null,"first_public_time":"$D2022-12-17T05:03:55.945Z","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":"cea13b99e8ea4d5f","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":788,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2e7417528f50399","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f2e7417528f50399","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"1. Draw a flower petal on the screen","cells":[{"id":0,"value":"md`\n\n

\nThis notebook was created as workshop material for the *Introduction to SVG and D3.js* course on Frontend Masters. Watch the [full video course here](https://frontendmasters.com/courses/d3/)!\n

\n\n\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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* 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* 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"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":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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"smileyPath","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"viewof smileyPath = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"petalPath","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"petalPath = `M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0',\n 'M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"slide `\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md `\n\n\n### ~ appendix ~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"import {\n slide, slide_style, pathColors,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"{\n window.localStorage.petalPath = petalPath || 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null