2b:null 2c:["$","title",null,{"children":"Introduction to D3.js | parshwa mehta | Observable"}] 31:[{"id":"9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","href":"https://static.observableusercontent.com/files/9c64745bb91ca13e20fa4cd45cca99a0b8989610964f521d286bdbbe3612b25b6482f3505084f5d5d5850235556f941cc9a02c30d5e1cf058cd4fef4dacd0c1f","name":"svg_viewport.JPG","type":"image/jpeg","lastModified":1604817561957.428,"size":266477}] 2f:{"id":"d836ff5a7ae7e381","slug":"introduction-to-d3-js","title":"Introduction to D3.js","thumbnail":"fa7feb3b849a0010bb1c30a8c3dcb3ce76b085a05be6789a76da6983fbaabd77","access_level":"public","create_time":"$D2020-11-08T06:25:59.491Z","update_time":"$D2021-09-10T05:08:10.847Z","view_time":null,"first_public_time":"$D2022-02-25T09:51:22.202Z","fork":false,"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":34,"publish_version":34,"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":0,"collection":null,"type":"notebook","body":{"title":"Introduction to D3.js","cells":[{"id":0,"value":"md`# Introduction to D3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## SVG\n- Top left corner is (0,0)\n- x increases as you go on the right\n- y increases as you go down\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"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\nThink 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":24,"value":"md`## SVG Path and d attribute`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {\n slide, slide_style, pathColors,\n} from '@sxywu/workshop-utility-functions'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"