Insert cell before (Ctrl-Shift-Enter)

30:T62c,--- ## Para quem usa Excel Para utilizar uma planilha Excel, você pode anexá-la no seu notebook (através do ícone no menu lateral direito do Observable), e conectá-la utilizando a instrução: ```js meusdados = FileAttachment("nomedoarquivo.xlsx").xlsx() ``` > ☞ *Nesta expressão, `meusdados` é uma variável (você pode dar os nomes que desejar a suas variáveis), e `normedoarquivo.xlsx` você substituirá com o nome do seu arquivo Excel anexado*. Você pode utilizar quantos arquivos diferentes quiser, em um mesmo notebook.
31:T584,--- ## Para quem usa arquivos CSV Para utilizar um arquivo CSV (*comma separated values*), você utilizará o mesmo procedimento do Excel, anexando seu arquivo ao notebook (através do ícone no menu lateral direito do Observable), e o conectando utilizando uma instrução um pouco diferente: ```js meusdados = FileAttachment("meuarquivo.csv").csv({ typed: true }) ```
32:T4ea,--- ## Vendo os dados O Observable já possui uma ferramenta interna poderosa para apresentar dados tabulares sem a necessidade de programação. Para utilizá-la, basta clicar no ícone de e na opção *Data Table*.

Esta ferramenta apresentará os dados, incluirá uma ferramenta de filtro em tempo real (*fuzzy search*), mecanismos de ordenação (*sort*), filtros permanentes, recorte dos dados (*slice*), e apresentará sumários gráficos e interativos sobre os dados. Você precisará indicar quais dados quer utilizar através da variável a qual estes dados estão associados. Lembre-se: você pode utilizar várias fontes de dados através de múltiplas variáveis.

