2d:null 2e:["$","title",null,{"children":"D3. Advanced - Drawing custom Shapes | philippkoytek | Observable"}] 33:[{"id":"9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","href":"https://static.observableusercontent.com/files/9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","name":"svg_viewport.JPG","type":"image/jpeg","lastModified":1608554244442.061,"size":266477},{"id":"50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","href":"https://static.observableusercontent.com/files/50e4cec63233f6af33448e9b819ee1be37135ebefed3c0fb8ff31ce8f4c70f95da7874ba55e948a5445cd001d8b773e97fa32a72fac3f8b83db726734b330691","name":"svg_coordinates.JPG","type":"image/jpeg","lastModified":1608554244442.061,"size":267662},{"id":"848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","href":"https://static.observableusercontent.com/files/848361678b718f998ba437eb234e2a30ac668dcbd349eb234c7ae0aa064d6317f35cbf35d74d527df6d8a9ec211ea7dbbd45f2be68bbbf19ffa9e0b697e20dfb","name":"svg_lineto.JPG","type":"image/jpeg","lastModified":1608554244442.061,"size":14238},{"id":"b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","href":"https://static.observableusercontent.com/files/b81d93889b5cd2bff8b29aedca82b8fece09eb1b5dfa333e7f80c043b6d04465315d39f58a39e26f70e0e37c597def1cd6ef24afb390c43be6b5b023e9262c3d","name":"svg_curveto.JPG","type":"image/jpeg","lastModified":1608554244442.061,"size":38022},{"id":"9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","href":"https://static.observableusercontent.com/files/9ea6b6a0a03568056c33f1d5e2b378ed528ad807e8e9e774fa73c34acf401651435e6e89572c0863155068c5d8a453318818d57f6cc1bd7bd293d3f106de1327","name":"petal_steps.JPG","type":"image/jpeg","lastModified":1608554244442.061,"size":644013},{"id":"5cdf24cd6681fbbd83a13266ae152d5d4d85393d50b2ec6b20d2715a29b57fbd87a568aea0989ce02e0d0bcf1f775cb829ee6e8206f5b10e1b48fa0cfeae5a95","href":"https://static.observableusercontent.com/files/5cdf24cd6681fbbd83a13266ae152d5d4d85393d50b2ec6b20d2715a29b57fbd87a568aea0989ce02e0d0bcf1f775cb829ee6e8206f5b10e1b48fa0cfeae5a95","name":"image.png","type":"image/png","lastModified":1608632048887.594,"size":408280}] 31:{"id":"5ac34765ec265bce","slug":"d3-advanced-drawing-custom-shapes","title":"D3. Advanced - Drawing custom Shapes","thumbnail":"fa7feb3b849a0010bb1c30a8c3dcb3ce76b085a05be6789a76da6983fbaabd77","access_level":"public","create_time":"$D2020-12-21T12:37:24.442Z","update_time":"$D2021-12-30T14:47:43.478Z","view_time":null,"first_public_time":"$D2020-12-22T09:59:23.716Z","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":"d1485b4e59b7f657","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":"starter_2024"},"version":906,"publish_version":906,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null}],"members":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"02bbccbe7ab24f4b","slug":"d3-tutorial","title":"D3 Tutorial","owner":{"id":"d1485b4e59b7f657","login":"philippkoytek","name":""}},"type":"notebook","body":{"title":"D3. Advanced - Drawing custom Shapes","cells":[{"id":0,"value":"md`\n# D3. Advanced - Drawing custom Shapes\n\nThis tutorial is a minimally adjusted version of Shirley Wu's [tutorial notebook](https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen).\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## ✨ useful svg elements\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\nNote: It is good practice to **first sketch your idea with pen and paper** so you know what you are trying to create using .\n\nFor all Path Commands, see: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"smiley = `\nM 0 20\nA 40 40 0 0 1 0 100\nA 40 40 0 0 1 0 20\nM 0 60\nC 13 57 13 73 0 70\nM 0 85\nA 5 5 0 0 1 10 85\nA 5 5 0 0 1 0 85\nM -15 40\nL -13 50\nM 15 40\nL 13 50\n`\n\n\n/*smiley = `M 0 0\na 50 50 0 0 1 0 100\na 50 50 0 0 1 0 -100\nM 0 55\nc 8 0 18 10 0 10\nc -8 0 -8 -10 0 -10\nM -20 75\nq 20 15 40 0\nM -20 35\na 5 5 0 0 1 0 10\na 5 5 0 0 1 0 -10\nM 20 35\na 5 5 0 0 1 0 10\na 5 5 0 0 1 0 -10\nM 15 40\nh 10`*/","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`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"petalPath = `\nM 0 0\nC 50 55 40 90 0 100\nC -40 90 -50 55 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":837,"value":"md`-----------\n## Further Resources:\n* Information about SVG Path Commands: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n* Full tutorial by Shirley Wu for custom shapes for visualization: https://observablehq.com/collection/@sxywu/introduction-to-d3-js\n* Some simple shape examples: https://observablehq.com/@philippkoytek/svg-path-simple-shapes\n* another example of custom shapes (triangles) encoding data is this \"DVS glyph builder\": https://observablehq.com/@philippkoytek/data-viz-society-glyph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`#### Interactive Path Creator: \nhttps://mavo.io/demos/svgpath/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"FileAttachment(\"image.png\").image()","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":667,"value":"import {\n slide, slide_style, pathColors,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"slide_style","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":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","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"