31:T6e0,## JavaScript ⚡⚡ **Observable’s not JavaScript** At first glance, Observable appears to be vanilla JavaScript. This is intentional: by building on the native language of the web, Observable is more familiar and you can use the libraries you know and love, such as D3, Three, and TensorFlow. Yet for [dataflow](/@observablehq/how-observable-runs), Observable needed to change JavaScript in a few ways. Here’s a quick overview of what’s different. (We’ve also shared our [grammar](/@observablehq/observable-grammar) and [parser](https://github.com/observablehq/parser).) **Cells are separate scripts.** Each cell in a notebook is a separate script that runs independently. A syntax error in one cell won’t prevent other cells from running. **Cells run in topological order.** In vanilla JavaScript, code runs from top to bottom. Not so here; Observable runs [like a spreadsheet](/@observablehq/how-observable-runs), so you can define your cells in whatever order makes sense. **Named cells are declarations, not assignments.** Named cells look like, and function *almost* like, assignment expressions in vanilla JavaScript. But cells can be defined in any order, so think of them as hoisted function declarations. **Statements need curly braces, and return (or yield).** A cell body can be a simple expression, such as a number or string literal, or a function call. But sometimes you want statements, such as for loops. For that you’ll need curly braces, and a return statement to give the cell a value. Think of a cell as a function, except the function has no arguments. For more informtion, see [https://observablehq.com/@observablehq/observables-not-javascript](https://observablehq.com/@observablehq/observables-not-javascript)32:T8c7,md`--- ## Resources ### Datasets, Images & Notebooks - 'Phases of the Moon' by Mike Bostock: [https://observablehq.com/@mbostock/phases-of-the-moon](https://observablehq.com/@mbostock/phases-of-the-moon) - 'Bar Chart' by D3: [https://observablehq.com/@d3/bar-chart](https://observablehq.com/@d3/bar-chart) - Kinosaurier image, Natur Historisches Muesem Wien: [https://www.nhm-wien.ac.at/kinosaurier](https://www.nhm-wien.ac.at/kinosaurier) - Iris dataset, Kaggle: [https://www.kaggle.com/datasets/uciml/iris](https://www.kaggle.com/datasets/uciml/iris) - Pokemon dataset, Kaggle: [https://www.kaggle.com/rounakbanik/pokemon](https://www.kaggle.com/rounakbanik/pokemon) - Budget dataset by San Francisco Controller's Office: [https://data.sfgov.org/City-Management-and-Ethics/Budget/xdgd-c79v](https://data.sfgov.org/City-Management-and-Ethics/Budget/xdgd-c79v) - Weather dataset by Vega: [https://github.com/vega/vega-datasets/blob/master/data/weather.csv](https://github.com/vega/vega-datasets/blob/master/data/weather.csv) ### Documentations & Tutorials - YouTube playlist 'Learning Observable': [https://www.youtube.com/playlist?list=PLOHIJAFwtkEfEsafMd9BY3KWsRrz7FV5e](https://www.youtube.com/playlist?list=PLOHIJAFwtkEfEsafMd9BY3KWsRrz7FV5e) - Introdution Observable collection: [https://observablehq.com/collection/@observablehq/introduction](https://observablehq.com/collection/@observablehq/introduction) - Observable: The User Manual: [https://observablehq.com/@observablehq/user-manual](https://observablehq.com/@observablehq/user-manual) - Observable for Jupyter Users: [https://observablehq.com/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users](https://observablehq.com/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users) - Observable's not JavaScript: [https://observablehq.com/@observablehq/observables-not-javascript](https://observablehq.com/@observablehq/observables-not-javascript) - Observable Inputs: [https://observablehq.com/@observablehq/inputs](https://observablehq.com/@observablehq/inputs) - Observable Inputs Demo: [https://observablehq.com/@observablehq/hello-inputs](https://observablehq.com/@observablehq/hello-inputs) `33:[{"id":"9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","href":"https://static.observableusercontent.com/files/9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","name":"iris.csv","type":"text/csv","lastModified":1647524727745.619,"size":5107},{"id":"5ec15d18b0d73d26ce1a9a450128aaba97d50bca688a7f121e594f95ad350e021b1ed61c305c473ef2907945c4fa4c6a2b487c3ae78c1cb50e7da80774d3ea54","href":"https://static.observableusercontent.com/files/5ec15d18b0d73d26ce1a9a450128aaba97d50bca688a7f121e594f95ad350e021b1ed61c305c473ef2907945c4fa4c6a2b487c3ae78c1cb50e7da80774d3ea54","name":"iris.json","type":"application/json","lastModified":1647524814149.078,"size":23353},{"id":"39dd3796f50017e56d039d8fff04d3ffdf51b377ed9fcf7448dffdbca8d5f9b8afdf4555d7de32c71d3f2503200c007ddf774316a59368c94a0e528f6e8d8bb2","href":"https://static.observableusercontent.com/files/39dd3796f50017e56d039d8fff04d3ffdf51b377ed9fcf7448dffdbca8d5f9b8afdf4555d7de32c71d3f2503200c007ddf774316a59368c94a0e528f6e8d8bb2","name":"pokemon.csv","type":"text/csv","lastModified":1647524819109.645,"size":160616},{"id":"19f7491c4ac3b11dbd4354224273c681ee97825f54fdb4ab43acd47518ba058316e9d74d862129f752b63c85616603b6722507bd390aac1cf6016db85f40427a","href":"https://static.observableusercontent.com/files/19f7491c4ac3b11dbd4354224273c681ee97825f54fdb4ab43acd47518ba058316e9d74d862129f752b63c85616603b6722507bd390aac1cf6016db85f40427a","name":"T-Rex_NHM_Vienna.jpeg","type":"image/jpeg","lastModified":1647524944249.543,"size":323855}] 2f:{"title":"InfoVis 2022 Tutorial - Part 1","cells":[{"id":0,"value":"md`# InfoVis 2022 Tutorial - Part 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"contents = toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"c2 = operation(88, 11, subtract)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"a = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"b = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"arr = [\"tom turbo\", \"fritz phantom\", \"anna\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"myObj = ({name: 'Patrick', age: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"function add(a,b) {\n return a+b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"add(1, 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"function subtract(a, b) {\n return a - b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"function operation(a,b,op) {\n return op(a,b)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"c1 = operation(a, b, subtract)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"hello = new Promise((resolve) => setTimeout(() => resolve(\"Hi\"), 2000))","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`If I want to run explicit code (code block), then I have to wrap it in curly braces and explicitly return the value`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"{\n let a = 5;\n let string = \"\";\n for (let i = 0; i < a; i++) {\n string += \"a\";\n }\n return string;\n}\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`Use 'require' to for external JavaScript modules from npm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`---\n## Reactive HTML and Markdown\nObservable has different tag md (Markdown) and html and usese **template literals** that start and end with **backticks** (\\`)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`

