45:["$","title",null,{"children":"Lab 1: Shapes and Styles | Columbia Dataviz Labs | Observable"}] 4d:[] 49:{"id":"09b93b59099f9a8d","slug":"lab-1-shapes-and-styles","title":"Lab 1: Shapes and Styles","thumbnail":"69986a2813ae1a8c4ffd4d4924eb55d5841c090ed338a9f0ff3ba61a5a2981be","access_level":"public","create_time":"$D2022-01-17T19:01:20.899Z","update_time":"$D2026-01-29T01:00:24.989Z","view_time":null,"first_public_time":"$D2022-01-17T19:16:43.333Z","has_unpublished_edits":null,"fork":{"id":"4ab59f29b2dd4507","slug":"lab-1-shapes-and-styles","title":"Lab 1: Shapes and Styles","owner":{"id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8d9ed14129df54c9","login":"columbiaviz-labs","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":"starter_2024","bio":"Columbia University Computer Science W4995 Intro. to Data Visualization","following":false},"version":248,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c183278c22a18e8","login":"columbiaviz-s22","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":null,"bio":"Columbia University Computer Science W4995 Intro. to Data Visualization","following":false}],"members":[{"type":"individual","id":"9c183278c22a18e8","login":"columbiaviz-s22","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":206,"collection":{"id":"262f5dffba66ae11","slug":"columbia-data-viz-labs","title":"Columbia Dataviz Labs","owner":{"id":"8d9ed14129df54c9","login":"columbiaviz-labs","name":"Columbia Dataviz Labs"}},"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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"md`Note that your shapes will overlap in the order they are specified in code. (That is, SVG does not support CSS \\`z-index\\` property, which is planned for SVG v2.) Modify the following to place the green rectangle on the top:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"## See also\n\nIf you'd like to get a deeper understanding of SVG’s capabilities, there are a pair of stellar tutorials by [Josh Comeau](https://www.joshwcomeau.com) that I'd recommend:\n - [A Friendly Introduction to SVG](https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/)\n - [An Interactive Guide to SVG Paths](https://www.joshwcomeau.com/svg/interactive-guide-to-paths/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"md`---\n\n# 2. Interactive Notebooks!\n\nRead Observable's [Five-Minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction). Next, create a slider, and separately, create another copy of your mouse as a new cell, and this time modify it so that moving the slider causes part of the mouse to move.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"// Your slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// Your movable, interactive mouse portrait","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`---\n\n# 3. Data Basics\n\nLet's include the d3 library since it has a number of handy data import functions:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"d3 = require(\"d3@5\")\n// Old way still works though:\n// d3 = require(\"https://d3js.org/d3.v4.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`For example, you can load small CSV files inline:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"population = d3.csvParse(`\nage,population\n<5,2704659\n5-13,4499890\n14-17,2159981\n18-24,3853788\n25-44,14106543\n45-64,8819342\n≥65,612463`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`Or load hosted CSV files:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"flare = d3.csv(\"https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`You can also use attach files to your notebook. Read [how to here](https://observablehq.com/@observablehq/file-attachments). Next, locate a small JSON or CSV file of your choice and in the cell below, print a data point from your file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"// print the value of one data point from your file attachment","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`You can also call an external API, like so:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"nyt = d3.json(\"https://api.nytimes.com/svc/topstories/v2/home.json?api-key=CsL1ghbiApGAWc3sv2AcGXbbXyuAm2RF\")\n// see https://developer.nytimes.com for API keys","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`Use Observable to look at the structure of the data returned, and print the headline of the 3rd article below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"// print the headline of the third article here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`Next let us try data manipulation. JavaScript comes with many powerful [array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) built-in, for example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"data = [\n {key:'Apple', value: 5},\n {key:'Banana', value: 10},\n {key:'Blueberry', value: 25},\n {key:'Mango', value: 20},\n {key:'Orange', value: 15}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"data.slice(2, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`Another example: [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the result of calling a function on every element in the array. This also demonstrates the [JavaScript Arrow \\`=>\\` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"data.map(d => d.value^2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`In the next cell, print the total number of characters in all of the headlines in the above NYT API response.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// count how many characters are in all the NYT headlines","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`---\n\n# 4. Importing other notebooks\n\nLast but not least, take a look at what's available in the [Observable D3 Gallery](https://observablehq.com/@d3/gallery). Choose one that you like, and include it below by following instructions to import cells from other notebooks in the [Five-Minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"// import a chart from the gallery that you like here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null