25:["$","title",null,{"children":"3. SVG & D3 Basics | Friederike's Workspace | Observable"}] 49:[{"id":"6524e722c8889301dec95b7f4a36fcbfb1a42eb915b9527ef79a9b349fba9ef7eb04e9af4401a28b64c62c9c0b839539423bd05ad1069c4119f5d3eaa32871de","href":"https://static.observableusercontent.com/files/6524e722c8889301dec95b7f4a36fcbfb1a42eb915b9527ef79a9b349fba9ef7eb04e9af4401a28b64c62c9c0b839539423bd05ad1069c4119f5d3eaa32871de","name":"image.png","type":"image/png","lastModified":1693838592573.412,"size":2263}] 29:{"id":"4f5bee5eaeae5420","slug":null,"title":"3. SVG & D3 Basics","thumbnail":"1dcb83e649707ee114037afa8c2b47e45eb827e7937ad9507f44372bf2eb2590","access_level":"public","create_time":"$D2023-09-04T14:43:12.573Z","update_time":"$D2023-09-04T15:11:31.322Z","view_time":null,"first_public_time":"$D2023-09-29T10:47:16.636Z","has_unpublished_edits":null,"fork":{"id":"1db03ad50c9d5521","slug":null,"title":"3. SVG & D3 Basics","owner":{"id":"70b8a8bf6af1277c","login":"biovis-pract","name":"BioVis-Pract"}},"stars":0,"starred":false,"owner":{"type":"team","id":"76369c69faffe9a6","login":"friederike-ws","name":"Friederike's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/29136d3ec66cad4c1c6a1aba1faa1a59343d987b5df9e7c48d705e829dbb47c3","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":402,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8f7d568d2fe50fa","login":"friederike","name":"Friederike","avatar_url":"https://avatars-next.observableusercontent.com/caafbe50892f07fc122c722c4416e549681796ff90a65bba4c1f2bf05b967b84","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b8f7d568d2fe50fa","login":"friederike","name":"Friederike","avatar_url":"https://avatars-next.observableusercontent.com/caafbe50892f07fc122c722c4416e549681796ff90a65bba4c1f2bf05b967b84","tier":null,"role":"editor"},{"type":"team","id":"76369c69faffe9a6","login":"friederike-ws","name":"Friederike's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/29136d3ec66cad4c1c6a1aba1faa1a59343d987b5df9e7c48d705e829dbb47c3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3. SVG & D3 Basics","cells":[{"id":0,"value":"# 3. SVG & D3 Basics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"At its core svg elements in a webbrowser are DOM elements representing visual marks.\n\nEach svg needs a ````-tag enclosing it\n\nin Observable you can use the ``html``tag to manually add svgs to the notebook\nhere we add a \n### `circle`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"The other primitive shapes are `rect`, `ellipse`, `line`, `polyline` and `polygon`, altough the latter two are not used extensively","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"### `g`-elements\n\nmultiple element can be group in **``** tags, which allow, applying transformations to multiple elements at once","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"The tranformations are then applied with the `transform` attribute","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"In this example the transforms are applied sequentially, first the group is moves (translated) by 125px in each direction (keep in mind the origin is in the top left) and afterward the group is rotated by 33 degree around the point 62.5, 62.5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"### The `path` element\n\nWhile you can achieve most of the common graphical marks with the aforementioned SVG elements, you can also define more custom ones using the **`path`** element.\n\nThe path element receives a series of movement- and draw-commands to draw complex shapes and paths.\nTo illustrate this, consider the following example from the 'mozilla mdn webdocs' (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"Here we have 5 (6) commands:\nthe first one, `M 10, 30` is the command to **m**ove to the indicated position (10,30)\nThe second and the third command will draw an **a**rc with x- and y- radii indicated in the first two positions (20,20), to the point specified in the last two positions (50,30 and 90,30 respectively).\nThe commands 4 and 5 ar **q**uadratic curves with the control point in the first two positions and the target point (analogous to the arc) in the last two positions.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"**Hint**: using highlevel libraries like d3 allow the programmer to use programmatic wrappers that alleviate (in most cases) the need for the usage of path element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"### viewBox\n\nThe abovementioned example from the MDN illustrates another important and handy topic.\nThe view box acts as a drawing space independent of the original SVGs size: in this example, we have a viewBox of the following form:\n`viewBox =\"0 0 100 100\"` this means our drawing spaces top left point (origin) starts at 0 0 (1st and 2nd pos.) and is of 100px width (3rd pos.) and 100px height (4th pos.).\nThis allows us to utilize the same code for svgs of different size, and due to the nature of **scalable** vector graphics (SVGs) this scaling does not incur a quality penalty.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"One can even leverage the `viewBox` to do zooming and panning:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"Changing the first two parameters allows panning, changing the last to parameters allows zooming","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"### D3\n\nAs mentioned earlier, we can use high level libraries like d3 to make the process of generating SVGs easier.\nIn addition, this reduces much of the need of writing HTML and instead allows a more programmatic approach of generating SVGs.\nSo how do we go about this on observable?\nFirst, we don't need to import any libraries.\nSecond, normally in d3 you would select an HTML element to append your SVG to. You don't need to do this with observable, you can generate an SVG element and add to it in a cell, when you subsequently return the SVG's node, it will be rendered automatically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"circle = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n svg.append('circle')\n .attr('r', 15)\n .attr('cx', 50)\n .attr('cy', 50)\n\n return svg.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"**Try it yourself**: Draw a Line with a negative slope, using d3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"//draw the line here\nline = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n svg.append('line')\n .attr('x1', 20)\n .attr('y1', 15)\n .attr('x2', 60)\n .attr('y2', 55)\n .attr('stroke','black')\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"You can of course add additional elements to the same SVG:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"circleRectLine = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n svg.append('circle')\n .attr('r', 15)\n .attr('cx', 50)\n .attr('cy', 50)\n svg.append('rect')\n .attr('width', 30)\n .attr('height', 15)\n .attr('x', 10)\n .attr('y', 20)\n svg.append('line')\n .attr('x1', 20)\n .attr('y1', 55)\n .attr('x2', 60)\n .attr('y2', 15)\n .attr('stroke','black')\n \n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"`g`-elements can be added aswell:\n**Note:** attributes added to the `g`-elements are inherited by the elements added.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"circleRectLineG = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n const g = svg.append('g')\n .attr('transform','translate(30,30)')\n .attr('fill', '#4682b4')\n \n g.append('circle')\n .attr('r', 15)\n .attr('cx', 50)\n .attr('cy', 50)\n \n g.append('rect')\n .attr('width', 30)\n .attr('height', 15)\n .attr('x', 10)\n .attr('y', 20)\n \n g.append('line')\n .attr('x1', 20)\n .attr('y1', 55)\n .attr('x2', 60)\n .attr('y2', 15)\n .attr('stroke','black')\n \n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"**Try it yourself**:\n\nDraw a \"tri-force\", i.e. three equilateral triangles offset such that they touch at two corners\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nusing d3 and the `polygon` svg-primitive (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"//Draw here\ntriForce = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n svg.append('polygon')\n .attr('points', \"0,100 50,100 25,50\")\n .attr('fill', 'yellow')\n .attr('stroke','brown')\n \n svg.append('polygon')\n .attr('points', \"25,50 50,0 75,50 \")\n .attr('fill', 'yellow')\n .attr('stroke','brown')\n \n svg.append('polygon')\n .attr('points', \"75,50 50,100 100,100 \")\n .attr('fill', 'yellow')\n .attr('stroke','brown')\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"### D3 data-joins\n\nThe by far most helpful function of d3 however is the ability to automate the drawing process for data-structures, i.e. arrays, tables etc.\nHere, this is illustrated by drawing the rectangles specified in the array:\n\n**Note**: you can find a list of named colors here (https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) you can also add the hexadecimal RGB code for any color like so ``'#ffffff'`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"rectArray = [\n {val: 40, color: \"red\"},\n {val: 130, color: \"blue\"},\n {val: 75, color: \"orange\"},\n {val: 90, color: \"teal\"},\n {val: 110, color: \"purple\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"rects = {\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 150)\n\n svg.selectAll('rect')\n .data(rectArray)\n .join('rect')\n .attr('fill', d => d.color)\n .attr('width', 20)\n .attr('height', d => d.val)\n .attr('y', d => 150 - d.val)\n .attr('x', (_d,i) => i * (20 +5))\n \n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"**Note**: The `.selectAll('rect')` is needed and will be levereaged later on.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"**Try it yourself**:\nGiven an array of circle data draw a pseudo-bubblechart, i.e. you can disregard the meaning of the data and can skip the drawing of axes, using d3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"circleArray = [\n {r: 5, x: 15, y: 9, color: \"springGreen\"},\n {r: 12, x: 60, y: 16, color: \"lightSkyBlue\"},\n {r: 7, x: 30, y: 68, color: \"fuchsia\"},\n {r: 14, x: 15, y: 120, color: \"coral\"},\n {r: 15, x: 87, y: 100, color: \"orange\"},\n {r: 3, x: 13, y: 27, color: \"teal\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"// add the bubbles here\nbubbleChart = {\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 150)\n \n svg.selectAll('circle')\n .data(circleArray)\n .join('circle')\n .attr('fill', d => d.color)\n .attr('r', d => d.r)\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"**Try it yourself (if you are ahead)**: Use d3 to replicate the \"tri-force\" example from earlier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"//use d3 to draw the tri force here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null