3c:null 3d:["$","title",null,{"children":"Aula 01 - Introdução ao Observable | Filipe Martins Ferreira's Workspace | Observable"}] 43:T6c4,44:[{"id":"eccaa75398ff49fa11f3710b6669dd3d015b5ef0df9ebd756a10a4a08789fce9db28e9200058f79783862ace4cf11874bd48cdc43e74a8bf5922eca836c73b5b","href":"https://static.observableusercontent.com/files/eccaa75398ff49fa11f3710b6669dd3d015b5ef0df9ebd756a10a4a08789fce9db28e9200058f79783862ace4cf11874bd48cdc43e74a8bf5922eca836c73b5b","name":"superstore@1.csv","type":"text/csv","lastModified":1699301424586.013,"size":12033474}] 41:{"id":"5d2c5da02f5f15ab","slug":null,"title":"Aula 01 - Introdução ao Observable","thumbnail":"3fafaf347eff0390229f42710a9d8fdd9bbe4571158d3676e4077a8fb78c4cfc","access_level":"public","create_time":"$D2023-11-06T20:10:24.586Z","update_time":"$D2023-11-06T20:10:24.586Z","view_time":null,"first_public_time":"$D2023-11-06T20:10:24.586Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"97b6f5dffd32a7fc","login":"filipe-martins-ferreira-ws","name":"Filipe Martins Ferreira's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9269555d32c7320389c49e799948822502fbccbbb241b1361238f00b53cbc6e2","tier":"starter_2024","bio":""},"version":508,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"285ccb43d9a2f08e","login":"filipe-martins-ferreira","name":"Filipe Martins Ferreira","avatar_url":"https://avatars-next.observableusercontent.com/e50009519fb94697546654b7d13f8dd9f300755f4e43f7c8e652ed6eaba4065d","tier":null,"bio":""}],"members":[{"type":"individual","id":"285ccb43d9a2f08e","login":"filipe-martins-ferreira","name":"Filipe Martins Ferreira","avatar_url":"https://avatars-next.observableusercontent.com/e50009519fb94697546654b7d13f8dd9f300755f4e43f7c8e652ed6eaba4065d","tier":null,"role":"editor"},{"type":"team","id":"97b6f5dffd32a7fc","login":"filipe-martins-ferreira-ws","name":"Filipe Martins Ferreira's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9269555d32c7320389c49e799948822502fbccbbb241b1361238f00b53cbc6e2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Aula 01 - Introdução ao Observable","cells":[{"id":0,"value":"# Aula 01 - Introdução ao Observable","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$43","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Introdução\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"data = {\n const angulos = [0, 15, 30, 45, 60, 75, 90];\n const rads = angulos.map((x) => x * (Math.PI / 180));\n const senos = rads.map((x) => Math.sin(x));\n\n return senos;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"parada = 360","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"## Tipos de células\n\nAs **células de texto** são escritas em texto simples com marcação para estilização. Podemos ter textos em _itálico_ or **negrito**, [links](https://observablehq.com/), etc. \n\nA linguagem utilizada é chamada [_Markdown_](https://observablehq.com/@observablehq/markdown-quick-reference).\n\nAs células escritas usando Markdown também podem incluir código. Para fazer com que a variável `parada` apareça no texto, você digita `\\${parada}` como no exemplo:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"O critério de parada é **${parada}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"Como visto nos exemplos anteriores, **células com códigos**, escritos em _Javascript_, podem ser criadas e fazer referência a valores produzidos ao longo do notebook.\n\nPor exemplo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"parada_radianos = parada / Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"Ainda, **células com código html** também são exibidas pelo Observable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"

Eu sou um elemento HTML do tipo parágrafo!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"De forma similar, podemos escrever **células com expressões matemáticas**, usando a linguagem _Latex_!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"O Observable também facilita a inclusão de **elementos de interface** como botões, seletores, etc. Os valores produzidos a partir desses elementos podem ser associados a variáveis. Veja os exemplos a seguir:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"viewof radius = Inputs.select([\"10\", \"15\", \"20\", \"30\"], {\n label: \"Raio do Círculo\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"area = Math.PI * radius * radius","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof custo = Inputs.text({ label: \"Custo\", placeholder: \"Valor da conta\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"viewof tip = Inputs.radio([\"10\", \"12\", \"15\"], {\n label: \"Gorjeta (%)\",\n value: \"10\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"total = +custo * (1 + tip / 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"Outros tipos de elementos de interface estão disponíveis. Para uma lista completa, acesse a [doculmentação](https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"## Dados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"Conjuntos de dados podem ser fácilmente carregados para o Observable. Veja um exemplo de como carregar um arquivo CSV.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"superstore = FileAttachment(\"superstore@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"Os dados carregados podem ser exibidos em formato de tabela:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"viewof table = Inputs.table(superstore)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"Dados podem ser carregados diretamente de APIs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"dado_api = d3.csv(\n \"https://data.ny.gov/api/views/vxuj-8kew/rows.csv?accessType=DOWNLOAD&sorting=true\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"viewof table_api = Inputs.table(dado_api)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"## Reutilização de código\n\nO Observable permite que o usuário importe qualquer biblioteca _Javascript_ disponivel em repositórios online.\n\nVeja abaixo um exemplo de importação de uma biblioteca de cálculos estatíticos, chamada _stats-analysis.js_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"stats = import(\"https://cdn.skypack.dev/stats-analysis@2.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"A mediana dos valores [20, 30, 44, 12, 45] é **${\nstats.median([20, 30, 44, 12, 45])\n}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"Também é possível importar células de notebooks públicos:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"import {map} from \"@d3/interrupted-sinu-mollweide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"## Códigos auxiliares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"greypin = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"greyarrow = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"## Exercícios\n\nAcesse o link: [manipulação de arrays](https://observablehq.com/d/acbddc506c4049ec).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"