`, `<desc>`, and `<a>`) to provide meaningful structure and context to the content, which is processed by screen readers and other assistive technologies to convey information to users with disabilities.","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"## Manipulating existing SVGs","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":424,"value":"source: https://www.amcharts.com/svg-maps/?map=belgium","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"## Resources and Further Learning","pinned":false,"hidden":false,"mode":"md"},{"id":368,"value":"- [W3 schools](https://www.w3schools.com/graphics/svg_intro.asp)\n- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG)","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"google = FileAttachment(\"svgs-for-developers-2-filesize-1540x748.jpg.webp\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"source: https://deliciousbrains.com/svg-advantages-developers/","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"} </article></body></html>

31:T20db,{ let winked = false; const svg = d3.create('svg').attr('width', "740.54272").attr('height', "918.85162"); const g = svg.append('g').attr('font-family', "DejaVu Sans, Helvetica, sans-serif") .attr("transform", "translate(-5148.3106422 -8153.55522) scale(10.33256)"); g.append("path") .attr("fill", "#665440") .attr("d", "M563.483 829.094c0-3.943 2.252-6.484 2.252-11.663 0-4.732-2.071-8.484-1.67-11.133.401-2.649 3.712-4.082 3.712-4.082l-6.123-7.053s-2.65 5.195-5.993 5.195c-2.779 0-4.967-2.879-7.817-3.307-3.815-.573-9.386 2.751-9.386 2.751s8.114-5.592 4.452-7.423c-2.968-1.484-7.051 7.161-7.051 7.161s1.861-9.943-1.49-9.943c-3.353 0-.737 9.798-.737 9.798s-4.265-8.501-7.237-6.831c-2.823 1.59 5.567 7.268 5.567 7.268s-7.297-3.306-10.631-3.163c-4.646.201-3.951 2.761-8.201 2.761-2.86 0-4.028-5.595-4.028-5.595l-9.704 8.748s4.431 1.884 5.205 4.271c1.566 4.823-2.331 6.691-2.331 10.393 0 6.31 2.97 8.947 2.97 12.246 0 3.46-6.497 6.124-6.497 6.124s7.193 2.007 7.193 5.012c0 4.267-3.479 5.905-3.479 10.577 0 5.752 3.896 5.379 3.188 9.647-.428 2.583-5.973 6.867-5.973 6.867l8.688 8.673s2.827-4.205 5.786-4.205c2.97 0 5.283 2.583 8.164 2.583 3.337 0 5.214-2.596 7.795-2.596 3.335 0 5.382 5.382 5.382 5.382s1.38-5.514 6.309-5.514c1.521 0 3.711 2.356 6.865 2.356 3.155 0 4.863-2.648 7.609-2.648 2.41 0 4.921 4.642 4.921 4.642l8.255-7.932s-5.383-2.226-5.383-5.009c0-3.104 1.856-4.454 1.856-10.577 0-7.237-2.15-8.051-2.15-13.102 0-2.261 5.104-4.143 5.104-4.143s-5.392-.815-5.392-6.536z"); g.append("path") .attr("fill", "#ffeb8c") .attr("d", "m560.964 803.779-53.062-1.225.82 66.283 52.242-.817"); g.append("path") .attr("fill", "#c7a941") .attr("d", "m560.215 804.763-51.427-1.16.774 64.185 50.653-.771"); g.append("path") .attr("fill", "#824830") .attr("d", "M560.215 832.603h-51.076l.423 35.185 50.653-.771"); g.append("path") .attr("fill", "#596b30") .attr("d", "M509.139 832.603h51.076v-4.743s-2.369 3.197-4.058 3.197c-2.322 0-4.1-4.931-6.573-4.931-2.475 0-5.22 5.896-5.22 5.896l-19.143-.774s-3.673-9.278-5.8-9.278c-1.161 0-3.285 4.64-3.285 4.64s-3.094-8.121-4.642-8.121c-.854 0-1.802 2.128-2.479 4.032l.124 10.082z"); g.append("path") .attr("fill", "#433225") .attr("d", "M514.588 832.964s-4.903.22-4.903 1.765c0 1.546 5.969.82 5.969 2.37 0 1.545-4.435 1.4-4.424 2.754.024 2.682 10.247 1.062 10.247 1.062s-7.734-.676-7.734-1.642c0-.968 4.179-1.233 4.179-2.394 0-1.306-6.98-1.135-6.98-2.15-.002-1.114 3.646-1.765 3.646-1.765zm40.4.595s-2.554.113-2.554.918c0 .807 3.107.428 3.107 1.234 0 .804-2.309.729-2.302 1.432.012 1.395 5.333.553 5.333.553s-4.023-.351-4.023-.853c0-.505 2.174-.644 2.174-1.245 0-.68-3.634-.592-3.634-1.121.001-.576 1.899-.918 1.899-.918zm-33.61 10.657s6.644-2.708 2.466-9.945c-2.987-5.176 0-12.663 0-12.663s-.358-5.733 1.529-8.63c2.09-3.2 4.734-5.012 8.578-5.012 8.848 0 12.021 4.701 12.021 16.885 0 12.354 2.507 16.101 2.507 16.101l-27.101 3.264z"); g.append("path") .attr("fill", "#f4d37e") .attr("d", "M551.956 865.953v-4.893c7.623-4.737 1.306-12.882-1.368-16.177-5.006-6.175-13.522-7.414-13.522-13.256 0-5.343 4.453-9.187 1.671-16.146-1-2.497-7.516-4.592-7.516-4.592l-4.037 2.228c-1.529.974-2.202 9.183.418 12.944 2.133 3.062 4.038 3.248 4.038 3.248v5.239s-5.985 2.923-11.598 9.498c-4.994 5.854-7.204 18.979-7.453 22.861l39.367-.954z"); g.append("path") .attr("fill", "#824830") .attr("d", "M560.215 832.603h-51.076l.423 35.185 50.653-.771z"); g.append("path") .attr("fill", "#433225") .attr("d", "M509.139 832.603h51.076v-4.743s-2.369 3.197-4.058 3.197c-2.322 0-4.1-4.931-6.573-4.931-2.475 0-5.22 5.896-5.22 5.896l-19.143-.774s-3.673-9.278-5.8-9.278c-1.161 0-3.285 4.64-3.285 4.64s-3.094-8.121-4.642-8.121c-.854 0-1.802 2.128-2.479 4.032l.124 10.082z"); g.append("path") .attr("fill", "#433225") .attr("d", "M514.588 832.964s-4.903.22-4.903 1.765c0 1.546 5.969.82 5.969 2.37 0 1.545-4.435 1.4-4.424 2.754.024 2.682 10.247 1.062 10.247 1.062s-7.734-.676-7.734-1.642c0-.968 4.179-1.233 4.179-2.394 0-1.306-6.98-1.135-6.98-2.15-.002-1.114 3.646-1.765 3.646-1.765zm40.4.595s-2.554.113-2.554.918c0 .807 3.107.428 3.107 1.234 0 .804-2.309.729-2.302 1.432.012 1.395 5.333.553 5.333.553s-4.023-.351-4.023-.853c0-.505 2.174-.644 2.174-1.245 0-.68-3.634-.592-3.634-1.121.001-.576 1.899-.918 1.899-.918zm-33.61 10.657s6.644-2.708 2.466-9.945c-2.987-5.176 0-12.663 0-12.663s-.358-5.733 1.529-8.63c2.09-3.2 4.734-5.012 8.578-5.012 8.848 0 12.021 4.701 12.021 16.885 0 12.354 2.507 16.101 2.507 16.101l-27.101 3.264z"); g.append("path") .attr("fill", "#f4d37e") .attr("d", "M551.956 865.953v-4.893c7.623-4.737 1.306-12.882-1.368-16.177-5.006-6.175-13.522-7.414-13.522-13.256 0-5.343 4.453-9.187 1.671-16.146-1-2.497-7.516-4.592-7.516-4.592l-4.037 2.228c-1.529.974-2.202 9.183.418 12.944 2.133 3.062 4.038 3.248 4.038 3.248v5.239s-5.985 2.923-11.598 9.498c-4.994 5.854-7.204 18.979-7.453 22.861l39.367-.954z"); g.append("path") .attr("fill", "#433225") .attr("d", "M559.088 867.035c-.147-1.987-.645-8.715-2.26-13.557-2.028-6.089-4.85-9.744-10.717-14.476 0 0-5.01 7.794-15.03 7.794-4.355 0-7.375-4.87-5.708-8.629-.895.796-4.452 4.888-5.331 5.88-4.603 5.227-7.542 14.581-7.542 23.703l46.588-.715z"); g.append("path") .attr("fill", "#f5c14c") .attr("d", "M538.129 861.963s-.743-2.492-3.701-2.827c-3.027-.343-8.312 4.907-6.274 6.235 3.551 2.324 9.975-3.408 9.975-3.408z"); g.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linecap", "round") .attr("stroke-width", ".28999999") .attr("d", "m534.315 862.97998-3.987 2.46399m1.37702-4.133-3.69702 2.758m5.50799-2.31995-4.711 3.33399"); g.append("path") .attr("fill", "#f5df88") .attr("d", "M529.853 860.634s.735-1.933 4.229-2.006c3.049-.062 8.69 5.125 6.653 6.454-3.551 2.321-10.882-4.448-10.882-4.448z"); g.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linecap", "round") .attr("stroke-width", ".35049999") .attr("d", "m534.57501 862.68903 3.98596 2.46698m-1.37695-4.133 3.69898 2.75397m-5.51001-2.32001 4.71099 3.33405"); g.append("path") .attr("fill", "none") .attr("stroke", "#8a4d4a") .attr("stroke-linecap", "round") .attr("stroke-width", ".35049999") .attr("d", "m535.70502 865.10797 1.43896 1.97601"); g.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linecap", "round") .attr("stroke-width", ".28490001") .attr("d", "M527.114 818.174s1.322-.743 2.575-.381c1.533.442 1.347 1.725 1.347 2.516 0 1.343-1 2.713-1 2.713s.406.137 1.178.137c.771 0 1.169-.091 1.169-.091"); g.selectAll('.eyes') .data([{ cx: 529.19, cy: 818.94202 }, { cx: 534.93296, cy: 818.94202 }]) .enter() .append("ellipse") .attr('class', (d,i) => `eye-${i}`) .attr("fill", "#000") .attr("cx", d => d.cx) .attr("cy", d => d.cy) .attr("rx", .4) .attr("ry", .8); g.append("path") .attr("fill", "#433225") .attr("d", "m547.735 841.183-8.164 4.27c5.429-5.891.695-8.954.695-8.954l5.149-3.759 2.32 8.443z"); g.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linecap", "round") .attr("stroke-width", ".55669999") .attr("d", "M548.479 840.952s-3.709.419-8.907 4.501c-5.81 4.566-8.907 11.133-8.907 11.133"); g.append("path") .attr("class", "smile") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linecap", "round") .attr("stroke-width", ".41339999") .attr("d", "M529.758 824.797s.827.803 1.74.772c1.169-.033 1.781-.767 1.781-.767"); g.append("path") .attr("class", "wink") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linecap", "round") .attr("stroke-width", ".28490001") .attr("d", "M533.143 818.099c.518-.404 1.169-.635 1.831-.585.641.051 1.16.349 1.492.799"); setInterval(function() { if (!winked) { g.select(".eye-1").attr("display", "none"); g.select('.wink').attr('d', "M533.143 818.099c.518 .404 1.169 .635 1.831 .585 .641 -.051 1.16 -.349 1.492 -.799") .attr("transform", "translate(0, 1)"); } else { g.select('.eye-1').attr('display', 'block'); g.select('.wink').attr('d', "M533.143 818.099c.518-.404 1.169-.635 1.831-.585.641.051 1.16.349 1.492.799") .attr("transform", "translate(0, 0)"); } winked = !winked; }, 2000); return svg.node(); }32:Tc4b,{ const [width, height] = [400, 300]; const svg = d3.create('svg') .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); const rect = svg.append("rect") .attr("x", 10) .attr("y", 30) .attr("width", 70) .attr("height", 70) .attr("fill", "lightblue") .attr("stroke", "black") .attr("stroke-width", 5) .style('cursor', 'grab') .call(drag()) .append("title") .text("I'm a rectangle"); const circle = svg.append("circle") .attr("cx", 200) .attr("cy", 140) .attr("r", 40) .attr("fill", "yellow") .attr("stroke", "orange") .attr("stroke-width", 3) .transition() .duration(1000) .attr("r", 50) .transition() .duration(1500) .attr("r", 40) .ease(d3.easeLinear) .on("end", function repeat() { d3.select(this) .transition() .duration(1000) .attr("r", 50) .transition() .duration(1500) .attr("r", 40) .ease(d3.easeLinear) .on("end", repeat); }); const ellipse = svg.append("ellipse") .attr("cx", 300) .attr("cy", 50) .attr("rx", 70) .attr("ry", 35) .attr("fill", "lightgreen") .attr("stroke", "darkgreen") .attr("stroke-width", 4) .transition() .duration(1000) .attr("fill", "darkgreen") .attr("stroke", "lightgreen") .transition() .duration(1500) .attr("fill", "lightgreen") .attr("stroke", "darkgreen") .ease(d3.easeLinear) .on("end", function repeat() { d3.select(this) .transition() .duration(1000) .attr("fill", "darkgreen") .attr("stroke", "lightgreen") .transition() .duration(1500) .attr("fill", "lightgreen") .attr("stroke", "darkgreen") .ease(d3.easeLinear) .on("end", repeat); }); const line = svg.append("line") .attr("x1", 50) .attr("y1", 200) .attr("x2", 270) .attr("y2", 250) .attr("stroke", "darkred") .attr("stroke-width", 8) .append("title") .text("This is a line"); const path = svg.append("path") .attr("d", "M345,110 L368,130 C350,150,355,150,370,175 L367,178 C350,170,340,180,353,197 L350,200 C330,175,330,160,357,168 L335,140 Q360,125,338,110 Z") .attr("stroke", "black") .attr("stroke-width", 3) .attr("fill", "purple") .append("title") .text("I'm a path, you can do with me whatever you want"); function drag() { function dragstarted() { d3.select(this).attr("stroke", "red"); } function dragged(event, d) { d3.select(this).raise().attr("x", event.x).attr("y", event.y); } function dragended() { d3.select(this).attr("stroke", "black"); } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return svg.node(); }33:T50b3,34:[{"id":"295fd83a0f863ef7e982d30fc6a865d0ca75198a5a46424f1f8b51169deb13cc94bc8e642c893098c17515dbfa7545c57e5568490f7ab47041269fe36cf2f147","href":"https://static.observableusercontent.com/files/295fd83a0f863ef7e982d30fc6a865d0ca75198a5a46424f1f8b51169deb13cc94bc8e642c893098c17515dbfa7545c57e5568490f7ab47041269fe36cf2f147","name":"svgs-for-developers-2-filesize-1540x748.jpg.webp","type":"image/webp","lastModified":1708427235830.103,"size":17752},{"id":"5caea1bcfacc631e44ed76f2acb797f3cb5bd4a6383b2a5ae15922bdf0d8f60ae499bc87065f0a5076235176ba38fc82c2b8f7d272621d7b0649a104ed685c93","href":"https://static.observableusercontent.com/files/5caea1bcfacc631e44ed76f2acb797f3cb5bd4a6383b2a5ae15922bdf0d8f60ae499bc87065f0a5076235176ba38fc82c2b8f7d272621d7b0649a104ed685c93","name":"d3_svg_coords.png","type":"image/png","lastModified":1708368992324.75,"size":18978}] 2f:{"title":"Introduction to SVG's","cells":[{"id":0,"value":"# Introduction to SVG's","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"*SVG's (Scalable Vector Graphics)* are the most practical and widely adopted building blocks used to build web-based data visualizations. With SVG, we can easily create shapes within a browser window using markup code similar to HTML.\n\nKey advantages:\n- ability to maintain image quality even when resized,\n- reduced size.","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"Image obtained from *https://en.m.wikipedia.org/wiki/File:Stylized_Mona_Lisa.svg*, and adpated.","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"## Shapes","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"SVG has some predefined shapes we can translate our datapoints in.","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"#### Rectangle","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"The `` element is used to create a rectangle and variations of a rectangle shape. It needs an *x*- and *y*-coordinate and a *width* and *height* attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":83,"value":"#### Circle","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"The `` element is used to create a circle. We need to choose the center of the circle by providing a *cx* and *cy* coordinate, and add the radius to the *r* attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":85,"value":"#### Ellipse","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"The `` element is used to create an ellipse. Ellipses are similar to circles, but they take two radius attributes (*rx* and *ry*) instead of one.","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":87,"value":"#### Line","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"The `` element is used to create a line. It creates a line between two provided coordinates; a start position (*x1*,*y1*) and an end position (*x2*,*y2*).","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":89,"value":"#### Path","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"The `` element is used to define a path. They are used to create simple or complex shapes combining several straight or curved lines. This element only has one attribute (*d*) that defines the points and other commands needed to draw the required shape.","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":91,"value":"#### Text","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"The `` element is used to define a text. It takes an *x* and *y* coordinate, and a font-size.","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":93,"value":"## SVG Coordinate system","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"The SVG coordinate system works a bit different in comparison to what we are used to. In SVG, the origin point (0,0) is located at the top-left corner of the SVG viewport. This means that positive x-values extend horizontally to the right, and positive y-values extend vertically downwards.","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"d3_svg_coords = FileAttachment(\"d3_svg_coords.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"Image obtained from: https://pandaqitutorials.com/Website/svg-coordinates-viewports.","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"Note: The dimensions of your created svg are absolute. When an svg element is positioned outside of the svg or exceeds its width or height, the element is clipped. You will still be able to find your svg element in the DOM, but you won't find it on the screen.","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":204,"value":"## Styling, Animation and Interactivity\n- SVG element can be styles using inline styling, external style sheets or within JS scripts. Note however that some styling attributes might differ compared to the styling of HTML tags)\n- SVG supports various animation techniques such as transitions, transformations, and keyframe animations.\n- SVG elements can respond to user interactions such as clicks, mouse movements, and keyboard input by attaching event listeners. JavaScript libraries like D3.js provide convenient methods for adding event handlers to SVG elements, allowing you to update visual elements dynamically based on user actions.","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"## Accessibility\nWorking with SVG elements allows us to add semantics to our visuals (``, ``, `<desc>`, and `<a>`) to provide meaningful structure and context to the content, which is processed by screen readers and other assistive technologies to convey information to users with disabilities.","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"## Manipulating existing SVGs","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":424,"value":"source: https://www.amcharts.com/svg-maps/?map=belgium","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"## Resources and Further Learning","pinned":false,"hidden":false,"mode":"md"},{"id":368,"value":"- [W3 schools](https://www.w3schools.com/graphics/svg_intro.asp)\n- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG)","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"google = FileAttachment(\"svgs-for-developers-2-filesize-1540x748.jpg.webp\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"source: https://deliciousbrains.com/svg-advantages-developers/","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"} </article></body></html>