31:T41a,weather = [ { "month": "January", "temp": 56.55, "precip": 0.06, "wind": 5.32 }, { "month": "February", "temp": 56.1, "precip": 0.12, "wind": 5.46 }, { "month": "March", "temp": 56.36, "precip": 0.11, "wind": 6.52 }, { "month": "April", "temp": 58.28, "precip": 0.07, "wind": 8.4 }, { "month": "May", "temp": 59.71, "precip": 0, "wind": 7.29 }, { "month": "June", "temp": 63.51, "precip": 0, "wind": 7.37 }, { "month": "July", "temp": 65.55, "precip": 0, "wind": 5.67 }, { "month": "August", "temp": 66.73, "precip": 0, "wind": 5.91 }, { "month": "September", "temp": 65.68, "precip": 0, "wind": 5.67 }, { "month": "October", "temp": 61.93, "precip": 0, "wind": 5.24 }, { "month": "November", "temp": 55.03, "precip": 0.07, "wind": 5.38 }, { "month": "December", "temp": 54.7, "precip": 0.03, "wind": 4.63 } ] 32:[] 2f:{"title":"Observable Demo","cells":[{"id":0,"value":"# Observable Demo ","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"👋 Welcome to our whirlwind tour of JavaScript and Observable Notebooks. This will be our main programming environment for the rest of this class.\n\nThis notebook is only \"lecture notes\" and is rather rough. You will likely want to supplement this notebook with the following resources:\n\n- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction)\n- [Observable notebooks documentation](https://observablehq.com/documentation/notebooks/) (uses Plot for graphics, which we won't be using)","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"## JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"### Values","pinned":false,"hidden":false,"mode":"md"},{"id":484,"value":"// numbers\n10","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"10 + 4.3","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"'This is a string'","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"\"This is also a string\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"`The answer to life is ${45}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"random = Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"`This is a random number: ${random}. It is ${random > 0.5 ? \"greater than \" : \"less than \"} 0.5`","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"true","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"!false","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"!1","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"!0","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"### Arrays","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"arr = ['red', 'white', 'green']","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"// arr.push('blue') // MUTATES THE ARRAY. BAD BAD BAD \narr.with(2, 'blue')","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"arr[3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"arr.at(-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"arr.slice(2, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"[[1, 2], [3, 4], [5, 6]].flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"arr.indexOf('blue')","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"arr.indexOf('goldenrod')","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"arr.slice(2, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"### Objects","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"// basic syntax\ncourse = ({\n department: 'CSC',\n number: 477,\n name: 'Scientific and Information Visualization'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"course.department","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"course['department']","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"// Object.keys() and Object.values()\nObject.keys(course)","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"Object.values(course)","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"// spread syntax\n/*\n{\n department: 'CSC',\n number: 477,\n name: 'Scientific and Information Visualization',\n roomNumber: '14-232b'\n}\n*/\nObject.assign(course, { number: 4077, roomNumber: '14-232b' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"// spread syntax\n({ ...course, roomNumber: '14-232a', number: 3302 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"// function syntax\nfunction addTwo(a, b) {\n return a + b\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"// arrow syntax\naddTwoAlt = (a, b) => a + b;","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"max = (a, b) => a > b ? a : b;","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"to_string = n => n.toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"addTwo(2, addTwoAlt(2, 5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"// functions are values; first-class functions\nweather.find(obj => obj.month === 'March').temp","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"weather\n .filter(obj => obj.precip > 0)\n .map(obj => obj.month)","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"[1, 2, 3, 4].reduce((accumulator, current) => accumulator > current ? accumulator : current)","pinned":true,"hidden":false,"mode":"ojs"},{"id":762,"value":"weather.every(obj => obj.precip > 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"{\n const result = []\n for (const obj of weather) {\n if (obj.precip > 0) {\n result.push(obj.month)\n }\n }\n return result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"### Promises/async functions","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"// won't deal with them too much directly, but worth knowing what they are","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"## Observable notebooks","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"### Cells, named cells","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"\"CSC 477\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"ten = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"ten + 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"### Code blocks","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"Here is a code block that (for illustrative purposes) uses several steps to arrive at a value.","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"codeBlockValue = {\n let s = ''; // variable can be re-assigned\n for (let i = 0; i < 10; i++) {\n s = s + ', ' + i;\n }\n\n return s.trim().replace(',', '');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"### Observable's secret sauce: reactivity","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"a = b + 10 // This cell references \"b\", which is defined in the next cell and changes every 3 seconds","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"b = {\n let val = 0; // \"val\" is LOCAL to this code block, and cannot be accessed in other cells.\n while (true) {\n // \"yield\" is like \"return\", except instead of giving up control after returning the value,\n // this cell will \"return\" the value val++ and then come back to this line.\n yield Promises.delay(3000, val++); // Wait 3 seconds, then increment val and yield the value.\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"#### This lets us get some basic interactivity quite easily","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"See the two cells below for an example.\n\nThe code below makes use of an [`Input`](https://observablehq.com/documentation/inputs/overview) from Observable's standard library.\nWe also use the `viewof` operator: it lets define a user input and reference its current value if it were a **named constant**.","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"viewof fontSize = Inputs.range([0.1, 2], { step: 0.1, value: 1, label: 'Font size' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"fontSize * 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"

\n Try dragging the slider back and forth! Then expand this cell and think about what's happening here.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":134,"value":"## Markdown and other markup\nPlease refer to [GitHub's Markdown Cheatsheet](https://github.github.com/gfm/) for more information about Markdown syntax.\n\nHere is the gist:\n\n| **Markup** | Syntax |\n| --------- | ------ |\n| **bold** | \\*\\*bold\\*\\* or \\_\\_bold\\_\\_ (two underscores) |\n| _italic_ | \\_italic\\_ or \\*italic\\* |\n| `monospace` (for code) | \\`monospace\\` (backtick) |\n\nYou can also have headings h1–h6 using the `#` sign for a top level heading, two `##` for a second-level heading, and so on.\n\n# Heading 1\n## Heading 2 \n### You get the idea\n","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"You can reference the values of JavaScript cells in markdown text by enclosing them in `$\\{...}`\n\nYou can evaluate _any JavaScript expression_ inside the `$\\{...}`. See the example below.","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"For example, 2 + 3 is ${2 + 3}","pinned":true,"hidden":false,"mode":"md"},{"id":392,"value":"randomNum = {\n return Math.floor(Math.random() * (10));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"Because markdown can also handle any valid HTML, we have quite a bit of power in how we mark up content.\n\n

\n \nThe generated random number is ${randomNum}. It is ${randomNum % 2 === 0 ? 'even' : 'odd'}.\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"### We've seen JavaScript in Markdown, but what about Markdown in JavaScript?","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"Observable provides _tagged templates_ that let you programmatically produce HTML or Markdown content in JavaScript cells. Useful for generating content based on data.","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"// 👈🏽 Note that this is a JavaScript cell\nhtml`This is HTML text using Observable's facilities for Tagged templates.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"// Similarly for markdown\nmd`**This is Markdown content using Observable's facilities for [_Tagged templates_](https://observablehq.com/@observablehq/htl).**`","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"You can import whatever libraries you need for your project, just like you would in a \"normal\" web development project.\n\nLibraries from `npm` can be imported using the `require` function.\n\nFor example, we could load the `d3-array` package using the following command:\n\n```js\nd3 = require('d3-array')\n```\n\nThe above command would load the `d3-array` package from the NPM package registry.","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"You can also import individual **named cells** from other notebooks:\n\n```js\nimport { cell1, cell2 } from '@username/notebook';\n```\n\nFor example, I have imported some utilities from my own notebook below.","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"import { flag } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"$${flag()} ${flag('pause')} ${flag('note')} ${flag('alert')} ${flag('custom', 'white', 'plum')}","pinned":true,"hidden":false,"mode":"md"},{"id":544,"value":"## D3 can help with many things, even if we won't use it for visualization just yet","pinned":false,"hidden":false,"mode":"md"},{"id":569,"value":"// d3.range","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"weather","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"anscombe","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"// d3.mean, d3.sum, d3.deviation","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"// d3.extent","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"// d3.median, d3.quantile","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"---\n\nThat said, by default, [Observable notebooks come with most of the libraries you will need for this course](https://observablehq.com/documentation/misc/standard-library#recommended-libraries), including:\n\n- [Arquero](https://idl.uw.edu/arquero/) for data wrangling, accessed through `aq`\n- [lodash](https://lodash.com/) for array functions that don't come with native JavaScript, accessed through `_`\n- [Vega-lite](https://vega.github.io/vega-lite/) for data visualization, accessed through `vl`\n- [d3](https://d3js.org), which includes facilities for custom data visualizations as well helpers for many data operations, accessed through `d3`\n- [and a bunch of others that you may be interested in](https://observablehq.com/documentation/misc/standard-library#recommended-libraries)","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"anscombe = (await require('vega-datasets@3.1.0'))['anscombe.json']()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}