2f:[] 2d:{"title":"Introduction","cells":[{"id":184,"value":"# Introduction","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"## Observable\n\nObservable is a notebook programming environment geared towards developing visualizations. We will use Observable in this course to share examples, tutorials, and assignments. It's a great environment for you to learn how to develop visualizations for the web. Seeing the output of each cell will make it easier for you to debug and iteratively build your visualizations. It will also make it easy for me to help you with your assignments, since you can simply send me a link.\n\nAn Observable notebook is made up of cells. The notebooks in this course will primarily consist of JavaScript cells and Markdown cells. You can change a cell's type using the menu to its left.\n\nIn Observable, the output of a cell appears above its code.","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"1 + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"Giving a cell a name allows us to reference its value elsewhere.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"num = 1 + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"num * 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"If we want a cell to contain multiple statements, then we wrap them in curly braces.","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"newNum = {\n const a = 5;\n const b = 6;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"newNum * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"Here are some examples of HTML and Markdown cells.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"

This is HTML

","pinned":true,"hidden":false,"mode":"html"},{"id":157,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":111,"value":"This **Markdown**","pinned":true,"hidden":false,"mode":"md"},{"id":248,"value":"When Observable first began, all it had was JavaScript cells and you would use [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write Markdown, HTML, and TeX.","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"md`This is also *Markdown*`","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"One distinct feature of Observable notebooks is [reactivity](https://observablehq.com/@observablehq/learning-observable-reactive-dataflow). When an Observable notebook is run, its cells are run in topological order. This means that when the value of a cell changes, all cells that reference it are automatically re-run.","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"b = a * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"a = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"The reactivity is nice for having user interface elements that control visualizations. Here's an example using [views](https://observablehq.com/@observablehq/views?collection=@observablehq/notebook-fundamentals) and [inputs](https://observablehq.com/documentation/inputs/overview).","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"viewof radius = Inputs.range([0, 100], {label: \"Radius\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"radius","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof color = Inputs.color({label: \"Color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}