2d:null 2e:["$","title",null,{"children":"Conhecendo o Observable | Adolfo Guimarães | Observable"}] 33:T57c,Vamos fechar o ciclo sobre anexar arquivos: **Para anexar um arquivo no notebook, use o ícone:** no lado superior direito do notebook (então clique no sinal de mais perto de **File attachments**). Para os dados das olimpíadas, nós anexamos o arquivo anteriormente (crédito dos dados para [Matt Riggott](https://www.flother.is/blog/olympic-games-data/)).34:T4b0,Isso foi apenas uma amostra do Observable. Veja outros links (em inglês): - [Inserindo células](https://observablehq.com/@observablehq/adding-cells): Mais sobre o menu de inserir célula. - Importando de [arquivos `.xlsx](https://observablehq.com/@observablehq/xlsx) - [Carregando dados de uma URL ou buscando em uma base de dados](/@observablehq/introduction-to-data) - Usando [templates](https://observablehq.com/templates) - [Importando](https://observablehq.com/@observablehq/introduction-to-imports?collection=@observablehq/notebook-fundamentals) funcionalidade de outros notebooks - [Incorporando](https://observablehq.com/@observablehq/introduction-to-embedding) resultados em uma página Web. - Usando [promises](https://observablehq.com/@observablehq/introduction-to-promises?collection=@observablehq/javascript-in-observable) and *await* para lidar com valores assíncronos. - Usando [generators](https://observablehq.com/@observablehq/introduction-to-generators?collection=@observablehq/javascript-in-observable) combinado com [promises](https://observablehq.com/@observablehq/introduction-to-promises?collection=@observablehq/javascript-in-observable) para visualizações interativas. 35:T47b,Qualquer dúvida 🤔, abra o painel de ajuda na margem do lado direita, onde você irá encontrar guias rápidos. Veja também as páginas de [Documentação](https://observablehq.com/@observablehq/documentation), e o guia **Aprenda mais** a seguir. Explore, aprenda e divirta-se! 👋36:T463,Diferentes pessoas aprendem de diferentes maneiras, então, além do painel de ajuda veja nossos vídeos e tutoriais (em inglês): - [Vídeos](https://observablehq.com/collection/@observablehq/learning-observable) - [Tutoriais](https://observablehq.com/tutorials)37:[{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1665084053927.916,"size":841836},{"id":"d1c13576bbeaeecfbb8446b341b3caa16a9d6985ded7714ffb6f235267083ff80bc9a48b10d510cacde4fec46df310859b3a23220a36d4d796a9b924313d8524","href":"https://static.observableusercontent.com/files/d1c13576bbeaeecfbb8446b341b3caa16a9d6985ded7714ffb6f235267083ff80bc9a48b10d510cacde4fec46df310859b3a23220a36d4d796a9b924313d8524","name":"scatterplotFromAddCellMenu.png","type":"image/png","lastModified":1665084053927.916,"size":33439},{"id":"d491674ec5a71d9db82da17da8171aa9c11023b21fc6635fa5ee0b9d8cd7aec1722122655346d6611bc7576eac35367490f67fb54459dae60949c1eea22aec3b","href":"https://static.observableusercontent.com/files/d491674ec5a71d9db82da17da8171aa9c11023b21fc6635fa5ee0b9d8cd7aec1722122655346d6611bc7576eac35367490f67fb54459dae60949c1eea22aec3b","name":"tableFromAddCellMenu.png","type":"image/png","lastModified":1665084053927.916,"size":45933}] 31:{"id":"eff09e074d5c011e","slug":"conhecendo-o-observable","title":"Conhecendo o Observable","thumbnail":"a8d2069b2df2398a470dd4ea1d986de620e8fd79daba78fdae6081ff3ac7a760","access_level":"public","create_time":"$D2022-10-06T19:20:53.927Z","update_time":"$D2022-10-07T03:25:48.646Z","view_time":null,"first_public_time":"$D2022-10-07T03:26:22.718Z","has_unpublished_edits":null,"fork":{"id":"4e36c4335cde0fd3","slug":"a-taste-of-observable","title":"A taste of Observable","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":2,"starred":false,"owner":{"type":"team","id":"0fed76bc24ee2abb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":"starter_2024"},"version":1297,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f25e789ad38b28fb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":null}],"members":[{"type":"individual","id":"f25e789ad38b28fb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6f9360e86a9e11df","slug":"tutorial-observablehq","title":"Tutorial ObservableHQ","owner":{"id":"0fed76bc24ee2abb","login":"adolfoguimaraes","name":"Adolfo Guimarães"}},"type":"notebook","body":{"title":"Conhecendo o Observable","cells":[{"id":0,"value":"# Conhecendo o Observable \n\nEsse material é uma tradução em português baseada no material oficial do Observable denominado `A Taste of Observable` que está disponível no link: https://observablehq.com/@observablehq/a-taste-of-observable. A tradução foi feita por [@adolfoguimaraes](https;//observablehq.com/@adolfoguimaraes). Os texto foram escritos baseando-se nos textos originais e mantendo a organização do notebook original.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":853,"value":"Seja bem-vindo ao Observable! 👋 Neste notebook vamos mostrar o básico sobre o Observable, cobrindo alguns conceitos chaves que permitam você a começar a trabalhar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":854,"value":"**O que você está lendo agora - esta página ou documento - é um `notebook Observable`.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"Um notebook é tanto um produto final para apresenção, quanto uma grande tela branca para experimentar idéias e cálculos. Como começar? Criando as células (**cells**). Células são onde você coloca seu conteúdo textual, o código Java Script ou outras instruções. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"um_exemplo_de_uma_celula_JavaScript_calculando_um_valor = 22/7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"**Notebooks são feitos de células.** Veja outro exemplo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":858,"value":"\"Olá, eu sou uma célula *Markdown*; eu possuo **texto** *formatado*. Minha área de edição (a parte sombreada) está aberta (*pinned*) para que você possa ver o texto. ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":859,"value":"**O código ou conteúdo de uma célula está na parte sombread; os resultados são mostrados imediatamente acima desta área.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":860,"value":"Cada célula em um notebook Observable é editável. Para mostrar a parte sombreada, clique na margem à esquerda da célula. **Tente isto** nesta célula. Tente também na célula com o valor aproximado de *pi*, criada anteriormente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":861,"value":"Células, dada a facilidade em criar, visualizar e modificar, são fundamentais para fazer do Observable um ambiente para experimentar ideias.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":862,"value":"#### Vamos praticar 👊\n1. Coloque o mouse sob a margem esquerda até você visualizar um sinal de mais (+), então **clique no sinal de mais (+) para criar uma nova célula**. Ao clicar, vai aparecer o menu para escolher o tipo de célula que vai ser criada. Observe que as primeiras três opções são JavaScript, **Markdown** (vamos escolher essa opção agora), e HTML. \n2. **Use o mouse, ou as teclas do direcional, para escolher o tipo de célula que deseja criar** (escolha **Markdown** para este exemplo), então digite algum texto de exemplo.\n3. **Clique no triângulo azul (ou Shift-Return) para finalizar e executar a célula** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":863,"value":"Parabéns! 👏👏👏 Você criou sua primeira célula Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"Quando você criou a célula, foi mostrado os tipos mais comuns de células, são eles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"- A célula JavaScript (a padrão), para lógica, cálculos, e chamadas das bibliotecas de JavaScript. \n- A célula [Markdown](https://observablehq.com/@observablehq/markdown-quick-reference) para texto.\n- A célula HTML, para HTML 😉","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"(**Para mover a célula**, mova o mouse até o símbolo de três pontinhos verticais à esquerda, então clique na célula e arraste até onde deseja coloca-la.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1210,"value":"Você deve ter visto outras opções no menu de [criar células](https://observablehq.com/@observablehq/adding-cells). Muitas dessas opções são para criar exemplo de gráficos, botões, ou outros elementos visuais, utilizando JavaScript. \n\nVamos trabalhar agora com algumas células em JavaScript. Let's do some work with JavaScript cells now. (Não importa se você é um iniciante em JavaScript; vou irá entender os porquês em algum momento.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":867,"value":"Aqui está uma célula JavaScript que mostra os dados em uma tabela. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"Como você pode criar essa tabela sozinho? Depois de anexar o arquivo (vamos falar disso mais adiante), basta selecionar a entrada **table** (tabela) no menu *inserir célula* visto anteriormente. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1205,"value":"#### Vamos praticar 👊\n1. Crie uma nova célula JavaScript clicando no sinal de mais (+).\n2. Digite \"table\". Você vai ver várias opções.\n3. Role para baixo (pule a opção *Data table*) e clique em **Table** baixo do cabeçalho **Inputs** Scroll down (skip over Data Table) and click **Table** under the heading of **Inputs** para colar no código de *Input Table*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":871,"value":"

\n \n

Escolha a opção Table no menu que aparece abaixo do cabeçalho Inputs.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"Verifique se clicou no triângulo azul, ou apertou Shift-Enter, para ver os resultados.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"Você deve ter notado que o código inserido não é exatamente o mesmo do exemplo anterior; o exemplo mosta um caso mais simples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":874,"value":"O fato é que quanto mais você aprende JavaScript melhor; não vamos falar o contrário. Mas, como foi dito anteriormente, o Observable é um ótimo espaço para experimentar, selecionar opções no menu de inserir célulare ver como os componentes funcionam. Ou, voucê pode procurar por células em notebooks de outros usuários para ver as soluções que eles encontraram.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":877,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":878,"value":"Depois de anexar o arquivo, nós usamos a função `FileAttachment` (um trecho de código muito útil) para reconhecer o arquivo anexado como um arquivo .csv. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":879,"value":"data = FileAttachment(\"athletes.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"Você poderia ter anexado um `.xlsx`, GIF, `.json`, ou qualquer outro tipo de arquivo; o notebook [File Attachments](https://observablehq.com/@observablehq/file-attachments) explica todos esses detalhes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"Depois de anexar um arquivo e visualizá-lo em uma tabela, o próximo passo é plotar os dados em um gráfico. Vamos ver o scatterplot gerado a partir dos dados do arquivo `athletes.csv`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":882,"value":"Plot.plot({\n marks: [\n Plot.dot(data, {x: \"weight\", y: \"height\", stroke: \"sex\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"Como você pode criar um scatterplot? Digite \"scatterplot\" dentro do menu inserir célula.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"

\n \n

Escolha o item Scatterplot chart nom que aparecer abaixo do cabeçalho Plot.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"#### Vamos praticar 👊\n1. Crie uma nova célula JavaScript clicando no sinal de mais.\n2. Comece digitando \"scatterplot\" (você não precisa digitar a palavra inteira). O item **Scatterplot chart** do menu irá aparecer.\n3. Clique em **Scatterplot chart** para colar o código do Scatterplot.\n4. Edite a linha `Plot.dot` para ficar parecido com o código do exemplo.\n5. Não esqueça de clicar no triângulo azul, ou aperte as teclas Shift-Return, para ver o resultado.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":885,"value":"Vamos tentar algo mais com o `scatterplot`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"#### Vamos praticar 👊\nTente mudar o atributo `stroke` para \"weight\" ao invés de \"sex\". O que acontece? (Não esqueça de clicar no triângulo azul ou aperte Shift-Enter.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":887,"value":"Aha! O `scatterplot` criado não é uma visualização estática: ele pode reagir à alterações. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":888,"value":"**As células no Observable são reativas; elas podem ser atualizadas baseada em novos dados ou entrada dos usuários.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":889,"value":"Isto funciona devido à maneira como o Observable uso o fluxo de dados ([dataflow](https://observablehq.com/@observablehq/how-observable-runs)) para determinar quais valores são dependentes um dos outros e recalcula a medida que for necessário (como em uma planilha).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":890,"value":"A mágica real 🧙‍♀️ aparece quando inserimos **interatividade**. Se você usar o comando `viewof` juntamente com um [input](/@observablehq/inputs), você rapidamente implementa uma interface interativa.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":891,"value":"viewof myColorScheme = Inputs.select([\"rdbu\", \"piyg\", \"puor\", \"spectral\", \"blues\", \"reds\", \"warm\", \"cool\"], {label: \"Esquema de cores\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"Plot.plot({\n color: {\n type: \"diverging\",\n scheme: myColorScheme,\n reverse: true\n },\n marks: [\n Plot.dot(data, {x: \"weight\", y: \"height\", stroke: \"weight\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"Use o `drop-down` para escolher uma esquema de cor, e observe o `scatterplot` mudar de cor. Graças ao `dataflow`, o `scatterplot` automaticamente recarrega quando a entrada muda.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"Um último **exercício**: se você quiser salvar tudo que você criou ao longo do tutorial deste notebook:\n1. Role até o topo da janela do navegador. \n2. Clique no menu do notebook (**...**).\n3. Clique em **Fork**. Este comando vai criar uma cópia do notebook em sua conta. Você pode modificar a versão copiada o quanto você quiser. \n4. Coloque a URL que foi copiada nos favoritos para facilitar a busca (embora você sempre vai encontra-lo no link **Notebooks** de sua conta).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":895,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":896,"value":"Durante o processo de explorar e aprender, não se preocupe se perceber que está indo divagar. Usuários mais experientes irão dizer o quando o Observable é rápido para desenvolver soluções agora, mas você deve seguir seu próprio ritmo de aprendizado. Queremos que você torne o Observable parte de suas ferramentas padrões de uso, não simplesmente algo que você use em situações específicas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":897,"value":"### Dicas rápidas do Observable\nAlgumas dicas que podem te ajudar a agilizar umas tarefas: \n- Executar a célula atual: ${keys(\"Shift-Enter\")}\n- Criar uma nova célula depois da célula atual: ${keys(\"Mod-Enter\")}.\n- Defazer a última alteração: ${keys(\"Mod-Z\")}\n- Deletar células: ${keys(\"Alt-Backspace\")}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"- Outros atalhos de teclado podem ser encontrados [neste link](https://observablehq.com/@observablehq/keyboard-shortcuts) (em inglês).\n- Você pode identificar o tipo de célula a partir do símbolo na margem esquerda da área de edição.\n- Enquanto estiver editando uma célula do tipo Markdown, comandos de formatação vão aparecer na parte inferior do navegado.\n- Um resumo com lembretes dos conceitos básicos está disponível no link: [Getting Started](https://observablehq.com/@observablehq/getting-started) (em inglês).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":900,"value":"## Aprenda mais","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"learningMore","database":"$undefined"},{"id":901,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":902,"value":"Nós também temos uma sequência de tutoriais (em inglês) para pessoas com diferentes experiências.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":903,"value":"- **[Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot)**
Muitos dos exemplos que você viu neste tutorial vêm da `Observable Plot`, uma biblioteca JavaScript gratuita e de código aberto para visualizar de forma rápida dados tabulares. Ela é ideal para quem deseja explorar dados que já foram coletados e obter `insights` desses dados.\n \n- **[Observable para usuários do Jupyter](/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users)**
Se você tem um `background` em data science com Python, ou se sente mais confortável com Python do que com JavaScipt, estes tutorias irão te ajudar.\n\n- **[Aprenda D3](/@d3/learn-d3)**
D3 é uma poderosa biblioteca em JavaScript que ajuda a dar vida aos dados usando HTML, SVG, e CSS. Se você já tem alguma experiência com D3, você vai perceber que usar o D3 no Observable é um pouco diferente. Se você é novo em D3, no Observable, ou em ambos, você pode começar se acostumando aqui.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":904,"value":"Para ver os trabalhos inspiradores mais recentes produzidos pela comunidade do Observable, visite a página [Explore](https://observablehq.com/explore).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":839,"value":"*(Agradecimento a Jeremy Ashkenas, que criou a versão original deste notebook!)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":905,"value":"## Apêndice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":906,"value":"(Esta é uma área que possui alguns códigos que foram utilizados ao longo do notebook.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":907,"value":"async function icon2(file, {width = \"16px\"} = {}) {\n const src = await file.url();\n return () => htl.html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"keys = s => html`${keysText(s)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"import {keys as keysText, mac} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"