2c:null 2d:["$","title",null,{"children":"Visualização de coleções de imagens | Guilherme Ranoya | Observable"}] 32:T586,Na primeira visualização destes dados, apresentaremos todas as imagens registradas na planilha. Ela contém ${meusdados.length} registros, então, por se tratarem de muitas imagens, os apresentaremos um tabela 16 colunas de exibição. A instrução `imagetable` recebe, no mínimo, dois parâmetros: o primeiro é a variável contendo os dados tabulares, que pode ser `meusdados`, ou outra variável com algum filtro aplicado a eles; a segunda é o nome da coluna específica onde os links para as imagens se encontram nestes dados, que no caso da planilha em uso, é `video`, mas que em outras planilhas (ou conjunto de dados) receberá nomes muito diferentes. *☞ Uma das grandes vantagens de `imagetable` é que os links para as imagens podem ser links para imagens disponíveis online, links para vídeos do youtube (será utilizada a imagem de referência do vídeo), ou links de imagens compartilhadas através do Google Docs. Para este último caso, as imagens precisam estar compartilhadas como "Leitura por qualquer pessoa com o link".* Para criar a tabela, utilizamos a instrução: ```js tabela1 = imagetable(meusdados,"video"); ``` Contudo, isto criará uma tabela com 4 colunas, que ficará muito extensa ao longo do documento. Para reduzi-la, utilizaremos uma das propriedades disponíveis em `imagetable`, chamada `columns`: ```js tabela1 = imagetable(meusdados,"video", {columns: 8}); ```33:T901,Por fim, para exemplificar a pluralidade de interações possíveis para exibir informações como imagens coletadas em uma planilha, iremos criar duas tabelas sequenciais filtradas através de um campo aberto de texto, e navegáveis através de um `Range`. Na primeira tabela exibiremos apenas uma única linha com 3 imagens grandes; na tabela logo abaixo, uma relação de 16 imagens pequenas, para que seja possível se compreender a dimensão dos dados disponíveis. O primeiro passo desta visualização é criar, através de um `Inputs.search` aberto, o campo de entrada. Isso será feito com: ```js viewof dadosfiltrados_2 = Inputs.search(meusdados, { label: "Pesquisa aberta" }) ``` O segundo passo será a criação do `Range`: ```js viewof ponto = Inputs.range([0, dadosfiltrados_2.length - 3], { label: "Ponto", step: 1, value: 0 }) ``` *☞ Utilizamos como parâmetro final do `Range` o valor `dadosfiltrados_2.length-3`, pois ele pega o total de elementos nos dados, e subtrai 3 registros, para garantir que as últimas 3 imagens sejam exibidas na tabela.* Para as exibições, utilizaremos 2 outras propriedades de `imagetable`, a primeira, `index`, determina em que ponto da relação de dados a tabela deverá começar a exibir as imagens (o ponto de início); e a segunda, `size`, determina quantos elementos deverão ser exibidos no total. A primeira, com 3 elementos, será criada com: ```js tabela3 = imagetable( dadosfiltrados_2, "video", { columns: 3, type: 'contain', proportion: '4/3', index: ponto, size: 3 } ) ``` e a segunda tabela com 8 elementos, utilizando o mesmo valor inicial para `index` (`ponto`), e `8` para `size`: ```js tabela4 = imagetable( dadosfiltrados_2, "video", { columns: 8, proportion: '4/3', index: ponto, size: 8 } ) ``` Deixaremos a `tabela4` antes da `tabela3` no documento, para facilitar a visualização: 34:[] 30:{"id":"46f2ef673fc07adb","slug":"livroobservable-9","title":"Visualização de coleções de imagens","thumbnail":"7dbbb2586df6835411e9db38d831905bdcea0c7eeec6f5f2b1b7754c5734143b","access_level":"public","create_time":"$D2024-12-15T17:57:19.009Z","update_time":"$D2024-12-15T20:19:42.361Z","view_time":null,"first_public_time":"$D2024-12-15T17:57:19.009Z","fork":{"id":"fed322e656aaf70e","slug":"livroobservable-8","title":"Visualização de 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":1732,"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":0,"collection":{"id":"c90483f6f52506d9","slug":"livro-observable","title":"Livro - Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Visualização de coleções de imagens","cells":[{"id":0,"value":"# Visualização de coleções de imagens","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### Filtrando, visualizando e explorando coleções de referências visuais\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1321,"value":"Com o mesmo intuito de tratar e explorar dados de maneira mais aplicada, 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. Também utilizaremos a função `imagetable` da mesma biblioteca, capaz de exibir uma tabela de imagens no documento.\n\nPara incorporá-las, utilizaremos a instrução `import` do Observable:\n\n```js\nimport { gsdata, imagetable } from \"@ranoya/datat\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1325,"value":"import { gsdata, imagetable } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1329,"value":"Após importá-las, iremos capturar os dados da planilha para a variável `meusdados`:\n\n```js\nmeusdados = gsdata(\"https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit?gid=0#gid=0\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1333,"value":"meusdados = gsdata(\n \"https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit?gid=0#gid=0\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":1115,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"## Tabela completa de imagens","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1556,"value":"tabela1 = imagetable(meusdados, \"video\", { columns: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1563,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1710,"value":"Se esta tabela ficar muito grande (e como se vê nesse caso, ficou...), é possível inclui-la em um bloco HTML com *scroll* através da instrução abaixo:\n\n```js\nblocoHTML = html`\n

\n \\${imagetable(meusdados, \"video\", { columns: 8 })}\n

\n`\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1714,"value":"blocoHTML = html`\n

\n ${imagetable(meusdados, \"video\", { columns: 8 })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1724,"value":"*☞ No Observable, utilizamos a expressão `\\${ .... }` para incluir código e operações em javascript dentro dos códigos HTML ou Markdown*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1717,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1565,"value":"Para reduzir os elementos sendo visualizados, aplicaremos um filtro fixo com `Inputs.search`. Utilizaremos a expressão \"Quest\" sobre o conjunto de dados, reduzindo a relação aos elementos que possuem este termo no nome, ou como característica registrada em alguma das demais colunas dos dados. Para fazer isso, utilizaremos a instrução:\n\n```js\nviewof dadosfiltrados_1 = Inputs.search(meusdados, {\n label: \"Filtro Fixo\",\n query: \"Quest\",\n disabled: true\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1350,"value":"viewof dadosfiltrados_1 = Inputs.search(meusdados, {\n label: \"Filtro Fixo\",\n query: \"Quest\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1360,"value":"Se tratando de um conjunto menor, com apenas ${dadosfiltrados_1.length} registros, utilizaremos um quadro com menos colunas para exibi-los. Também utilizaremos algumas outras propriedades de `imagetable`, modificando a proporção da imagem, e garantindo que nenhuma parte mesma fique cortada na tabela. Para isso, adotaremos o valor `5` para `columns`, o valor `contain` para `type` (que garante que a imagem não fique cortada para preencher o espaço da tabela), e aplicaremos a proporção `4/3` em `proportion`:\n\n```js\ntabela2 = imagetable(\n dadosfiltrados_1, \n \"video\", \n {\n columns: 5,\n type: 'contain',\n proportion: '4/3'\n }\n )\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1364,"value":"tabela2 = imagetable(dadosfiltrados_1, \"video\", {\n columns: 5,\n type: \"contain\",\n proportion: \"4/3\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1584,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1642,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1382,"value":"viewof dadosfiltrados_2 = Inputs.search(meusdados, {\n label: \"Pesquisa aberta\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1590,"value":"viewof ponto = Inputs.range([0, dadosfiltrados_2.length - 3], {\n label: \"Ponto\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1606,"value":"tabela4 = imagetable(dadosfiltrados_2, \"video\", {\n columns: 8,\n proportion: \"4/3\",\n index: ponto,\n size: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1652,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1603,"value":"tabela3 = imagetable(dadosfiltrados_2, \"video\", {\n columns: 3,\n type: \"contain\",\n proportion: \"4/3\",\n index: ponto,\n size: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1660,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1700,"value":"Com o uso de código HTML é possível criar uma visualização mais sofisticada, incluindo as duas tabelas em espaços compartilhados de uma estrutura visual, como no exemplo abaixo:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1694,"value":"viewof ponto2 = Inputs.range([0, dadosfiltrados_2.length - 1], {\n label: \"Ponto2\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1688,"value":"\n \n \n\n \n\n \n

\n ${imagetable(dadosfiltrados_2, \"video\", {\n columns: 1,\n proportion: \"4/3\",\n index: ponto2,\n size: 1\n })}\n

\n ${imagetable(dadosfiltrados_2, \"video\", {\n columns: 1,\n proportion: \"4/3\",\n index: ponto2 + 1,\n size: 3\n })}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1702,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1704,"value":"O código usado para a criação desta estrutura é este abaixo:\n\n```html\n\n \n \n\n \n\n \n

\n \\${imagetable(dadosfiltrados_2, \"video\", {\n columns: 1,\n proportion: \"4/3\",\n index: ponto2,\n size: 1\n })}\n

\n \\${imagetable(dadosfiltrados_2, \"video\", {\n columns: 1,\n proportion: \"4/3\",\n index: ponto2 + 1,\n size: 3\n })}\n

\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1300,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"