31:[{"id":"9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","href":"https://static.observableusercontent.com/files/9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","name":"svg_viewport.JPG","type":"image/jpeg","lastModified":1596408620508.152,"size":266477},{"id":"9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","href":"https://static.observableusercontent.com/files/9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","name":"petal_steps.JPG","type":"image/jpeg","lastModified":1596440635359.184,"size":644013},{"id":"b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","href":"https://static.observableusercontent.com/files/b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","name":"svg_curveto.JPG","type":"image/jpeg","lastModified":1596437019822.516,"size":38022},{"id":"848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","href":"https://static.observableusercontent.com/files/848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","name":"svg_lineto.JPG","type":"image/jpeg","lastModified":1596436846795.413,"size":14238},{"id":"50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","href":"https://static.observableusercontent.com/files/50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","name":"svg_coordinates.JPG","type":"image/jpeg","lastModified":1596408619715.809,"size":267662}] 2f:{"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"},{"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"},{"id":217,"value":"md `\n## ✨ svg viewport & coordinate system\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":252,"value":"md`\n## ✨ svg elements (I use often)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":8,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":597,"value":"md`\nSo here's how we break down that flower petal's d attribute:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":610,"value":"md`\n## 🔥 exercise time 🔥\nLet's create a smiley face together!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"html`\n\n100px\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"smileyPath","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"viewof smileyPath = html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":229,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"petalPath","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"viewof petalPath = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":158,"value":"md `\n\n\n### ~ appendix ~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"import {\n slide, slide_style, pathColors,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"colorXY = (color) => {\n return html`\n x,y`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":690,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}