33:T465,A nova variável `dadosfiltrados` está conectada agora a uma nova fonte de dados que contém as informações filtradas em tempo real da fonte original `meusdados`. Tabelas criadas com a variável `dadosfiltrados` irão exibir apenas os dados em que os termos incluídos no filtro estiverem presentes. Se você deseja criar um filtro fixo, extraindo um certo tipo de dado das fontes originais para uso e visualização no notebook, pode incluir mais parâmetros no *Search*: ```js viewof filtrofixo = Inputs.search(meusdados, { label: "etiqueta", query: "Termo para filtro", disabled: true }) ``` > ☞ *Algumas informações extras são necessárias para realizar esta filtragem fixa: além do nome de uma nova variável (aqui como `filtrofixo` mas que você pode utilizar o que preferir no lugar), também temos `"etiqueta"`, entre aspas, que é a orientação que aparecerá na lateral esquerda do campo, e em `"Termo para filtro"`, que também precisa ser entre aspas, os termos que você deseja utilizar para realizar a filtragem dos dados.* Abaixo temos uma tabela com os dados filtrados pelo termo "Sierra":34:T810,Mas também é possível utilizar outras variáveis contendo valores específicos para se filtrar os dados através do *Search*. Vamos utilizar um controle de *Range* (mas que poderia ser também um campo de texto, ou outro tipo de campo de entrada de dados), para filtrar os dados por anos. Para isso, incluiremos a instrução: ```js viewof seleciona_ano = Inputs.range([1984, 2021], {label: "Ano", step: 1}) ``` Com esta instrução, atribuiremos um valor de 1984 a 2021 à variável `seleciona_ano`. > ☞ *Além dos valores mínimos e máximos, dados dentro de `[1984, 2021]`, a instrução também recebe mais alguns parâmetros, sendo `"Ano"`, entre áspas, a orientação que aparecerá no lado esquerdo do campo, e `1` informado como `step`, que significa de quantos em quantos pontos o valor deverá ser acrescido ou diminuído pelo controle, fazendo com que a interação acrescente ou diminua 1 ano de cada vez.* Agora, utilizaremos a instrução de *Search* com uma pequena mudança nos parâmetros: ```js viewof filtroporano = Inputs.search(meusdados, { label: "dados filtrados pelo Range", query: seleciona_ano, disabled: true }) ``` A diferença relevante nela é que em `query`, não colocamos um valor com aspas, e sim uma variável, `seleciona_ano`, que contém exatamente o valor de um ano escolhido através do `Range`. Com isso, o filtro operado em `meusdados` será o do ano escolhido no `Range`. > ☞ *A informação do ano utilizado para filtragem, ou qualquer outro termo, poderia ter sido entrada também com um campo de texto. Adotar Range é apenas uma opção, dentre várias opções possíveis, pelo tipo de interação utilizada para a entrada de dados em uma variável.* Com a nova variável `filtroporano`, podemos ter uma tabela nova que apresenta apenas os produtos lançados em um ano específico, utilizando, claro, a instrução: ```js viewof visualizaporano = Inputs.table(filtroporano) ``` A exibição também funcionaria se utilizássemos a opção *Data Table* do menu, com a variável `filtroporano`.35:T67a,Com isto teremos a variável `todas_produtoras` contendo uma lista com todos os registros de produtoras nos dados, sem que nenhuma informação aparece repetida na lista. Temos no total ${todas_produtoras.length} produtoras (e este valor está sendo obtido dos dados... caso a lista seja atualizada, ele também será). É possível acessar os valores individuais da lista colocando chaves `[ ]` após a variável, e informando o índice do registro nesta variável, que começa com zero e vai até ${todas_produtoras.length - 1}. Ou seja:
todas_produtoras[0] é ${todas_produtoras[0]}
todas_produtoras[1] é ${todas_produtoras[1]}
todas_produtoras[9] é ${todas_produtoras[9]}
Para se filtrar a lista de produtos através das produtoras, utilizando *Range*, bastará alterar os valores destes índices, e não o valor do ano. Para fazer isso, vamos criar um novo *Range*: ```js viewof seleciona_indice = Inputs.range([0, 64], { label: "Indice", step: 1 }) ``` Nesta instrução, informamos o número 64 como sendo o último registro da lista, mas se ela for atualizada com mais informações, o *Range* não chegará até eles. Para obter o número de registros atualizados, fazemos uso da variável `todas_produtoras.length`, que atualmente é ${todas_produtoras.length}. Como os índices começam com o número 0 (zero), o último índice é sempre o total de registros (`todas_produtoras.length`) menos 1. A instrução do *Range* pode ser escrita com estes dados para garantir que nenhuma informação fique de fora: ```js viewof seleciona_indice = Inputs.range([0, todas_produtoras.length - 1], { label: "Indice", step: 1 }) ``` 36:T434,--- ## E o que fazer com isso? Além de exibir tabelas com dados filtrados, ou com interações que nos permitam ver estes dados separados em tabelas, os notebooks também permitem a construção de gráficos em tempo real com estes dados, experimentações e simulações com eles, e todo tipo de análise e processamento automatizados com programação Javascript. Além do uso de dados, um notebook também contempla a escrita de um texto, a inclusão de links, imagens e vídeos, e o uso de *HTML* e *CSS*, linguagens de programação tipo *script* utilizadas para a construção de websites. Tudo aquilo que é construído no Observable pode ser utilizado fora do Observable, através de recursos como *embedding* do documento completo, ou de algumas células específicas, e também com acesso via programação aos conteúdos específicos do documento. Com um pouco mais de experiência em manipular dados com programação e articular variáveis dentro de variáveis, você poderá produzir mecanismos interativos para explorar os dados como este abaixo:

