31:[] 2f:{"title":"A Minimal Introduction to JavaScript and Observable","cells":[{"id":0,"value":"md`# A Minimal Introduction to JavaScript and Observable\n\nAre you a neophyte looking to get started writing JavaScript in Observable notebooks? Here is the brief primer you've been dying to read.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n## Numbers\n\nJavaScript is into math. It can do numbers.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"42","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`It can do \"scientific\" numbers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"6.022e23 // holy mole-y","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`It can help things that look like numbers find their way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"+\"1.23\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`But, not everyone is allowed in the numbers club.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"+\"Am I a number?\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`(That stands for **N**ot **a** **N**umber, not \"na na na na na na\".)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"isNaN(1 / 'monkey boots')","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`JavaScript can add, subtract, divide, and multiply with the best of them. Oh yes, and square roots and plenty of other [\\`Math\\` helpers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"(1 + Math.sqrt(5)) / 2 // a φ-nominal number","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`JavaScript is fine living with uncertainty.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`\n## Booleans and Logical Operators\n\nJavaScript is very logical.\n\nSome things are \\`true\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"true","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"!false","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"!0","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`Some things are \\`false\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"false","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"!true","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"!1","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`Things can be \\`true\\` OR \\`false\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"true || false","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`However, in no circumstances can something be \\`true\\` AND \\`false\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"true && false","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`Things can be compared.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"2 + 2 === 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"2 + 2 !== \"jello\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`Things can be ordered.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"2 < 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"4 >= 3 + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"\"I\" < \"you\" // whoa","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`And yet, JavaScript is [not always as logical as it seems](https://www.destroyallsoftware.com/talks/wat).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"1 == \"1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"\"1\" + 1 == 11","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`The moral of the story: avoid \\`==\\` and \\`!=\\` unless [you know what you're doing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness).\n\nInstead, use \\`===\\` and \\`!==\\` to ensure strict comparisons without type coercion.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"\"1\" + 1 === 11","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`\n## Strings\n\nJavaScript loves words. Well, it would, if it knew what words were. Instead, it makes do by loving character strings.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"\"I am a string.\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`It is not picky about quotations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"'I am also a string.'","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`Unless you try and pull a fast one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"\"I am conflicted.'","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`Strings have length.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"\"0123456789\".length","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`Strings can be concatenated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"'better' + ' together'","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`Strings can also be created using [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). That \\${...} magic evaluates JavaScript code and writes the result into the string.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"`A backtick-quoted (\\`) string with ${'javascript'.toUpperCase() + ' code'} inside it.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`Strings include [helpful methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"\"STOP SHOUTING!\".toLowerCase()","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"' white space surrounds me '.trim() + '?'","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`Strings can be \\`slice\\`'d and diced.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"\"slice\".slice(2) // slice from the left","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"\"dice\".slice(-3) // now slice from the right","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"\"baby\".slice() // now turn it out","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`Strings can be \\`split\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"\"comma,separated,values\".split(',')","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`The result is an \\`Array\\`, your best friend you haven't met yet. I'll introduce you...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`## Arrays\n\nWhen values accumulate, JavaScript is pleased to put things into lists.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"array = ['a', 'b', 'c']","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"array.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"array[0] // first element","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"array[1] // second element","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"array[2] // third element","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"array[3] // oops","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"array[-1] // oops, I did it again","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`Not to be outdone by strings, [arrays have nifty methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), too.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"array.indexOf('b') // find the first instance, from the left","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"array.slice(1) // slice from the left","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"array.slice(-2) // now slice from the right","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"array.slice(1, -1) // now slice from both sides","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"array.join(' -> ') // turn an array into a string","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"array.concat('d') // combine values into a new array","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"'I put my thing down split it and reverse it'.split('').reverse().join('')","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`\n## Objects\n\nJavaScript is also happy to objectify values into a set of named properties.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"object = ({key: \"value\", anotherKey: \"anotherValue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`_Aside: Observable doesn't let you write object literals \\`{...}\\` at the top level of a cell ...and for good reason! We'll see why later below. Hence the (extra parentheses) here._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`Where did I put my keys?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"object.key","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"object.anotherKey","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`There they are! Let's get them all at once:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"Object.keys(object) // return an array of property key strings","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`And similarly for the object values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"Object.values(object) // return an array of property values","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`Objects can be merged by copying (assigning) properties to a target object. Some properties can get over-written as a result.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"Object.assign({target: 'me', value: 0}, {source: 'thing1', value: 1}, {source: 'thing2'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`Together, arrays and objects can be used to model data. Let's gather some weather statistics for three major U.S. cities, courtesy of [usclimatedata.com](http://usclimatedata.com).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"data = [\n {city: \"Seattle\", annual_hours_sunshine: 2163, annual_precipitation: 37.13},\n {city: \"New York\", annual_hours_sunshine: 2677, annual_precipitation: 46.23},\n {city: \"Chicago\", annual_hours_sunshine: 2504, annual_precipitation: 39.04}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`## Functions\n\nJavaScript is functional. It likes to bundle up operations for reuse.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"function addMe(a, b) { // function signature: name and input arguments\n return a + b; // function body, with return statement for output\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`We can then invoke the function and pass it arguments:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"addMe(2, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"addMe('better', ' together')","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"addMe(1, '1') // wat?","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"addMe('💕', 'U', '😍') // sorry heart-eyes, extra arguments are ignored","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`\nMissing arguments default to \\`undefined\\`, indicating a pure absence of value.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"addMe('1') // something from nothing","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"addMe() // undefined + undefined is not a number","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`Function definitions like \\`addMe\\` above are great if you're not into the whole brevity thing. For the rest of us, the \"arrow\" function was born to free the world of excess key strokes. No \\`function\\` keyword required, and an automatic \\`return\\` value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"addMe2 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"addMe2(2, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`For functions of a single argument, arrow functions can further omit the parentheses. Two more key strokes saved!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"precip = d => d.annual_precipitation","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"precip(data[0]) // emerald city","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"precip(data[1]) // yr city's a sucker","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"md`\nSo what is the difference, really, between a \"function\" function and an \"arrow\" function? Well... a \"function\" function possesses a unique sense of self realized via its \\`this\\` context. An \"arrow\" function, arguably being further along on the road to Enlightenment, has instead abandoned the notion of self entirely and so may only deflect to others when asked of the \\`this\\` context. Should you wish to consult a guide as you seek to decipher \\`this\\` Zen koan, [MDN is your friend](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).\n\n...and if none of that made any sense to you, no worries! Just back away slowly...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"md`## Arrays, Redux\n\nThey're back! I told you arrays were going to be your new best friend, didn't I?\n\nIf you're going to be working with data in JavaScript, functions and arrays go together like a horse and carriage. Or peanut butter and jelly. Or whatever.\n\nIn case you forgot, here's what our data array looks like:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"data // expand the inspector above to see the values","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`What percentage of the year is sunny in each city?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"hoursPerYear = 365 * 24 // yes yes, but let's ignore leap years for now","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"data.map(d => d.annual_hours_sunshine / hoursPerYear) // d is for datum","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`The \\`map\\` function above applies the function to each element in the array and returns the results as a new array. _(Seattle's reputation for clouds is well-earned, but it still gets plenty of sunshine. Shhh! Don't tell anyone.)_\n\nAlso, do you see what we just pulled off there? Functions act likes verbs _and_ nouns: we can pass a function as an argument to another function like a normal value (very noun-ish) but then invoke it (very verb-y).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`Which cities get less than 40 inches of precipitation a year? (Snow counts!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"data.filter(d => d.annual_precipitation < 40).map(d => d.city)","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"md`\n_Sorry, New York!_\n\nThe \\`filter\\` function evaluates a function for each element in the array, and removes an element when the return value is not [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). _Nota bene: [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) is not just a cutesy term, it is a technical term. I would not speak [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) with you._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`# Observable Notebooks\n\nNow that you're hip to the JavaScript, let's turn our attention to the sea we've been swimming in. If you've made it this far, you probably already have a decent idea: Observable notebooks are a collection of \"cells\" that contain JavaScript code.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`## Cells\n\nCells can simply contain values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"'hello cell'","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`Cells can include a name, so that other cells can refer to them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"retort = 'hello yourself'","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`## Text Formatting and Tagged Templates\n\nObservable supports formatted text and other output formats through an obscure branch of magic known as [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates).\n\nCells can use the syntax ${'md\\\\`...\\\\`'} to indicate [Markdown](https://en.wikipedia.org/wiki/Markdown) formatted text.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"md`Markdown includes _italicized_, **bold**, and \\`monospace\\` text, as well as [hyperlinks](https://www.youtube.com/watch?v=xfr64zoBTAQ).\n\n- Oh, and of course lists.\n- We musn't ever forget,\n- the lists.\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`If you're into equations, [LaTeX](https://en.wikipedia.org/wiki/LaTeX) (via ${'tex\\\\`...\\\\`'}) is here, too!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"tex`i\\hbar \\frac{\\partial \\Psi}{\\partial t} = -\\frac{\\hbar^2}{2m}\n\\frac{\\partial^2 \\Psi}{\\partial x^2} + V \\Psi` // how's your cat?","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`## Reactive Cells\n\nA particularly lovely feature of Observable is that cells are _reactive_: if a cell value changes, all cells that reference it automatically update.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"`You said \"${retort}\"`","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`Scroll back and edit the content of the \\`retort\\` cell, and see what happens!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"md`Cell values can be dynamic. Here we can use a tagged template to generate HTML output, in the form of a slider. Observable's special \\`viewof\\` operator then exposes the \\`value\\` property of the slider as the value of the cell. (Though in general, I recommend using [Observable Inputs](https://observablehq.com/@observablehq/inputs) to generate interactive widgets.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"viewof slider = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"md`We can now author dynamic content that reactively responds to the slider value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"tex`f(x) = x^2 \\rightarrow f(${slider}) = ${slider}^2 = ${slider * slider}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"md`## Code Blocks\n\nOf course, you may want to do some work that involves writing more than one code expression per cell. To do so, you can create code blocks within curly braces \\`{...}\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"result = {\n const myConstant = '_How do I love thee?_ Let me count the ways: ';\n let myVariable = [];\n \n // you didn't think you'd make it to the end without a for loop, did you?\n for (let i = 0; i < 3; ++i) {\n // push adds an element to an array, updating it in place\n myVariable.push(`**${i + 1}...**`); \n }\n \n // you can use tagged templates anywhere!\n return md`${myConstant + myVariable.join(' ')}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":798,"value":"md`_Aside: this is why object literals need to be wrapped in parentheses at the top-level of a cell. Otherwise Observable thinks you are trying to write a code block!_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`## Imports\n\nLast but not least, Observable notebooks can import external libraries hosted by [npm (Node package manager)](https://npmjs.com), the _de facto_ public repository for shared JavaScript libraries. Or, you can even import specific cells from other published notebooks!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`### require\n\nFor example, the [d3-array](https://github.com/d3/d3-array) package provides even moar methods for working with arrays. We can import it using \\`require('d3-array')\\` to load the most recent version that has been published to npm.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"d3 = require('d3-array')","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"d3.mean(data, d => d.annual_precipitation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"d3.min(data, d => d.annual_precipitation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"d3.max(data, d => d.annual_precipitation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`### import\nTo import one or more cells from another notebook, use this syntax:\n\n~~~ js\nimport {cellName1, cellName2, ...} from '@user/notebook-name'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"md`Here, we've imported the \\`printTable\\` function defined in [uwdata's \"data-utilities\"](https://observablehq.com/@uwdata/data-utilities) notebook. This function takes an array of objects as input and generates an HTML-formatted table of the content:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"printTable(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"md`# Summary\n\nHopefully this has taught you just enough to be dangerous. Once you're ready to dig deeper, browse on over to [Observable: The User Manual](https://observablehq.com/@observablehq/observable-user-manual). Happy hacking!\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}