28:null 29:["$","title",null,{"children":"Introdução ao Observable | Marcos Lage | Observable"}] 2e:T6c4,2f:[] 2c:{"id":"5971970df0cc2a22","slug":"introducao-ao-observable","title":"Introdução ao Observable","thumbnail":"42918d71240d43ace61aa5c924627ff1ca032e5b9b6f54e4b7895748254c4ea1","access_level":"public","create_time":"$D2021-08-19T13:38:27.885Z","update_time":"$D2022-09-26T17:17:57.120Z","view_time":null,"first_public_time":"$D2021-10-08T14:23:09.330Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":"starter_2024"},"version":190,"publish_version":190,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c9fd3702a791124","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":null}],"members":[{"type":"individual","id":"9c9fd3702a791124","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"12645be1b152bb7a","slug":"minicurso-ic-uff","title":"Visualizações Interativas Usando Observable e D3","owner":{"id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage"}},"type":"notebook","body":{"title":"Introdução ao Observable","cells":[{"id":0,"value":"# Introdução ao Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$2e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"O Observable, assim como o *Jupyter*, popular entre programadores de *Python*, é um **notebook computacional**. \n\nEle permite a escrita de *notebooks* que combinam códigos em *JavaScript*, *HTML*, *Markdown* e *Latex*, diretamente no *browser*, sendo uma ferramenta poderososa para protipação rápida de soluções em áreas como **Ciência de Dados** e **Visualização**. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Notebooks e células\n\nUm *notebook* é composto por um conjunto de células onde os códigos são escritos.\n\nPara ver ou editar o código por trás de uma célula, você deve clicar no ${greyarrow} que fica do lado esquerdo de uma célula. Para efetivar as modificações realizadas em uma célula, basta precionar *Shift+Enter* ou *Control+s*.\n\nVocê pode clicar no ${greypin} no lado esquerdo da célula para manter a janela de código aberta, mesmo que você não esteja com a seção selecionada.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"Células podem produzir apenas um único valor. Por exemplo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"{\n const angulos = [0, 15, 30, 45, 60, 75, 90];\n const senos = angulos.map(x => Math.sin(x * (Math.PI/180)) );\n return senos;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Você pode atribuir o valor produzido por uma célula a uma váriável para usar em outras células. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"senos = {\n const dado = [];\n for (let angulo = 0; angulo <= parada; angulo += 15) {\n const seno = Math.sin(angulo * (Math.PI/180));\n dado.push(seno);\n }\n\n return dado;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Uma observação importante é que a **ordem** em que as variáveis são declaradas e usadas **não é relevante**! \n\nO Observable mantém um *grafo de dependência* entre as células. Toda vez que uma váriável é modificada, o sistema atualiza as células dependentes automáticamente.\n\nObserve que o código anterior, depende da variável `parada`, declarada abaixo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"parada = 360","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"No restante do curso, sempre que for necessário, outras nuances e recursos do Observable serão apresentados e discutidos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"## Códigos auxiliares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"Como a ordem de declaração das variáveis não é importante, é uma prática comum criar uma seção com trechos de *códigos auxiliares* no fim do notebook.\n\nNeste notebook, os ícones ${greypin} e ${greyarrow}, usados na seção **Notebooks e células**, foram definidos abaixo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"greypin = {\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"greyarrow = {\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"### Próximo Notebook: Breve revisão de HTML, JS, CSS e SVG. \n[Avançar →](https://observablehq.com/@mlage/breve-revisao-de-html-js-css-e-svg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"