HTML

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"html`

My favorite color is ${color}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"color = \"purple\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`My result for c1: ${c1}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`---\n## Inputs & Interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"html`

Hello ${yourName}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"myName = \"Klaus\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`Input elements are muted, the value changes, but the cell value has not chaged\n -> No update of any cell.\n\nWith the **viewof** operater the input element will update when the values has changed.\nBehind the scene, Observable splits the input element in 2 parts:\n- Interactive DOM element \n- Value of an element (can be accessed with .value)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"viewof yourName = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof yourColor = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`There are also predefined input elements, you can find them in the menu bar on the right side, the 'Open snippet pane'\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof myColor = Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof radios = Inputs.radio([\"A\", \"B\"], {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`My selection is: ${radios}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`---\n## Inputs and Remixing Cells`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`Import the 'chart' cell as 'chartMoon' from the phases-of-the-moon Observable notebook by Mike Bostock.\n\nImports are made by:\n\nimport { cell } from \"@user/notebook-name\"\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"import { chart as chartMoon, viewof year } from \"@mbostock/phases-of-the-moon\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"moonYear = viewof year","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"moons = chartMoon","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`Import a char from the bar-chart notebook by D3 and replace the original data with my data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"import { chart } with { myData as alphabet } from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"myData = [\n { letter: \"Thumb\", frequency: 0.6 },\n { letter: \"Index\", frequency: 0.85 },\n { letter: \"Middle\", frequency: 1 },\n { letter: \"Ring\", frequency: 0.9 },\n { letter: \"Pinky\", frequency: 0.75 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`---\n## Import / Load Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`### User-defined Datasets\nfor small datasets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"movie = [\n { title: \"Deadpool\", year: 2016 },\n { title: \"Jurassic Park\", year: 1993 },\n { title: \"Star Wars\", year: 1977 },\n { title: \"The Godfather\", year: 1972 },\n { title: \"Snow White and the Seven Dwarfs\", year: 1927 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`### File Attachments\nfor Small to medium/big datastes\nUpload you data as a 'File Attachmetn' to the notebook, use the 'Open data pane' button in the menu on the right side.\n\nYou can write the 'FileAttachment' command on your own or you use the 3 dot menu and the 'Insert into notebook' command next to each file to let Observable do that automatically.\n\n**Note:** You can upload different files, not only dataset but also images.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"dataIris = FileAttachment(\"iris.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"dataPokemon = FileAttachment(\"pokemon.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"jsonIris = FileAttachment(\"iris.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"FileAttachment(\"T-Rex_NHM_Vienna.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`©️ [Natur Historisches Musem Wien | Kinosaurier](https://www.nhm-wien.ac.at/kinosaurier), 17.03.2022`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`### Datasets from other Observable Notebooks\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"import { alphabet } from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"alphabet","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`### API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`API\nuse API endpoints to load a dataset.\n\nAs security measures you can also defined API keys in the 'Settings' menu of your account and defined key names.\nThose API keys can be accessed with the 'Security{\"API-KEY-NAME\"}'.\n\n**Note:** API key names can only be used by private notebooks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"url = \"https://data.sfgov.org/resource/xdgd-c79v.json\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"response = fetch(url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`Definition of the reponse of to a data fetch can be tricky, because once you call response.json() the response is consumned and can not be executed again.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"// Bad to use .json() on a fetch respose can only be executed once.\n// response.json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`If you use the fetch() and the json() funtions in combination call the json() function explicitly on the fetch() function.\n\n**Note:** Using the json() funtion on the fetch() function means you have to wait for the reposnse of the fetch() function, therefore use await`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"jsonData = (await fetch(url)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`A better way is to use the d3 functions to call fetch the data, e.g. csv(), json()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"jsonDataD3 = d3.json(url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`### GitHub`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"weatherData = d3.csv(\n \"https://raw.githubusercontent.com/vega/vega-datasets/master/data/weather.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`## Sharing, Publishing & Embeddings\n\n### Private / Published\nDiffernt states of a notebook:\n- Private: \n - Per default new notebook are private and only available to you.\n - You will have know access to them without being logged in.\n- Unlisted - Access with the link: \n - Click on the 3 dot menu at the top and select 'Publish' a popup will open where you can select 'Unlisted'\n - Edit another person make will be create a lokal fork with their changes\n - Comments can be made and are always visible, you will also get a notification via e-mail\n- Publish: Top button and has now a nice URL, based on title Publish -> \n - Click on the 3 dot menu at the top and select 'Publish' a popup will open where you can select 'Publish'\n - Title is pulled from the level 1 header of the first cell\n - Changes after publish are private, and invisible to others -> until republish\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`### Share\nShareing notebook allows you to invite other memebers of Observable to work with you on the notebook. \n\nAgain use the 3 dot menu at the top and select the 'Share' option, there you can add users to the notebook that can either view or edit it.\n\nSharing works for private and published notebooks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`### Embeddings\nYou can embed notebook cells as HTML in other website, e.g. Codepen, GitHub pages.\n\nThe notebook has to be published to embed cells and the cell has to have a name.\n\nClicking on the 3 dots menu for a cell and clicking on 'Embed' will open a popup where you can select which cells you want to embed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`### Further Possibilites\n- Download the whole notebook as an zip archive, see [https://observablehq.com/@observablehq/downloading-and-embedding-notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)\n- Embed notebook in a React App, see [https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app](https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`### Helper Functions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`Creates the [table of contents (ToC)](https://observablehq.com/@nebrius/indented-toc)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}