2e:null 2f:["$","title",null,{"children":"Introduction to Observable | Fabio Miranda | Observable"}] 34:T6c4,35:[] 32:{"id":"b023d0c1afe3235d","slug":"introduction-to-observable","title":"Introduction to Observable","thumbnail":"5b95226ca69ff5812fb49aeaff7205f21c276925a18b4aa57fda326add3dfe66","access_level":"public","create_time":"$D2022-09-21T22:45:05.562Z","update_time":"$D2022-09-22T16:42:39.202Z","view_time":null,"first_public_time":"$D2022-09-22T00:52:38.055Z","has_unpublished_edits":null,"fork":{"id":"b101529514fc7ba6","slug":"introduction-to-observable","title":"Introduction to Observable","owner":{"id":"ad37929384f8c890","login":"jlrulff","name":"João Rulff"}},"stars":2,"starred":false,"owner":{"type":"team","id":"dcd69a45dee5714d","login":"fmiranda","name":"Fabio Miranda","avatar_url":"https://avatars-next.observableusercontent.com/7e8b6de3156e361f3b4a19d0f7c96048eec88648c1992cfd1b3c2ad804904073","tier":"starter_2024"},"version":551,"publish_version":551,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ec14b623de07061","login":"fmiranda","name":"Fabio Miranda","avatar_url":"https://avatars-next.observableusercontent.com/7e8b6de3156e361f3b4a19d0f7c96048eec88648c1992cfd1b3c2ad804904073","tier":null}],"members":[{"type":"individual","id":"3ec14b623de07061","login":"fmiranda","name":"Fabio Miranda","avatar_url":"https://avatars-next.observableusercontent.com/7e8b6de3156e361f3b4a19d0f7c96048eec88648c1992cfd1b3c2ad804904073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"23a5054a6240131d","slug":"intro-to-observable-and-d3","title":"Intro to Observable and D3","owner":{"id":"dcd69a45dee5714d","login":"fmiranda","name":"Fabio Miranda"}},"type":"notebook","body":{"title":"Introduction to Observable","cells":[{"id":19,"value":"# Introduction to Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"Like Jupyter notebooks, Observable are computational notebooks where you can collaboratively explore, analyze, visualize, and communicate with data on the web. It allows for users to write code in JavaScript, HTML, Markdown and Latex","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"This notebook is based on Marco Lage's Observable and D3 [course](https://observablehq.com/collection/@mlage/minicurso-ic-uff) and translated by [Joao Rulff](https://observablehq.com/@jlrulff)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"## Notebooks and Cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"A *notebook* is composed of a set of cells containing code.\n\nTo edit the cells you have to click on the ${greyarrow} on the left side of a cell. To execute the content of the cell, press *Shift+Enter* or *Control+s*. You can click on the ${greypin} on the left side of the cell to keep the code window open at all times.\n\nCells can produce only one value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"1 + 12 // Operations","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"w = 10 // attributions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"{\n const angles = [0, 15, 30, 45, 60, 75, 90];\n const sines = angles.map(x => Math.sin(x * (Math.PI/180)) );\n return sines;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"## Return complex objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"obj = {\n return {x: 10, y: 20};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"## Order does not matter!\nYou can define your variables in each order you want and Observable uses a dependency graph to update the references accordingly. Observable tries to solve a common problem on Jupyter notebooks: **Hidden States**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"data = {\n\n const random_numbers = [];\n \n for(let i = 0; i < nNumbers; i++){\n random_numbers.push(Math.random()*10);\n }\n\n return random_numbers;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"nNumbers = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"squared(4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"## Useful Links","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"## Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"squared = {\n return (a) => { return Math.pow(a,2); }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"greypin = {\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"greyarrow = {\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"