31:[] 2f:{"title":"Drawing in the Browser","cells":[{"id":0,"value":"# Drawing in the Browser\n\nThere are several standard ways to render graphics in the browser, SVG, Canvas and WebGL. We will focus on SVG as it is the most convenient for making interactive visualizations. ","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"toc(\"h2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Shapes\nThe most common [SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG) we will use are these five: \n\ntag | example | attributes | positioning attributes\n--- | --- | ---\n<rect> | ${tableSVG('')} | width, height | x, y\n<circle> | ${tableSVG('')} | r | cx, cy\n<path> | ${tableSVG('')} | d |\n<text> | ${tableSVG('hi there!')} | | x, y, text-anchor, dy \n<g> | ${tableSVG('group element')} | | transform \n\n\n*Table from [Shirley's Custom D3 workshop materials](https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen?collection=@sxywu/introduction-to-d3-js)*\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":17,"value":"viewof q_shapes = Q({\n title: \"Exercise 1: Shapes\",\n questions: [\n `Try drawing at least one of each of the above SVG elements in the cell bellow.`,\n ],\n guides: [\n `Learn more about [SVG Paths](https://observablehq.com/@mkfreeman/svg-path-basics) and [d3.path](https://observablehq.com/@d3/d3-path).`\n ],\n hints: [\n ``\n ],\n solutions: [\n ``,\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":35,"value":"A(q_shapes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"## HTML & Data\nDepending on your background you may be more or less familiar with the various ways you can tell the browser what you want it to draw. If you come from the React/Vue/Angular world, you'll be familiar with template syntax. The basic idea is to generate HTML based on some JavaScript data.\n\nIn Observable there is a similar concept using HTML cells.","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"myValue = 50 // here is a JavaScript variable, try changing it","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":143,"value":"For data visualization, what we often want to do is create some HTML for each of our data points. While there are ways to loop over data in most template systems, let's type out the HTML by hand in the following exercise.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"viewof q_color = Q({\n title: \"Exercise 2: Data\",\n questions: [\n `Let's manually draw a few \"data-driven\" circles with labels. Doing things by hand is a good way to motivate doing things with code!`,\n ],\n guides: [\n `Read more about [working with color in D3](https://observablehq.com/@d3/working-with-color).`\n ],\n hints: [\n ``\n ],\n solutions: [\n ``,\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"// Let's pretend like this is some data we want to visualize\ndata = [\n { name: \"purple\", color: \"rgb(185,100,198)\"}, \n { name: \"green\", color: \"rgb(47,110,116)\"}, \n { name: \"orange\", color: \"rgb(240,137,51)\"}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":86,"value":"A(q_color)","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"---\n### Up Next: [Drawing with Data](https://observablehq.com/@observablehq/pwd3-drawing-with-data)\nNow that you've typed out a \"data visualization\" by hand, let's get to the good stuff, letting D3 draw for us!","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"---\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"viewof showAll","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {Q, A, styles, viewof showAll} with { data } from \"@observablehq/plot-exploration-penguins\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}