2a:null 2b:["$","title",null,{"children":"Introdução de 5 minutos | Roberto Stelling | Observable"}] 30:[] 2e:{"id":"57c107b12f17e9d5","slug":"introducao-de-5-minutos","title":"Introdução de 5 minutos","thumbnail":"18ee088ad240d800c3d2816f06f2cb7e70fe8efc71400c212cbe338e2cc081a4","access_level":"public","create_time":"$D2018-09-20T19:59:47.859Z","update_time":"$D2018-10-11T15:03:15.318Z","view_time":null,"first_public_time":"$D2018-09-20T20:58:33.557Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"aa1870a7aeb4caa2","login":"robstelling","name":"Roberto Stelling","avatar_url":"https://avatars-next.observableusercontent.com/6229413ee5337674416dd44206b49ea53512f6fd7d1275a839bb8250335ed81e","tier":"starter_2024"},"version":477,"publish_version":477,"role":null,"authored":false,"authors":[{"type":"individual","id":"8dbfddb7a124d503","login":"robstelling","name":"Roberto Stelling","avatar_url":"https://avatars-next.observableusercontent.com/6229413ee5337674416dd44206b49ea53512f6fd7d1275a839bb8250335ed81e","tier":null}],"members":[{"type":"individual","id":"8dbfddb7a124d503","login":"robstelling","name":"Roberto Stelling","avatar_url":"https://avatars-next.observableusercontent.com/6229413ee5337674416dd44206b49ea53512f6fd7d1275a839bb8250335ed81e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"347a06e8edc1c464","slug":"introducao","title":"Introdução","owner":{"id":"aa1870a7aeb4caa2","login":"robstelling","name":"Roberto Stelling"}},"type":"notebook","body":{"title":"Introdução de 5 minutos","cells":[{"id":0,"value":"md`# Introdução de 5 minutos\n\nBenvindo ao Observable! Este notebook dá uma rápida, mas técnica, visão geral das funcionalidades do Observable. Para uma introdução mais longa veja [Introdução aos Notebooks](https://beta.observablehq.com/@robstelling/introducao-aos-notebooks) e [introductory tutorial series](https://beta.observablehq.com/collection/introduction). Se você prefere ver que ler, há também um [video de introdução](https://www.youtube.com/watch?v=uEmDwflQ3xE) em inglês!\n\nUm notebook Observable é uma sequência de células. Cada célula é um trecho de Javascript. Você pode ver (e editar!) o código para cada célula ao clicar no sinal de maior na margem esquerda.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"2 * 3 * 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"{\n let soma = 0;\n for (let i = 0; i <= 100; ++i) {\n soma += i;\n }\n return soma;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`Células podem ter nome. Isso permite que uma células seja referenciada por outras células.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"cor = \"vermelho\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"`Minha cor favorita é ${cor}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"md`Uma célula que referencia outra célula é reavaliada automaticamente quando o valor referenciado muda. Experimento editar a definição de *cor\" acima e digite shift-return para reavaliar.\n\nCélulas podem gerar DOM (HTML, SVG, Canvas, WebGL *etc.*). Você pode usar a DOM API padrão como *document*.createElement, ou usar um template literal com a tag interna *html*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"html`\n Minha linguagem favorita é HTML.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"md`Há um literal para Markdown também. (Este notebook foi escrito em Markdown.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`Minha linguagem favorita é *Markdown*.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`O DOM pode se tornar *reativo* simplesmente com referências a outras células. A próxima célula referencia *color*. (Tente editar a definição de *color* acima.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"html`Minha cor favorita é ${cor}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"mapaCores = ({\n vermelho:\"red\", azul:\"blue\", verde:\"green\", cinza:\"gray\", prata:\"silver\",\n branco:\"white\", preto:\"black\", roxo:\"purple\", \"azul metálico\":\"steelblue\",\n \"verde escuro\":\"darkgreen\", ciano:\"cyan\", indigo:\"indigo\", \"azul celeste\":\"skyblue\",\n bege:\"beige\", marrom:\"brown\", magenta:\"magenta\", fúcsia:\"fuchsia\", rosa:\"pink\",\n dourado:\"gold\", marfim:\"ivory\", laranja:\"orange\", salmão:\"salmon\", neve:\"snow\",\n turquesa:\"turquoise\", violeta:\"violet\", amarelo:\"yellow\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"md`De vez em quanto é necessário carregar dados de um servidor remoto, ou fazer alguma computação *cara* em um *web worker*. Para acomodar esta necessidade, as células podem ser definidas de forma assíncrona utilizando [promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"status = new Promise(resolve => {\n setTimeout(() => {\n resolve({resolved: new Date});\n }, 2000);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`A célula que referencia uma célula com *promise* vê o valor quando este é resolvido; esta espera implícita sigifica que as células que fazem referência não *\"se importam\"* se o valor é assíncrono ou não. Edite a célula *status* acima para ver a célula abaixo ser atualizada depois de dois segundos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"status.resolved","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"md`Promises também são úteis para carregar bibliotecas do npm. Abaixo o comando \\`require\\` retorna uma *promise* para a biblioteca d3-fetch:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"d3 = require(\"d3-fetch@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"md`Caso você prefira, é possível utilizar async e await de forma explícita:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"countries = (await d3.tsv(\"https://unpkg.com/world-atlas@1/world/110m.tsv\"))\n .sort((a, b) => b.pop_est - a.pop_est) // Sort by descending estimated population.\n .slice(0, 10) // Take the top ten.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md`Células podem ser definidas como geradores - [*generators*](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators); um valor é produzido até sessenta vezes por segundo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"i = {\n let i = 0;\n while (true) {\n yield ++i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"`O valor atual de i é ${i}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"md`Qualquer célula que referencia uma célula geradora vê o seu valor atual; a célula que faz a referência é reavaliada *sempre* que o gerador produz um novo valor. Como você pode imaginar, um gerador pode produzir promessas para [iteração assíncrona](https://github.com/tc39/proposal-async-iteration); referenciando células que contém o valor resolvido atual.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"date = {\n while (true) {\n yield new Promise(resolve => {\n setTimeout(() => resolve(new Date), 1000);\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"md`Combinando estas primitivas—promises, generators e DOM—você pode construir interfaces de usuário customizadas. Abaixo vemos um *slider* e um gerador que produz o valor do *slider*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"slider = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"sliderValue = Generators.input(slider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"md`Generators.input retorna um gerador que produz *promises*. A promessa é resolvida sempre que o elemento de valor associado gera um evento de entrada—*input*. Você não precisa implementar o gerador manualmente. Há um operador interno, \\`\\`viewof\\`\\`, que expõe o valor atual de um dado elemento de entrada:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"viewof value = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"md`É possível importar células de outros notebooks. Para demonstrar como interfaces de usuário customizadas podem expor valores arbitrários de outras células, vemos abaixo um gráfico de dispersão —*scatterplot*— selecionável, onde vemos a relação inversa de potência e eficiência de combustível em carros.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"import {viewof selection as carros} from \"@mbostock/d3-brushable-scatterplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"viewof carros","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"carros","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"md`Lista de carros selecionados:\n\n${Array.from(new Set(carros.map(c => c.name)))\n .sort()\n .map(c => `* ${c}`)\n .join(\"\\n\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"