25:["$","title",null,{"children":"2. SVG & D3 Basics - Solutions | IBMI D3 Workshop | Observable"}] 49:[{"id":"8d3854935b1342997cbe08ea771e4d8654775beda56c3d951404be1566d076051da3d077b64eb21cc2b2700d50670dda0b7bee43b4c4a0194c03ecb8d9fc29ea","href":"https://static.observableusercontent.com/files/8d3854935b1342997cbe08ea771e4d8654775beda56c3d951404be1566d076051da3d077b64eb21cc2b2700d50670dda0b7bee43b4c4a0194c03ecb8d9fc29ea","name":"Deathly_Hallows_Sign.svg.png","type":"image/png","lastModified":1695896457528.975,"size":20529}] 29:{"id":"5ddd5a68bf3826e8","slug":null,"title":"2. SVG & D3 Basics - Solutions","thumbnail":"47e80bc84357889e1b6c83f24af6936624ea1d3a98c505003b5427d8488a6e7f","access_level":"public","create_time":"$D2023-09-28T10:20:57.528Z","update_time":"$D2023-09-28T10:44:18.672Z","view_time":null,"first_public_time":"$D2023-09-28T11:47:24.752Z","has_unpublished_edits":null,"fork":{"id":"6607967a7b3140b1","slug":null,"title":"2. SVG & D3 Basics","owner":{"id":"e30efe3109725aa0","login":"ibmi-d3workshop","name":"IBMI D3 Workshop"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e30efe3109725aa0","login":"ibmi-d3workshop","name":"IBMI D3 Workshop","avatar_url":"https://avatars-next.observableusercontent.com/aa41879224e245a4ffd5a94ba8b7fd9f9427e115af7fbb65131ac1d60ea988d3","tier":"starter_2024","bio":"This workshops has been adapted from the material for the course \"Bioinformatics Methods and Visual Analytics of Biological Data\"\n\nOriginal Authors: Nicolas Brich and Mathias Witte Paz\nAdapted from the Course NYU Visualization","following":false},"version":522,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c54fddce61cc9ab3","login":"mathias-witte-paz","name":"Mathias Witte Paz","avatar_url":"https://avatars-next.observableusercontent.com/3edf7c33fafdbb0a93c6c58c5840659baaf8f17efa3ccc1386138202b4838a58","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"e30efe3109725aa0","login":"ibmi-d3workshop","name":"IBMI D3 Workshop","avatar_url":"https://avatars-next.observableusercontent.com/aa41879224e245a4ffd5a94ba8b7fd9f9427e115af7fbb65131ac1d60ea988d3","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c54fddce61cc9ab3","login":"mathias-witte-paz","name":"Mathias Witte Paz","avatar_url":"https://avatars-next.observableusercontent.com/3edf7c33fafdbb0a93c6c58c5840659baaf8f17efa3ccc1386138202b4838a58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e8101b7ad0782f91","slug":"solutions","title":"Solutions","owner":{"id":"e30efe3109725aa0","login":"ibmi-d3workshop","name":"IBMI D3 Workshop"}},"type":"notebook","body":{"titling":"auto","title":"2. SVG & D3 Basics - Solutions","cells":[{"id":0,"value":"# 2. SVG & D3 Basics - Solutions","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":true,"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 moved (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.\n\nMoreover, all members of the groups have a reduced opacity of 0.5.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"### Optional: 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":"### Optional: 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.js\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?\n\nFirst, we don't need to import any libraries.\n\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":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 as well:\n**Note:** attributes added to the `g`-elements are inherited by the members of the group.\n\nHere is the same SVG as above, but now created with D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"groupedD3 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", 250)\n .attr(\"height\", 250)\n .style(\"background-color\", \"lightblue\");\n\nconst g = svg.append(\"g\")\n .attr(\"transform\", \"translate(125, 125) rotate(33, 62.5, 62.5)\")\n .attr(\"opacity\", 0.5);\n\ng.append(\"circle\")\n .attr(\"r\", 30).attr(\"cx\", 45)\n .attr(\"cy\", 45)\n .attr(\"fill\", \"#e033f2\")\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-width\", 5);\n\ng.append(\"line\")\n .attr(\"x1\", 35)\n .attr(\"x2\", 95)\n .attr(\"y1\", 95)\n .attr(\"y2\", 45)\n .attr(\"stroke\", \"blue\")\n .attr(\"stroke-width\", 8);\n\ng.append(\"rect\")\n .attr(\"width\", 30)\n .attr(\"height\", 30)\n .attr(\"x\", 65)\n .attr(\"y\", 65);\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":466,"value":"## Tasks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"**Task 1**: 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\nnegLine = {\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 100)\n\n .attr('y', 20)\n svg.append('line')\n .attr('x2', 20)\n .attr('y1', 55)\n .attr('x1', 60)\n .attr('y2', 15)\n .attr('stroke','black')\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":"**Task 2**:\n\nDraw the \"Deathly Hallows\" symbol using D3 and the respective SVG elements (circle, line, [path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon) for the triangle). Since computing a triangle is not that trivial, we have already created one triangle for you. You just need to translate it to center the figure. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"htl.html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"deathlyHallows = {\n let width = 200\n let height = 200\n let svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n\n let sideOfTriangle = width / 2\n let heightTriangle = (Math.sqrt(3) / 2) * sideOfTriangle\n\n let coordinatesTriangle = `${sideOfTriangle / 2},10 ${sideOfTriangle},${heightTriangle + 10} ${0},${heightTriangle + 10}`\n\n svg.append(\"polygon\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"3px\")\n .attr(\"fill\", \"none\")\n .attr(\"points\", coordinatesTriangle)\n\n let circleX = sideOfTriangle / 2\n let circleY = heightTriangle - (heightTriangle) / 4 +2\n // Calculate the radius of the inscribed circle (it should be the distance from the centroid to any vertex)\n let radiusCircle = Math.sqrt(Math.pow(circleX, 2) + Math.pow(circleY - (heightTriangle), 2))\n\n svg.append(\"circle\")\n .attr(\"stroke\", \"black\")\n .attr(\"cx\", circleX)\n .attr(\"cy\", circleY)\n .attr(\"r\", radiusCircle/2)\n .attr(\"fill\", \"none\")\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":277,"value":"**Task 3**:\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","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