21:null 22:["$","title",null,{"children":"Visualização de dados | Guilherme Ranoya | Observable"}] 27:[] 25:{"id":"fed322e656aaf70e","slug":"livroobservable-8","title":"Visualização de dados","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-11-28T00:44:45.195Z","update_time":"$D2024-12-15T20:15:42.875Z","view_time":null,"first_public_time":"$D2024-11-28T00:44:45.195Z","has_unpublished_edits":null,"fork":{"id":"f1bf786b68b8a566","slug":"livroobservable-7","title":"Programando com dados","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":1531,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"titling":"auto","title":"Visualização de dados","cells":[{"id":0,"value":"# Visualização de dados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Filtrando, visualizando e explorando dados\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1321,"value":"Para tratar e explorar dados, iremos inicialmente puxá-los de uma planilha. Para isso utilizaremos a função `gsdata` da biblioteca Datat, que já captura e trata os dados de uma planilha online do Google Sheets.\n\nPara incorporar a função, utilizaremos a instrução `import` do Observable:\n\n```js\nimport { gsdata } from \"@ranoya/datat\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1325,"value":"import { gsdata } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"Após importá-la, iremos capturar os dados da planilha para a variável `meusdados`:\n\n```js\nmeusdados = gsdata(\"https://docs.google.com/spreadsheets/d/1mOvH6mpP5SOdaSmWvRL8KpCqLJKM3ZjvxY97o-55cBY/edit?gid=0#gid=0\")\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1333,"value":"meusdados = gsdata(\n \"https://docs.google.com/spreadsheets/d/1mOvH6mpP5SOdaSmWvRL8KpCqLJKM3ZjvxY97o-55cBY/edit?gid=0#gid=0\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"*☞ É importante lembrar que a planilha precisa estar compartilhada com acesso público para leitura para que possa ser acessada por `gsdata`.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1339,"value":"Com os dados carregados, nossa primeira ação será exibí--los em forma de uma tabela. Para isso utilizaremos um recurso do próprio Observable, o `Inputs.table()`. Para criar a tabela, utilize a seguinte instrução:\n\n```js\ntabela_1 = Inputs.table(meusdados)\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"tabela_1 = Inputs.table(meusdados)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1115,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1117,"value":"## Criando filtros dinâmicos e fixos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"O próprio Observable possui ferramentas prontas para criar filtros em tempo real para todos os dados, mecanismo conhecido como *fuzzy search*. Este tipo de recurso é excepcionalmente útil para explorar os dados disponíveis.\n\nO ferramenta extrai para uma nova variável os dados localizados no conjunto original (ou no conjunto de dados que lhe for dado como parâmetro, podendo, claro, ser um conjunto já filtrado por outro critério ou processo). Para criar um filtro em que termos possam ser digitados, e a extração dos dados aconteça em tempo real, utilize a função `Inputs.search()`:\n\n```js\nviewof dadosfiltrados_1 = Inputs.search(meusdados);\n```\n\nSe desejar utilizar um termo inicial para a filtragem, inclua um Objeto como parâmetro, e o elemento `query`:\n\n```js\nvioewof dadosfiltrados_1 = Inputs.search(meusdados, {query: \"Quest\"})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1350,"value":"viewof dadosfiltrados_1 = Inputs.search(meusdados, {\n query: \"Quest\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"Na sequência exibiremos em uma tabela os dados filtrados com:\n\n```js\ntabela_2 = Inputs.table(dadosfiltrados_1);\n```\n\nOs valores apresentados variam conforme os termos digitados no campo de entrada.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1364,"value":"tabela_2 = Inputs.table(dadosfiltrados_1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"Para criar um filtro fixo, que não pode ser alterado pelo usuário do documento, para que seus dados possam ser usados para outras operações, bastará incluir alguns novos elementos dentro do Objeto usado como parâmetro em `Inputs.search()`. O elemento `disabled`, quando definido para `true`, irá impedir qualquer mudança no campo de entrada, adotado o que estiver informado em `query` como o termo de filtragem. O elemtno `label` irá colocar uma orientação à esquerda do campo de entrada:\n\n```js\nviewof dadosfiltrados_2 = Inputs.search(meusdados, {\n query: \"Lucasarts\",\n label: \"Filtro Fixo\",\n disabled: true\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1382,"value":"viewof dadosfiltrados_2 = Inputs.search(meusdados, {\n query: \"Lucasarts\",\n label: \"Filtro Fixo\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"E na sequência, teremos mais uma tabela:\n\n```js\ntabela_3 = Inputs.table(dadosfiltrados_2)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1393,"value":"tabela_3 = Inputs.table(dadosfiltrados_2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1126,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1128,"value":"## Mais interações","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1132,"value":"Podemos utilizar também uma variável em `query`, utilizando um conjunto de critérios pré-definidos como filtro. Para produzir algo mais interessante, utilizaremos um *slider* para variar entre todos os diferentes anos de lançamento presentes nos dados. Para obter esta lista, sem que existam dados repetidos, iremos primeiro trazer a função `unique` da biblioteca Datat:\n\n```js\nimport { unique } from \"@ranoya/datat\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1400,"value":"import { unique } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"Com ela, será possível separar em uma lista (*Array*) todos onde os produtos descritos nos dados foram lançados. Isto é feito informando para a função `unique` qual a \"coluna\" dos dados tabulares deverá ser utilizada para extrair os dados únicos existentes. Neste caso utilizaremos a \"coluna\" `ano`. Esta é instrução para realizar tal operação:\n\n```\nanos = unique(meusdados,\"ano\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1405,"value":"anos = unique(meusdados,\"ano\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"Para criarmos o *slider* que irá navegar entre estes dados, utilizaremos a função `Inputs.range` do próprio Observable:\n\n```js\nviewof seleciona_ano = Inputs.range([1984, 2021], {\n label: \"Ano Selecionado\",\n step: 1,\n value: 2017\n})\n```\n\n*☞ Agruparemos os produtos dos códigos dos campos de entrada, filtros aplicados, e tabelas produzidas, todos juntos mais abaixo, para facilitar serem percebidos os resultados de suas alterações.*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1416,"value":"`Input.range` recebe um primeiro parâmetro como uma *Array* contendo o valor mínimo e o valor máximo do *slider*, e opcionalmente um Objeto com o valor inicial dado por `value`, a dimensão da mudança dado por `step`, e uma orientação por `label`.\n\nCom o valor desta ferramenta interativa atribuído a variável `seleciona_ano`, a utilizaremos como filtro em `Inputs.search`:\n\n```js\nviewof dadosfiltrados_3 = Inputs.search(meusdados, {\n query: seleciona_ano,\n label: \"Ano Aplicado\",\n disabled: true\n})\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1429,"value":"E a nova tabela com:\n\n```js\ntabela_4 = Inputs.table(dadosfiltrados_3)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1136,"value":"viewof seleciona_ano = Inputs.range([1984, 2021], {\n label: \"Ano Selecionado\",\n step: 1,\n value: 2017\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1426,"value":"viewof dadosfiltrados_3 = Inputs.search(meusdados, {\n query: seleciona_ano,\n label: \"Ano Aplicado\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"tabela_4 = Inputs.table(dadosfiltrados_3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"Os registros dos anos são valores numéricos, e isto é muito conveniente para a navegação através do *slider*, mas mesmo um dado textual, como o da \"coluna\" `produtora`, também pode ser navegado através dele, com um pouco mais de engenhosidade:\n\nFaremos uso novamente de `unique`, mas na \"coluna\" `produtora`, que nos proverá uma *Array* com todos os valores únicos, contendo, logicamente, um índice (numérico) para estruturá-la.\n\n```js\nempresas = unique(meusdados,`produtora`)\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1461,"value":"empresas = unique(meusdados, `produtora`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"A diferença para este novo `Inputs.range` é que ele incidirá sobre o índice, e não sobre o conteúdo. Como temos 65 registros, o *slider* terá valores mínimos e máximos de 0 e 64:\n\n```js\nviewof indice_empresa = Inputs.range([0, 64], {\n label: \"Empresa\",\n step: 1,\n value: 25\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1473,"value":"Vale a pena notar que os valores 0 e 64 estão inseridos de forma arbitrária (*hardcoded*), mas se a planilha com os dados mudar, incluindo novos títulos, este *slider* provavelmente não conseguirá exibir todos os dados. Para utilizar o valor preciso de itens registrados, é possível usar `empresas.length - 1`, que irá resultar no número total de registros, subtraído de um valor unitário, já que os registros se iniciam com zero, isto é, de 0 a 64 temos 65 registros, que será o valor resultante de `empresas.length`.\n\nO detalhe importante para aplicação do filtro em `Inputs.search` é que ele não será feito pela variável `indice_empresa`, mas sim pela variável `empresas[indice_empresa]`, já que `indice_empersa` é apenas o índice da *Array*, e seus conteúdos estão armazenados em `empresas`.\n\nPara isso utilizaremos a seguinte instrução:\n\n```js\nviewof dadosfiltrados_4 = Inputs.search(meusdados, {\n query: empresas[indice_empresa],\n label: \"Empresa Aplicada\",\n disabled: true\n})\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1486,"value":"E, mais uma vez, a tabela para apresentar os dados:\n\n```js\ntabela_5 = Inputs.table(dadosfiltrados_4)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1469,"value":"viewof indice_empresa = Inputs.range([0, 64], {\n label: \"Empresa\",\n step: 1,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"viewof dadosfiltrados_4 = Inputs.search(meusdados, {\n query: empresas[indice_empresa],\n label: \"Empresa Aplicada\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"tabela_5 = Inputs.table(dadosfiltrados_4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1493,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1495,"value":"## Visualizações sofisticadas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1497,"value":"A manipulação e conversão dos dados para outros formatos ou estruturas permitirá que se utilizem ferramentas gráficas poderosas, como a biblioteca D3, dos próprios criadores do Observable (já integrada nele).\n\nAtravés delas, estes mesmos dados poderão gerar visualizações interativas como a abaixo:\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1503,"value":"viewof filtrostring = Inputs.search(meusdados, {\n label: \"Filtro Textual\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"vis = zoomsunburst(arvore(filtrostring))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"import { zoomsunburst } from \"@ranoya/zoomd3viz\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"import { arvore } from \"@ranoya/obs_dadosiniciantes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W27","stdlib":"1"}} 26:"$25:body"