The avatar for @ranoya
Guilherme Ranoya
Interaction Designer, Creative Technologist, Professor and Researcher
Public
Edited
Dec 15
Fork of Programando com dados
•
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Após importá-la, iremos capturar os dados da planilha para a variável `meusdados`:

```js
meusdados = gsdata("https://docs.google.com/spreadsheets/d/1mOvH6mpP5SOdaSmWvRL8KpCqLJKM3ZjvxY97o-55cBY/edit?gid=0#gid=0")
```
Insert cell
meusdados = gsdata(
"https://docs.google.com/spreadsheets/d/1mOvH6mpP5SOdaSmWvRL8KpCqLJKM3ZjvxY97o-55cBY/edit?gid=0#gid=0"
)
Insert cell
Insert cell
Insert cell
tabela_1 = Inputs.table(meusdados)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tabela_2 = Inputs.table(dadosfiltrados_1)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Para criarmos o *slider* que irá navegar entre estes dados, utilizaremos a função `Inputs.range` do próprio Observable:

```js
viewof seleciona_ano = Inputs.range([1984, 2021], {
label: "Ano Selecionado",
step: 1,
value: 2017
})
```

*☞ 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.*
Insert cell
`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`.

Com o valor desta ferramenta interativa atribuído a variável `seleciona_ano`, a utilizaremos como filtro em `Inputs.search`:

```js
viewof dadosfiltrados_3 = Inputs.search(meusdados, {
query: seleciona_ano,
label: "Ano Aplicado",
disabled: true
})
```
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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:

Faremos 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.

```js
empresas = unique(meusdados,`produtora`)
```
Insert cell
Insert cell
Insert cell
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`.

O 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`.

Para isso utilizaremos a seguinte instrução:

```js
viewof dadosfiltrados_4 = Inputs.search(meusdados, {
query: empresas[indice_empresa],
label: "Empresa Aplicada",
disabled: true
})
```
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vis = zoomsunburst(arvore(filtrostring))
Insert cell
import { zoomsunburst } from "@ranoya/zoomd3viz"
Insert cell
import { arvore } from "@ranoya/obs_dadosiniciantes"
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more