2c:null 2d:["$","title",null,{"children":"Programando no Observable | Guilherme Ranoya | Observable"}] 32:Ta8d,Trabalhar com dados em **javascript**, utilizando o Observable, já é tarefa bem mais tranquila. A primeira tarefa é carregar os dados, e que pode ser feita de duas formas diferentes: a primeira é anexar um arquivo com dados na plataforma (no formato `csv`, `json`, `xml`, ou mesmo um banco de dados) clicando nos ícones ou na barra vertical direita da plataforma; a segunda forma é carregar os dados da núvem, ou de um servidor web, seja um arquivo ou de um serviço como o *Google Sheets*. 33:T54f,Para acessar os dados de um arquivo `csv` anexado ao notebook, já em forma de [Array](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*), basta utilizar: ```javascript minhaArray = FileAttachment("meuarquivo.csv").csv() ``` Se o arquivo for com dados no formato `json`, a sintaxe é muito parecida: ```javascript minhaArray = FileAttachment("meuarquivo.json").json() ``` E caso você anexe um arquivo `SQL Lite` (banco de dados), a instrução segue a mesma lógica, mas os conteúdos não serão transformados em uma [Array](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*), e precisarão ser consultados através de instruções (*queries*) em linguagem SQL. ```javascript meuDb = FileAttachment("meuarquivo.db").sqlite() ``` Também é possível acessar estes mesmos arquivos disponíveis online, e não como anexos na plataforma. A biblioteca **javascript** D3 é parte do Observable, e já resolve estas tarefas: ```javascript minhaArray = d3.csv("https://meusite.com.br/dados.csv") ``` ou ```javascript minhaArray = d3.json("https://meusite.com.br/dados.json") ``` Para fazer o mesmo com arquivos `SQL Lite` hospedados fora do Observable, a instrução é: ```javascript meuDb = SQLiteDatabaseClient.open("https://meusite.com.br/meuSQL.db") ``` 34:T6b0,Mas talvez a solução mais interessante não seja carregar dados fixos de um arquivo (anexado ou online), e sim de um serviço onde estes dados podem ser alterados facilmente. Este processo pode ser feito através de [funções](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) disponíveis na biblioteca [DataT](https://observablehq.com/@ranoya/datat), que funciona para o Observable, e também fora dele. Para carregar no notebook a [função](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) que realiza esta tarefa, é necessário incluir nele o `import` abaixo: ```javascript import {gsdata} from "@ranoya/datat" ``` Isso irá trazer do notebook do [DataT](https://observablehq.com/@ranoya/datat) apenas esta [função](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) necessária para carregar o conteúdo de planilhas do *Google Sheets* como [Array](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*). Uma vez importado, é possível carregar dados de planilhas que estejam *compartilhadas para leitura com qualquer pessoa com o link*. Para capturar/carregar estes dados, basta utilizar a seguinte instrução: ```javascript meudados = gsdata("https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit#gid=0"); ``` Carregamos aqui [esta planilha](https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit#gid=0) contendo levantamentos feitos sobre *Point & Click Adventures*. O Observable naturalmente apresentará os dados no formato abaixo:35:T55f,Para quaisquer que sejam os propósitos e objetivos de se programar com dados, estas tarefas iniciais serão sempre necessárias. Se como resultado se buscam visualizações, gráficos, dashboards, ou apenas processar as informações para um cálculo ou medir um resultado, serão sempre necessários os famosos "dados tabulares", isto é, um conjunto de registros multidimensionais, categorizados através de "colunas" de uma tabela, e sequenciados através de inúmeras linhas. Uma ferramenta como o `Inputs.search` irá selecionar de um conjunto multidimensional todos os dados em que os termos dados estejam presentes, mas não separará dados onde o termo esteja presente exclusivamente em uma das "colunas", isto é, se ele consta especificamente em um dos elementos da estrutura de dados. Para realizar este tipo de tarefa, as [Arrays](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*) possuem a [função](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) `.map()`, mas ela pode ser um tanto confusa de se usar, principalmente em casos mais complexos. Para utilizá-la com o intuito de separar todos os anos em que produtos de `Point & Click` foram lançados, fazemos o seguinte: ```javascript todosanos = meusdados.map(function (linha) { return linha.ano; }) ```36:[] 30:{"id":"0eab3c89981aa2bc","slug":"javascript6","title":"Programando no Observable","thumbnail":"8a2f85b597b3d84494559ced86ef6c1c6ff9e7198dfe53d0076506b0e72f5e57","access_level":"public","create_time":"$D2024-05-16T11:01:01.482Z","update_time":"$D2024-05-21T11:19:38.450Z","view_time":null,"first_public_time":"$D2024-05-16T11:01:01.482Z","fork":{"id":"9ca94cca5355b488","slug":"javascript4","title":"Programando no Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":1263,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"930a47a12763c432","slug":"aulas-de-observable","title":"Aulas de Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Programando no Observable","cells":[{"id":0,"value":"# Programando no Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### Introdução sobre literate programing no Observable com javascript\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"## Programando com dados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":696,"value":"Uma das grandes áreas que se interessa pela programação literária e o uso de notebooks é a Ciência de Dados, já que estas ferramentas facilitam enormemente o trabalho com dados, principalmente por que facilitam sua visualização, e por que permitem que realizemos experimentos com eles no próprio espaço de trabalho.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"Trabalhar com dados em **javascript** não é tarefa trivial em sua versão pura (*vanilla*), e muitas vezes se fazem necessárias bibliotecas para facilitar esse processo: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1080,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1092,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"meusdados = gsdata(\n \"https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit#gid=0\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"## Assincronia","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"Uma questão importante que precisa ser considerada é que a captura/carregamento de dados é um processo assíncrono, que pode levar algum tempo para ser concluído. Até que os dados estejam totalmente carregados, o notebook não irá ser processado, principalmente se as [funções](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) e instruções dadas dependerem destes dados.\n\nLidar com trabalho assíncrono é um processo complexo para a programação **javascript** em contextos tradicionais. É neste fator que o Observable supera inequivocamente estes contextos, já que todas as instruções seguem uma cadeia de dependência, e são executadas apenas quando aquilo do que dependem já estiver disponível, independente da ordem em que são incluídos no documento. A plataforma faz uma avaliação prévia das instruções, e organiza sua execução, sem que a assincronia precise ser resolvida pelo próprio programador.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1126,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1128,"value":"## Ferramentas nativas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"O próprio Observable já possui nativamente recursos poderosos para lidar com os dados. O primeiro deles é a possibilidade de operar filtros de *fuzzy search* e separar em uma nova [Array](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*) dados onde a informação solicitada está presente em qualquer uma de suas categorias. Para incluir essa ferramenta, utilizamos a seguinte instrução:\n\n```javascript\nviewof filtros = Inputs.search(meusdados, {label: \"variável filtros\"})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1136,"value":"viewof filtros = Inputs.search(meusdados, {\n label: \"variável filtros\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1139,"value":"Isso providenciará para a [Array](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*) `filtros` um subconjunto de `meusdados` onde os termos inseridos no campo de entrada forem incluídos. Se incluirmos nele o termo \"Quest\", separaremos uma [Array](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*) que conterá (provavelmente) os produtos da Sierra (King's Quest, Police Quest, Space Quest, etc.).\n\nTambém é possível estabelecer um filtro com termos pré-definidos, através da instrução:\n\n```javascript\nviewof filtros2 = Inputs.search(meusdados, {\n label: \"variável filtros2\",\n placeholder: \"Nenhum filtro\",\n query: \"Lucasarts\",\n disabled: true\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1145,"value":"viewof filtros2 = Inputs.search(meusdados, {\n label: \"variável filtros2\",\n placeholder: \"Nenhum filtro\",\n query: \"Lucasarts\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1148,"value":"E claro, é possível exibir estes dados no formato de uma tabela com a instrução:\n\n```javascript\nviewof lista = Inputs.table(filtros2, {\n columns: [\"nome\", \"ano\", \"video\"]\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1152,"value":"viewof lista = Inputs.table(filtros2, {\n columns: [\"nome\", \"ano\", \"video\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"Podemos também incluir campos de seleção como variáveis que atuarão sobre os filtros aplicados:\n\n```javascript\nviewof empresa = Inputs.select(\n [\"Sierra\", \"Lucasarts\", \"Double Fine Productions\", \"Cinematronics\"],\n { label: \"variável empresa\" }\n)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1161,"value":"viewof empresa = Inputs.select(\n [\"Sierra\", \"Lucasarts\", \"Double Fine Productions\", \"Cinematronics\"],\n { label: \"variável empresa\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"Para aplicá-los nos filtros utilize `empresa` como a variável em `query`:\n\n```javascript\nviewof filtros3 = Inputs.search(meusdados, {\n label: \"variável filtros3\",\n placeholder: \"Nenhum filtro\",\n query: empresa,\n disabled: true\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"viewof filtros3 = Inputs.search(meusdados, {\n label: \"variável filtros3\",\n placeholder: \"Nenhum filtro\",\n query: empresa,\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"E por fim, geramos uma tabela com as informações, para que se tornem facilmente visualizadas:\n\n```javascript\nviewof lista2 = Inputs.table(filtros3, {\n columns: [\"nome\", \"ano\", \"produtora\"]\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1167,"value":"viewof lista2 = Inputs.table(filtros3, {\n columns: [\"nome\", \"ano\", \"produtora\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1202,"value":"todosanos = meusdados.map(function (linha) {\n return linha.ano;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"Como se vê, não se trata de um processo facilmente compreensível para quem está iniciando com a programação na linguagem.\n\nA biblioteca [DataT](https://observablehq.com/@ranoya/datat) oferecerá alguns recursos para a mesma tarfega:\n\n```javascript\nimport {unique} from \"@ranoya/datat\";\n```\n\nA [função](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) `unique` irá capturar valores únicos de uma \"coluna\" dos dados. Para levantarmos todos os anos, utilizamos:\n\n```javascript\nanosunicos = unique(meusdados, \"ano\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"anosunicos = unique(meusdados, \"ano\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"Repare, contudo, que o resultado de `unique` possui apenas ${anosunicos.length} registros, contra os ${todosanos.length} de `.map()`; isto acontece por que `unique` limpará anos (ou quaisquer informações) duplicados, reduzindo a lista apenas ao valores que são únicos e diferentes uns dos outros.\n\nAssim como `unique`, a biblioteca oferecerá um conjunto de [funções](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*) utilizadas de forma recorrente no processamento de dados multidimensionais/tabulares.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":968,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":970,"value":"Próximo: [loops](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript5?cells=*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":867,"value":"

\n\n-----\n\n#### Apêndice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1105,"value":"import { gsdata } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1225,"value":"import { unique } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"