2e:null 2f:["$","title",null,{"children":"Observable Basics | Interactive Info Vis | Observable"}] 34:[{"id":"f27765b32374ddd08315bcb50a6671a17588ed15b7a1493697abae287f65659d3852bc3574a520fbc1cfaf6f5affc0ee90ca935fd029f93c37fba03ad3368834","href":"https://static.observableusercontent.com/files/f27765b32374ddd08315bcb50a6671a17588ed15b7a1493697abae287f65659d3852bc3574a520fbc1cfaf6f5affc0ee90ca935fd029f93c37fba03ad3368834","name":"molnar.jpg","type":"image/jpeg","lastModified":1601864346654.35,"size":484759}] 32:{"id":"351d2bc093cb4c04","slug":"observable-basics","title":"Observable Basics","thumbnail":"65f020755c2938a73a2a89a9457182f78520f742435fee1a058e3bd82844dd28","access_level":"public","create_time":"$D2020-10-05T02:19:06.654Z","update_time":"$D2021-01-05T15:05:01.174Z","view_time":null,"first_public_time":"$D2020-10-05T02:22:06.135Z","has_unpublished_edits":null,"fork":{"id":"fec0be53ea5a918f","slug":"part-2-observable-svg-basics","title":"Part 2: Observable + SVG Basics","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"stars":7,"starred":false,"owner":{"type":"team","id":"82cd20deb9e45d2a","login":"uw-info474","name":"Interactive Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/0f696394de7ab5e2cd50dd2e1dd79af08077f3f74024d007b8a5af8b9d01a473","tier":"pro_2024"},"version":469,"publish_version":469,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":32,"collection":{"id":"0aeefbf3c009d637","slug":"in-class","title":"In Class","owner":{"id":"82cd20deb9e45d2a","login":"uw-info474","name":"Interactive Info Vis"}},"type":"notebook","body":{"title":"Observable Basics","cells":[{"id":0,"value":"md`# Observable Basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Observable\nThis course assumes foundational JavaScript familiarity, but there are some particularities about how Observable JavaScript notebooks work that need to be covered. It takes a bit of getting used to, but they're incredibly powerful, and radically simplify data loading, interactivity, and other JavaScript challenges. As a suppliment, you may want to see their [Five Minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction) notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Markdown\nAn Observable cell allows you to write Markdown by simply starting the cell with the letters md, and then wrapping all of your markdown content in backtics (technically a _template literal_). For example:\n\nmd\\\\\\`Write your markdown in between these backtics in any cell.\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### HTML\nSimilarly to Markdown, you can initiate any cell with the HTML tag \\`html\\`:\n\nhtml\\\\\\`Write your <tags></tags> in between backtics in any cell.\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`### JavaScript\nAs JavaScript Notebooks, Observable not surprisingly supports writing JavaScript. To create a \"global\" variable, simply assign a value to a variable name in any cell (without an assertion like \\`const\\` or \\`let\\`):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"// Create a globally scoped \"city\" of the city you are currently in\ncity = \"Toronto\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`To write a multi-line JavaScript statement, simply use curly braces \\`{}\\`, and make sure to **return** any value you want.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"// Here's an example of a multi line statment\nmy_value = {\n // First calculate something: note the \"standard\" use of const or let\n const x = Math.random()\n const y = Math.random()\n return x * y // make sure to return something!\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`### Mix and Match\nOne of the powerful aspects of Observable notebooks is the ability to _mix in_ your defined JavaScript variables into your HTML template literals. For example, see how the variable \\`city\\` is used in the cell below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`I'm currently in ${city}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`Part of the ease of working with Observable is that _A cell referencing another cell is re-evaluated automatically when the referenced value changes_ ([source](https://observablehq.com/@observablehq/five-minute-introduction)). So, try changing the variable \\`city\\` and see how your sentence automatically updates (we'll use this functionality to control our generative art tools that we build).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`Observable simplifies code resuse through the use of **imports** (see [here](https://observablehq.com/@observablehq/introduction-to-imports) for more details). As an example, we'll make use of several utilities from this [inputs notebook](https://observablehq.com/@jashkenas/inputs):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// Here's an example of storing a *value* in a variable created by a slider:\nviewof slider_value = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 10,\n title: \"Slider Title\",\n description: \"Description of the slider\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`You can reference the value of the slider in a template literal using this syntax (note the automatic updates!): ${slider_value}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`### Require\nIf you want to use a standard JavaScript library, you can use the **require** statement (see [documentation](https://observablehq.com/@observablehq/introduction-to-require) for details)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"// Load the lodash library\n_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"// Create an array from 0 to 10 using the range function\n_.range(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`### File attachments\nIt's often helpful to upload a file, for example, a dataset or an image. To do so, you can use the **File Attachment** functionality, as detailed [here](https://observablehq.com/@observablehq/file-attachments).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"// Load a file that has been uploaded to this notebook\nsample_img = await FileAttachment(\"molnar.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"// Display the image\nmd`

_Structure de Quadrilatères_, Vera Molnár. [Source](https://www.artsy.net/artwork/vera-molnar-structure-de-quadrilateres-14)

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## SVG\nThroughout the course, we'll render most visualizations as [Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction). As an introduction, let's see how we can draw some [basic shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) (for more advanced curvature, see the [documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for \\`\\` elements):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// Create a string to describe the line path for the polyline above\nline_path = _.range(400)\n .map(d => `${d}, ${Math.cos(d / 10) * 20}`)\n .join(' ')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`While the above shapes are basic, they can be manipulated to create complex figures ([source](https://observablehq.com/@luukschipperheyn/animated-svg-bezier-blobs)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"display_blobs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`Mastering such nuances allows the creation of incredible work, such as this ([source](https://observablehq.com/@makio135/generating-svgs/10)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"concentric","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## Connecting Inputs to SVGs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`As you may have guessed at this point, a major benefit to using Observable is the ability to create user interface inputs that control SVG (visualization )outputs. We'll obviously begin working with data shortly, but for now, we'll see how to controls SVG elements through inputs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// Here's an example of storing a *value* in a variable created by a slider:\nviewof num_circles = slider({\n min: 1,\n max: 50,\n step: 1,\n value: 10,\n title: \"Number of circles to render\",\n description: \"Choose a number of circles to render in the SVG element below\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"import { display_blobs } from \"@mkfreeman/animated-svg-bezier-blobs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"import { concentric } from \"@mkfreeman/generating-svgs/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"code_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"