2a:null 2b:["$","title",null,{"children":"Lab 1: Shapes and Styles | Angelina Grillo | Observable"}] 30:[{"id":"7bddf08336597195c5ed8ccc71457703e953a8eb8f236dfc49f97bfe5318bb439c814c00a8a0578fbfcf6335a8cff7a30802dc0de59b30afbfafa41075280f70","href":"https://static.observableusercontent.com/files/7bddf08336597195c5ed8ccc71457703e953a8eb8f236dfc49f97bfe5318bb439c814c00a8a0578fbfcf6335a8cff7a30802dc0de59b30afbfafa41075280f70","name":"nyc_census_by_boro_2000-2010.csv","type":"text/csv","lastModified":1789408812705,"size":1065}] 2e:{"id":"243aa09dcdd32016","slug":"lab-1-shapes-and-styles","title":"Lab 1: Shapes and Styles","thumbnail":"69986a2813ae1a8c4ffd4d4924eb55d5841c090ed338a9f0ff3ba61a5a2981be","access_level":"public","create_time":"$D2026-09-16T18:35:28.664Z","update_time":"$D2026-09-17T01:54:18.609Z","view_time":null,"first_public_time":"$D2026-09-17T01:59:09.509Z","has_unpublished_edits":null,"fork":{"id":"09b93b59099f9a8d","slug":"lab-1-shapes-and-styles","title":"Lab 1: Shapes and Styles","owner":{"id":"8d9ed14129df54c9","login":"columbiaviz-labs","name":"Columbia Dataviz Labs"}},"stars":0,"starred":false,"owner":{"type":"team","id":"33832ee80d2f7e3a","login":"angelina1391","name":"Angelina Grillo","avatar_url":"https://avatars-next.observableusercontent.com/0c78cf144e937e1e9e25efe4a1d342c1506d65e25dff623d1e27778c90afaee2","tier":"starter_2024"},"version":429,"publish_version":429,"role":null,"authored":false,"authors":[{"type":"individual","id":"083d25824ff19a33","login":"angelina1391","name":"Angelina Grillo","avatar_url":"https://avatars-next.observableusercontent.com/0c78cf144e937e1e9e25efe4a1d342c1506d65e25dff623d1e27778c90afaee2","tier":null}],"members":[{"type":"team","id":"33832ee80d2f7e3a","login":"angelina1391","name":"Angelina Grillo","avatar_url":"https://avatars-next.observableusercontent.com/0c78cf144e937e1e9e25efe4a1d342c1506d65e25dff623d1e27778c90afaee2","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":"Lab 1: Shapes and Styles","cells":[{"id":0,"value":"md`# Lab 1: Shapes and Styles\n\nThe goal of labs is to familiarize ourselves with the tools we'll be using later in the semester to build interactive data visualizations on the web. In this first notebook we'll be getting started with the Observable platform, with using SVG, and loading data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`---\n\n## 1. SVG Primer\n
\nFirst things first:\n* SVG = Scalable Vector Graphics\n* SVG coordinate system has (0,0) at upper left\n\nVery rarely will you be directly writing SVG, typically D3, the library we'll use to code data visualizations will be generating HTML and SVG code for us, but you need to be able to read it in order to debug your work. Here we will also explore the ways to style SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`This is what an SVG ‘viewport’ looks like when inserted into an HTML file. This is where we'll be drawing our shapes (and our future visualizations):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"md`This is what [basic SVG shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) look like in an HTML file:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"md`Now try making a new SVG viewport with width 700 and height 700, and draw a minimal geometric mouse 🐭 with whiskers. You should have at least 1 rectangle, 3 circles or ellipses, and 2 lines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"md`You can style SVG with the following properties (and many more)\n* \\`fill\\`\n* \\`opacity\\`\n* \\`stroke\\`, \\`stroke-width\\`\n* \\`font-family\\`, \\`font-size\\` for text\n\nFor example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"md`You can also write text, which looks like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"md`Copy your mouse from above and modify it to make sure you have at least 2 different colors, two different stroke widths, and one line of text:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"\n