37:T4fb,arvore = function (arr) { let anos = unique(arr, "ano"); let produtoras = ""; let produtos = ""; let cprods = 0; let newarr = {}; newarr.name = "Tudo"; newarr.children = []; let contaA = 0; let incluiProds = ""; for (let a = 0; a < anos.length; a++) { newarr.children[contaA] = {}; newarr.children[contaA].name = anos[a]; newarr.children[contaA].children = []; produtoras = unique(cfilter(arr, "ano", new RegExp(anos[a])), "produtora"); for (let p = 0; p < produtoras.length; p++) { newarr.children[contaA].children[p] = {}; newarr.children[contaA].children[p].name = produtoras[p]; produtos = []; cprods = 0; for (let ip = 0; ip < arr.length; ip++) { if (anos[a] == arr[ip].ano && produtoras[p] == arr[ip].produtora) { produtos[cprods] = arr[ip].nome; cprods++; } } newarr.children[contaA].children[p].children = []; for (let j = 0; j < produtos.length; j++) { newarr.children[contaA].children[p].children[j] = {}; newarr.children[contaA].children[p].children[j].value = produtoras.length; newarr.children[contaA].children[p].children[j].name = produtos[j]; } } contaA++; } return newarr; }38:[] 2e:{"title":"Usando o Observable com dados","cells":[{"id":0,"value":"# Usando o Observable com dados\n## Para quem está começando com dados e notebooks\n\n
\nClique aqui para acessar este documento no próprio Observable.\n\nTentaremos introduzir aqui o uso dos notebooks computacionais para exploração de dados com o mínimo de código de programação possível. O Observable não é uma ferramenta *no-code* (que constroem visualizações ou análises sem que nenhuma linha de código seja escrita), mas ele oferece alguns recursos prontos que são simples e práticos de se usar, até por quem não entende de programação.\n\nSe você deseja aprender mais de programação nesta plataforma, pode iniciar com este livro interativo.\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"---\n\n## Para quem prefere utilizar uma planilha online do Google Sheets\n\n\nA forma mais simples e prática para utilizar uma planilha online é utilizar as seguintes instruções, em células separadas do Observable:\n\n```js\nimport {gsdata} from \"@ranoya/datat\"\n\nmeusdados = gsdata(\"endereço da planilha\")\n```\n\n> ☞ *Nesta expressão você substituirá o `endereço da planilha` com a URL do Google Sheets, algo como:*\n> *https://docs.google.com/spreadsheets/d/1mOvH6mpP5SOdaSmWvRL8KpCqLJKM3ZjvxY97o-55cBY/edit?gid=0#gid=0*\n>\n> *É importante que a sua planilha esteja configurada com o compartilhamento como Acesso Geral > Público > Leitor, isto é, qualquer pessoa com o link poderá ver/ler o conteúdo da planilha.*\n\nToda vez que houverem alterações na planilha, o notebook precisará ser carregado, ou, ao menos, a instrução `meusdados = gsdata()` precisará ser re-executada, pois a captura dos dados (*fetch*) só é realizada uma única vez, ao se iniciar o notebook.\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"meusdados","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":77,"value":"Se você prefere uma estrutura mais simples (e que possa ser utilizada fora do Observable), apenas para exibir os dados em forma de uma tabela que pode ser navegada, a opção *Javascript Table* também está disponível.\n\nEla também pode ser incluída através da instrução:\n\n```js\nviewof tabelasimples = Inputs.table(meusdados)\n```\n\n> ☞ *Assim como antes, `meusdados` é o nome da variável que você criou para conectar ao dados, e `tabelasimples` é uma nova variável associada a esta tabela*.","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"viewof tabelasimples = Inputs.table(meusdados)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"A tabela simples não possui ferramentas de manipulação dos dados, mas isto pode ser incluído facilmente. Para criar um filtro em tempo real (*fuzzy search*), basta você incluir a opção *Search* do menu, ou incluir a seguinte instrução:\n\n```js\nviewof dadosfiltrados = Inputs.search(meusdados)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"viewof dadosfiltrados = Inputs.search(meusdados)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"$33","pinned":true,"hidden":false,"mode":"md"},{"id":106,"value":"viewof filtrofixo = Inputs.search(meusdados, {\n label: \"de uma produtora\",\n placeholder: \"Dados contendo Sierra\",\n query: \"Sierra\",\n disabled: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof sosierra = Inputs.table(filtrofixo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"viewof seleciona_ano = Inputs.range([1984, 2021], {\n label: \"Ano\",\n step: 1,\n value: 2017\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof filtroporano = Inputs.search(meusdados, {\n label: \"dados filtrados pelo Range\",\n query: seleciona_ano,\n disabled: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof visualizaporano = Inputs.table(filtroporano)","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"Conseguir ver os dados mapeados desta forma é interessante, mas você deve estar imaginando que é algo que só funciona quando temos um registro numérico, como um ano ou uma cifra financeira, para navegarmos através deles. Contudo, fazer o mesmo mecanismo operar através de outros tipos de dados não é muito mais complicado.\n\nA primeira coisa a ser feita é utilizar o recurso `unique`, disponível na mesma biblioteca de dados tabulares de onde trouxemos o `gsdata` para acessar uma planilha online. Isto é feito com a instrução abaixo:\n\n```js\nimport {unique} from \"@ranoya/datat\"\n```\n\nEsta ferramenta é capaz de listar os valores \"únicos\" de uma coluna dos dados tabulares. Para obtermos a lista de produtoras da tabela, utilizaremos a instrução:\n\n```js\ntodas_produtoras = unique(meusdados,\"produtora\");\n```","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"todas_produtoras = unique(meusdados, \"produtora\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"Agora, nosso filtro utilizará o o valor de `todas_produtoras` variando apenas o índice, para que seu conteúdo (${todas_produtoras[0]}, ${todas_produtoras[1]}, ${todas_produtoras[2]}, ${todas_produtoras[9]}, etc.) seja utilizado como termo para o filtro.\n\nPara criarmos este filtro utilizaremos:\n\n```js\nviewof filtraporprodutora = Inputs.search(meusdados, {\n label: \"dados filtrados pelo segundo Range\",\n query: todas_produtoras[seleciona_indice],\n disabled: true\n})\n```","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"Sim!... isso começa a ficar confuso. Este tipo de recursividade é que torna a programação mais complicada, mas ao mesmo tempo, tão poderosa.\n\nUtilizamos em `query` a variável `todas_produtoras`, mas esta variável possui vários valores, condicionados a uma outra variável controlada pelo *Range*, chamada `seleciona_indice`. Ou seja, o conteúdo de `todas_produtoras` (que é uma lista de ${todas_produtoras.length} termos) se modifica conforme o valor de `seleciona_indice`. Atualmente seu valor é **${todas_produtoras[seleciona_indice]}** (mas experimente modificar o controlador).\n\nÉ esta informação, a de `todas_produtoras[seleciona_indice]` que é igual a ${todas_produtoras[seleciona_indice]}, que precisa ser usada para filtrar os dados.\n\nA última etapa é apresentar os dados filtrados em forma de tabela. A instrução para isso é:\n\n```js\nviewof visualizaporprodutora = Inputs.table(filtraporprodutora)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"viewof seleciona_indice = Inputs.range([0, todas_produtoras.length - 1], {\n label: \"Indice\",\n step: 1,\n value: 13\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof filtraporprodutora = Inputs.search(meusdados, {\n label: \"dados filtrados pelo segundo Range\",\n query: todas_produtoras[seleciona_indice],\n disabled: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"viewof visualizaporprodutora = Inputs.table(filtraporprodutora)","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"Outra situação bastante comum é que ao utilizar `Inputs.search`, realizamos uma busca global nos dados, e nem sempre o resultado é aquilo que estamos tentando isolar. Como exemplo vamos tentar separar em uma tabela todos os produtos da empresa **Us Two**, e para isso utilizaremos uma pesquisa através do termo **Us**:\n\n```js\nviewof ustwo_errado = Inputs.search(meusdados, {\n label: \"Us Two?\",\n query: \"Us\",\n disabled: true\n})\n```","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"viewof ustwo_errado = Inputs.search(meusdados, {\n label: \"Us Two?\",\n query: \"Us\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof visualizaustwo_errado = Inputs.table(ustwo_errado)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"Como se vê, o produto **Wolf Among Us** também entrou para a relação, uma vez que também contém o termo **Us** em um dos campos.\n\nPara realizar uma filtragem limitada a uma coluna específica de um conjunto de dados, utilizaremos a função `cfilter` da biblioteca DataT. Primeiro é necessário incorporar a função no notebook:\n\n```js\nimport {cfilter} from \"@ranoya/datat\"\n```\n\nA função recebe 3 parâmetros: a variável contendo os dados tabulares, a coluna sobre a qual a pesquisa deve ser feita, e o termo a ser utilizado. Para filtrar os produtos da **Us Two**, aplicaremos uma consulta com o mesmo termo **Us**, apenas sobre a coluna de **produtora**:\n\n```js\nustwo_correto = cfilter(dadosfiltrados, \"produtora\", \"Us\")\n```","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"ustwo_correto = cfilter(dadosfiltrados, \"produtora\", \"Us\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"Como resultado, veremos apenas os produtos da **Us Two**:","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"viewof visualizaustwo_correto = Inputs.table(ustwo_correto)","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"E ao fazer isso, percebemos que há erros nos registros, afinal o produto de 2014, e o de 2016, estão com o mesmo nome, e o nome da produtora no registro de 2014 está grafado com o **US** inteiro em maiúsculas.","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"Como se vê, o processo de programação é o uso de uma variável encadeada sobre outra variável, controlada por uma terceira variável... associado e construindo uma coisa sobre a outra, acabamos elaborando instrumentos de análise que podem ser muito úteis e interessantes.\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"viewof filtrostring = Inputs.search(meusdados, {\n label: \"entrada textual\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"zoomsunburst(arvore(filtrostring))","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":138,"value":"---\n\n#### Recursos utilizados\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"import { gsdata } from \"@ranoya/datat\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"import { unique } from \"@ranoya/datat\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"meusdados = gsdata(\n \"https://docs.google.com/spreadsheets/d/1mOvH6mpP5SOdaSmWvRL8KpCqLJKM3ZjvxY97o-55cBY/edit?gid=0#gid=0\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"import { cfilter } from \"@ranoya/datat\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"import { zoomsunburst } from \"@ranoya/zoomd3viz\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}