29:null 2a:["$","title",null,{"children":"D3: Just enough SVG | Ayaan Kazerouni | Observable"}] 2f:[] 2d:{"id":"d4cbf0b1f027ad88","slug":"csc477-just-enough-svg","title":"D3: Just enough SVG","thumbnail":"5ca0b8687b7118117dce6798aa8d361e2ac4d7b4914c5eeddf880ddceda746af","access_level":"unlisted","create_time":"$D2025-05-12T21:31:05.669Z","update_time":"$D2026-05-07T21:07:56.553Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":416,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":20,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"D3: Just enough SVG","cells":[{"id":193,"value":"# D3: Just enough SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"[Scalable Vector Graphics (SVG)](https://en.wikipedia.org/wiki/SVG) is a format for defining 2-dimensional graphics in an HTML document. According to the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/SVG) (MDN), _\"SVG is, essentially, to graphics what HTML is to text.\"_\n\nSVG provides elements for drawing circles, rectangles, and simple and complex curves.\n\nFor example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"In the code above,\n\n- We created an SVG image area with the `red fill on the `` element applies to all elements inside it that don't have their own fill attributes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"`` containers are useful for grouping related components (like axes and axis tick labels). They are frequently used with [transformations](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_transformations).\n\nYou'll frequently see it used with the `translate` transformation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"## `translate` and `rotate`\n\nSVG provides a [number of transformations](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_transformations) that may be applied to graphical elements.\n\nThe `translate` transformation _translates_ or moves the entire graphic to a new origin. It is applied by giving our SVG element a `transform` property, and giving it a string in which the `translate(x, y)` and `rotate(deg)` functions are used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"viewof transforms = Inputs.form([\n Inputs.range([0, 100], { step: 1, value: 0, label: 'x' }),\n Inputs.range([0, 100], { step: 1, value: 0, label: 'y' }),\n Inputs.range([0, 360], { step: 1, value: 0, label: 'rotate' })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"In the code above, the `` is originally given coordinates (0, 0). But it is drawn at (${transforms[0]}, ${transforms[1]}) because of the applied translation.\n\nYou might wonder why this is useful? After all, if we wanted the rectangle at (${transforms[0]}, ${transforms[1]}), we could have just drawn it there in the first place.\n\nThe `translate(x, y)` transform is commonly used on entire `` elements. Translating a whole container has the effect of establishing a new coordinate system for all its contents. This tends to make it easier to \"localise\" reasoning about drawing multiple shapes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"Much more information about SVG than you'll need for this class is available at the MDN tutorial series [Introducing SVG from Scratch](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch). For now, know that these are the basic shapes you can draw with SVG.\n\nThese shapes will usually be the \"marks\" you draw in visualizations made with D3 (though D3 is happy with _any_ HTML element being used as a \"mark\"). You likely won't find yourself drawing overly complex shapes using the `` element — like Vega-Lite, D3 has facilities for drawing geographic boundaries. But if you do need to create custom shapes, `` is good to know about.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"import { stylesheet } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"