2b:null 2c:["$","title",null,{"children":"Painting with Data: Student Workbook | Ian Johnson | Observable"}] 31:[] 2f:{"id":"62862df916e1881b","slug":"painting-with-data-student-workbook","title":"Painting with Data: Student Workbook","thumbnail":"28ca316878b74e127bf48ea25ee09faed613582fef4325aaa26e59dd409d32b4","access_level":"public","create_time":"$D2020-09-22T02:14:45.737Z","update_time":"$D2020-10-27T19:49:12.573Z","view_time":null,"first_public_time":"$D2020-09-27T18:25:20.562Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":"starter_2024"},"version":159,"publish_version":159,"role":null,"authored":false,"authors":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}],"members":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":23,"collection":null,"type":"notebook","body":{"title":"Painting with Data: Student Workbook","cells":[{"id":0,"value":"md`# Painting with Data: Student Workbook\n*[Workshop Outline](https://observablehq.com/d/abf21606c94bee7c)*\n\nWe will be building out this notebook together. Each section has a space for you to practice what we talk about. You can fork this notebook (menu in the top right of this page) to follow a long and share your work in case you run into a bug.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`## Drawing in the Browser\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. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`### Shapes\nThe most common SVG elements 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","author":"$undefined","summary":"$undefined"},{"id":57,"value":"md`Let's draw (at least) one of each of the above elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"mySvg = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`### Color\n*[Working with Color in D3](https://observablehq.com/@d3/working-with-color)*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"colors = [\"rgb(185,100,198)\", \"rgb(47,110,116)\", \"rgb(240,137,51)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"md`Lets draw some rectangles and lines in different colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"mySvg2 = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`## Drawing with Data\n*[Learning Joins](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3)* \n*[Selection Join](https://observablehq.com/@d3/selection-join)*\n\nLet's bring some data in to draw with, we will use [Palmer Penguins](https://observablehq.com/@enjalot/palmer-penguins).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"penguins = d3.csv(\n \"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv\", \n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`## Scales\n*[Learning Scales](https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3)* \n*[Animated Scale Diagram](https://observablehq.com/@mkfreeman/animated-scale-diagram)* \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"import {chart as scalechart, viewof button as scalebutton} from \"@mkfreeman/animated-scale-diagram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"viewof scalebutton","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"scalechart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"md`Scales are a fundamental concept in data visualization, and d3 provides many useful implementations. Just try clicking into the next cell and hitting \"tab\" to start autocomplete:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"d3.scale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"scatter = {\n let svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"md`### Axis\n*[Stylizing the axis](https://observablehq.com/@d3/styled-axes)* \n*[Specifying tick marks](https://observablehq.com/@d3/axis-ticks)*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"xAxis = (svg) => {\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"md`### Legend\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"md` ### Note\n*[Converting an Observable Notebook to Normal JavaScript](https://observablehq.com/@bumbeishvili/convert-observable-code-to-normal-javascript)*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`# Part II`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"md`[Brushable Scatterplot](https://observablehq.com/@d3/brushable-scatterplot)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`[Brushable Parallel Coordinates](https://observablehq.com/@d3/brushable-parallel-coordinates)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"md`[Brushable Scatterplot Matrix](https://observablehq.com/@d3/brushable-scatterplot-matrix)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"