2d:null 2e:["$","title",null,{"children":"Análise e visualizações interativas de dados na web com Observable - CODA.Br 2022 | Alexandre R. Cajazeira Ramos | Observable"}] 33:T484,# Análise e visualizações interativas de dados na web com Observable - CODA.Br 2022 Este ***Observable notebook*** constitui o material de apoio para a execução do Workshop **Análise e visualizações interativas de dados na web com Observable**, no [CODA.br 2022](https://escoladedados.org/coda/coda2022/), evento da [Escola de Dados](https://escoladedados.org/) que acontece entre os dias 31/10 e 3/11/22, na modalidade remota e entre os dias 5 E 6/11/22, na ESPM SÃO PAULO (Campus Álvaro Alvim). **Observable** é uma plataforma onde podemos **explorar, analisar e visualizar dados na Web** de maneira simples, interativa e eficaz. São diversos recursos previamente disponibilizados para não começar do zero: gráficos, mapas, filtros, seletores e outros componentes. Além disso, podemos facilmente reutilizar recursos e compartilhar resultados. Neste **workshop**, vamos **conhecer** as potencialidades da **plataforma**, demonstrando **como um iniciante** na programação web ou ciência de dados **pode utilizar este importante recurso em seu trabalho**, seja nas redações, projetos de inovação cívica ou outras iniciativas.34:T5bc,## Observable Plot Vamos conhecer a biblioteca de visualização previamente disponibilizada por aqui? [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot) é uma biblioteca JavaScript gratuita e de código aberto para que nos ajuda a visualizar rapidamente dados tabulares. O objetivo é promover uma API concisa e de fácil memorização para promover a fluência. Com a Plot criamos gráficos em segundos, em uma linguagem inspirada em ferramentas como Vega-Lite e ggplot2. Além disso, os gráficos seguem o fluxo do trabalho com dados do *Observable Notebook*, facilitando a interatividade, e podem ser facilmente customizados, gerando visualizações robustas e consistentes. Para saber mais sobre esta biblioteca gráfica, explore na documentação disponível conceitos como: * [Marcas e Canais](https://observablehq.com/@observablehq/plot-marks?collection=@observablehq/plot) * [Legendas](https://observablehq.com/@observablehq/plot-legends?collection=@observablehq/plot) * [Escalas](https://observablehq.com/@observablehq/plot-scales?collection=@observablehq/plot) * [Transformações](https://observablehq.com/@observablehq/plot-transforms?collection=@observablehq/plot) Assim como os Inputs que listamos acima, uma série de gráficos que utilizam Observable Plot, com seus respectivos códigos-exemplo, estão disponíveis na criação de uma nova célula em seu notebook. Vejamos alguns deles a seguir: 35:T7f6,s3 = md`# **D3js**: Como começar e por que utilizar? Para se ter domínio e liberdade na construção de visualizações interativas na Web, uma ferramenta consolidada, robusta e abrangente é a [D3js](https://d3js.org/), uma biblioteca *javascript* com foco nos dados capaz de colocar os padrões da Web e os recursos dos navegadores modernos à sua disposição. A biblioteca busca dar vida aos dados utilizando HTML, SVG e CSS. Entretanto, exige a compreensão de diferentes conceitos relacionados a estas tecnologias. Todavia, D3js fornece uma série de funcionalidades que podem nos ajudar no trabalho com dados, mesmo sem o domínio dos conceitos citados acima. Neste WorkShop, não trabalharemos expressamente com uma introdução à D3js, entretanto uma série de recursos disponibilizados pela biblioteca são muito utilizados, tais como: * [D3 Fetch](https://github.com/d3/d3-fetch/tree/v3.0.1): para ler dados em arquivos; * [D3 Statistics](https://github.com/d3/d3-array/blob/v3.2.0/README.md#statistics): para computar operações simples, como média, mínimo, máximo, dentre outros; * [D3 Time Format](https://github.com/d3/d3/blob/main/API.md#time-formats-d3-time-format): para manipular a formatação de datas; * [D3 Scales](https://github.com/d3/d3/blob/main/API.md#scales-d3-scale): para definição de diferentes tipos de escalas utilizadas para mapear valores, eixos ou cores. Ou seja, mapear valores em nossas codificações visuais. Os tópicos citados acima podem ser analisados em detalhes [neste link (D3 API Reference)](https://github.com/d3/d3/blob/main/API.md). E veremos a seguir alguns exemplos de sua utilização. Para **quem realmente quer aprender D3js**, vale começar por: * [Data Visualization with D3 – Full Course for Beginners [2022]](https://www.youtube.com/watch?v=xkBheRZTkaw&t=164s) / [Curran Kelleher](https://vizhub.com/curran) * [Introdução ao D3 com Observable](https://www.youtube.com/watch?v=Fc_se5aSu7c&list=PPSV) / [Emanuele Santos](https://emanueles.github.io/). `36:T42e,# Materiais de referência Abaixo estão listados os materiais que inspiraram este Workshop e que são recomendados para consolidar o aprendizado relacionado aos temas abordados na atividade. * [Introdução ao D3 com Observable](https://www.youtube.com/watch?v=Fc_se5aSu7c&list=PPSV), Por [Emanuele Santos](https://emanueles.github.io/). * [DataKind x Observable: Data Visualization Workshop](https://mobile.twitter.com/DataKind/status/1587870907682414593) * [Javascript Introduction](https://observablehq.com/@observablehq/learn-javascript-introduction?collection=@observablehq/tutorial) * [Observable’s not JS](https://observablehq.com/@observablehq/observables-not-javascript) * [Introduction to Imports](https://observablehq.com/@observablehq/import?collection=@observablehq/notebook-fundamentals) * [Introduction to require](https://observablehq.com/@observablehq/require?collection=@observablehq/javascript-in-observable) * [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code?collection=@observablehq/notebook-fundamentals)37:[{"id":"190120fd135cbc100fdc9f176718244330669b77514f848c816ab28560ca74ceaa147b338f031cf70b1ff193aa7999092790bd5d64660d227395bee8fcd0397e","href":"https://static.observableusercontent.com/files/190120fd135cbc100fdc9f176718244330669b77514f848c816ab28560ca74ceaa147b338f031cf70b1ff193aa7999092790bd5d64660d227395bee8fcd0397e","name":"resumo_brancos_nulos_abstencoes.csv","type":"text/csv","lastModified":1667575854721.1,"size":1169636},{"id":"373e0b2a60c381b01bc3bb8cb9f33dd9351046ee0c09654938f02a4f1c6445fb1db588012cee799d4263e2192d7dbc1f46fa5215aaf4edff5855f002b6bf6f82","href":"https://static.observableusercontent.com/files/373e0b2a60c381b01bc3bb8cb9f33dd9351046ee0c09654938f02a4f1c6445fb1db588012cee799d4263e2192d7dbc1f46fa5215aaf4edff5855f002b6bf6f82","name":"image.png","type":"image/png","lastModified":1667563919571.155,"size":113413}] 31:{"id":"cde639806bebccb1","slug":"workshop-codabr22","title":"Análise e visualizações interativas de dados na web com Observable - CODA.Br 2022","thumbnail":"dd584b41dd34491122f2d0e2698f4dc3af9d55f1e89a089d4103acc50b914107","access_level":"public","create_time":"$D2022-11-04T12:01:13.363Z","update_time":"$D2023-07-01T18:31:46.135Z","view_time":null,"first_public_time":"$D2022-11-04T14:18:45.834Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/24092c234c1e156d4478bb8314522bb1b37a8ec8ee43d8a161f6931e7d8e6bed","tier":"starter_2024"},"version":1793,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null}],"members":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Análise e visualizações interativas de dados na web com Observable - CODA.Br 2022","cells":[{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"# Agenda\n\n* 15:45 -> Apresentação e Motivação (*[Disponível neste slide](https://docs.google.com/presentation/d/1ipsrjGqMBfNxaozsvHlGTPykAXUb6ZNFNy6Wl1PH8is/edit?usp=sharing)*)\n* [15:55](#s1) -> Revisão *Javascript*: métodos para manipulação de *Arrays* (15min)\n* [15:55](#s2) -> **Introdução ao Observable** (15min)\n* [16:25](#s3) -> **D3js**: Como começar e por que utilizar? (15min)\n* [16:40](#s4) -> ***Hands-on***: Práticas e demonstrações dos conceitos apresentados\n* 17:00 -> Encerramento, perguntas e discussão \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"s1 = md`# Revisão *Javascript*: métodos para manipulação de Arrays\n\nPara construir visualizações interativas com o Observable não é necessário ter fluência em javascript, entretanto alguns conceitos-chave e alguma familiaridade com a sintaxe da linguagem são relevantes. \n\nRevisaremos aqui alguns desses conceitos, principalmente relacionados à definição e manipulação de *arrays* e objetos, que são fundamentais para o trabalho com dados. \n\n[Neste notebook](https://observablehq.com/@observablehq/learn-javascript-introduction?collection=@observablehq/tutorial) há um material mais detalhado, claro e direto sobre o que é necessário aprender de *Javascript* para começar a utilizar o *Observable*. Vale a leitura!\n\nExistem muitos tutoriais e materiais sobre *Javascript* na Web. Um livro amplamente recomendado, que conta inclusive com uma versão em Português da sua 2º edição, é o *Eloquent Javascript*, disponível [neste link](https://github.com/braziljs/eloquente-javascript).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"## Objects\n\nDe maneira simples e direta, um objeto em Javascript é definido por pares de chaves e valores (keys-values) entre chaves ({}). É uma estrutura de dados que representa objetos reais, com características e ações.\n\nPor exemplo: ***aluno = {nome:'joão', idade: 15}***\n\n**Nota:** Aqui no Observable, para definir um objeto em uma célula é preciso colocá-lo entre parênteses, pois cada célula tem um valor único que pode ser referenciado por todo o notebook (veremos este assunto a seguir). Para saber mais: [confira a documentação neste link](https://observablehq.com/@observablehq/introduction-to-code?collection=@observablehq/notebook-fundamentals).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1642,"value":"aluno = ({nome:'joão', idade: 15})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"aluno.nome","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"aluno.nome","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"aluno.nome=\"Outro Nome para o Aluno\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"aluno.nome","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"aluno.nota = 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"aluno","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"Object.keys(aluno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"Object.values(aluno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"Object.entries(aluno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"Object.entries(aluno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"## *Array*\n\nUm Array em javascript, de modo semelhante a outras linguagens, é uma estrutura de dados que nos permite armazenar uma coleção de informações em uma variável única, escrito como uma lista de valores separados por vírgulas, entre colchete e que possui uma série de métodos e operações preestabelecidas. \n\nAntes de verificar exemplos e operações, podemos pontuar sobre ***Arrays***: \n\n* São **redimensionáveis**, com operações para empilhar e desempilhar elementos;\n* São indexados e acessados por números inteiros, a partir do 0. E não são associativos, ou seja: não podemos acessá-los a partir de uma string arbitrária;\n* Podem conter uma combinação de itens de **diferentes tipos** de dados, inclusive objetos;\n* Ao trabalhar com ***datasets***, vamos manipular ***Arrays de objetos*** cotidianamente. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":914,"value":"array1 = ['oi', 100, {nome: 'João', idade:10}, ['outro array', 1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"array1[-1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"array_de_objetos = [\n {cidade: 'São Paulo', pop: 12330000},\n {cidade: 'Rio de Janeiero', pop: 6748000},\n {cidade: 'Salvador', pop: 2886698},\n {cidade: 'São Raimundo Nonato', pop: 35035}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1659,"value":"array_de_objetos.filter(c => c.pop > 1000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1665,"value":"array_de_objetos.map(c => c.pop/100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"## Métodos importantes: \n\nVamos nos concentrar, neste ponto, em alguns métodos que são relevantes para a manipulação de dados: \n\n* ***Push***: Adicionar um elemento ao array\n* ***Pop*** e ***shift***: Remover e acessar o último ou o primeiro elemento de um array, respectivamente;\n* ***ForEach***: Acessar todos os elementos de um array, um a um. \n* ***Filter***: Permite filtrar um array a partir de algumas condições. Em um array de objetos, podemos filtrar utilizando uma propriedade específica, por exemplo; \n* ***Map***: Permite criar um novo array utilizando uma função que manipula cada elemento do array original;\n* ***IndexOf***: Retorna o primeiro índice em que um elemento seja encontrado no array (-1 se o elemento não existir). \n* ***Includes***: Determina se algum elemento do array possui o valor passado como parâmetro.\n\nInformações detalhadas sobre estes ou outros métodos podem ser encontradas [neste link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1041,"value":"array_simples = [1, 3, 5, 6, 7, 8, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"array_simples.indexOf(55)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"array_simples.indexOf(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"array_simples.includes(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"{\n array_simples.push(55);\n return array_simples.pop(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"soma = {\n let s = 0; \n array_simples.forEach(n => {\n s += n;\n })\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"array_simples.filter(d => d>=0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"array_simples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"array_simples.map( n => {\n let prop = n/soma; \n return prop*100 + '%'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"-------\n\nAgora um exemplo com um ***Array de Objetos***:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":966,"value":"alunos = [\n {aluno: 'João', nota_1: 2, nota_2: 4},\n {aluno: 'Maria', nota_1: 10, nota_2: 9},\n {aluno: 'Pedro', nota_1: 8, nota_2: 10},\n {aluno: 'Davi', nota_1: 7, nota_2: 2},\n {aluno: 'Joana', nota_1: 7, nota_2: 3},\n {aluno: 'Marcela', nota_1: 7, nota_2: 8},\n {aluno: 'José', nota_1: 3, nota_2: 5} \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"alunos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"atribuicao_com_medias = {\n \n alunos.push({aluno: \"Pedro2\", nota_1: 7, nota_2:8})\n \n alunos.forEach((a, i) => {\n a.media = (a.nota_1 + a.nota_2)/2;\n a.id = i\n });\n \n return alunos;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"alunos.filter(a => a.media > 7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"alunos.map(a => \n `O aluno ${a.aluno} tirou ${a.media} e ficou ${ a.media>=7 ? 'aprovado':'reprovado;'}`\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"s2 = md`# Introdução ao Observable\n\nNeste seção vamos apresentar um pouco do comportamento dos notebooks e dos principais componentes da plataforma.\n\nPara saber mais, vale conferir os links:\n* [Why Observable](https://observablehq.com/@observablehq/why-observable/2)\n* [Observable overview](https://observablehq.com/@observablehq/observable-overview-video?collection=@observablehq/getting-started)\n* [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/overview)\n* [Tutorials](https://observablehq.com/tutorials)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"Em resumo, um notebook Observable é composto por células, que podem ser blocos de código, dados e tabelas, gráficos e outras visualizações, HTML ou Markdown e muito mais! \n\nCada célula possui um nome (de maneira semelhante a uma variável) e pode ser referenciada em todo documento. O legal é que sempre que seu valor for alterado, todos os lugares que fazem referência a esta célula são atualizados. Vejamos algumas operações simples abaixo: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"A = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"Esta célula, do tipo Markdown, faz referência ao valor A. Ele é igual a: **${A}.** \n\nAtualize o valor de **A** e verifique o que acontece! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1618,"value":"cor = 'red'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"celulaX = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"

Nesta célula html, estamos codificando um css com o valor da célula \"cor\", definida acima.

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1634,"value":"Agora vamos revisar alguns elementos gráficos que nos auxiliam no desenvolvimento dos notebooks: \n\n* Árvore de dependências e demais itens do menu à direita;\n* Onde fica o código e o valor de cada célula? Como deixar o código visível?\n* Como alterar o tipo de célula?\n* Comentários","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"## Observable Inputs\n\n[Observable Inputs](https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs) são componentes - como botões, sliders, checkboxes, menus ou tabelas - que nos ajudam na interatividade das nossas visualizações, gerenciando de maneira simples e direta o controle e interação do usuário. \n\nCada Input é declarado como um ***view***, associado a um elemento DOM com um **valor** que poderá ser referenciado em todo o notebook. Saiba mais em: ***[Hello Inputs](https://observablehq.com/@observablehq/hello-inputs), [Views](https://observablehq.com/@observablehq/views) e [Introduction to HTML](https://observablehq.com/@observablehq/introduction-to-html)***. \n\nAo criar uma nova célula em um notebook, uma série de códigos para criação destes *Inputs* já está disponível. \n\nVeremos os seguintes exemplos: ***Range; Checkbox; Radio; Select; Color***.\n\n-------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":557,"value":"### Range\n\nAo declarar um ***Range***, um valor numérico poderá ser referenciado em qualquer outra célula, seja ela HTML, Markdown, Javascript ou mesmo na definição de uma visualização. [Saiba mais neste link](https://observablehq.com/@observablehq/input-range).\n\nPor exemplo, no range abaixo temos o valor **${range}**.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1713,"value":"val_min = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"val_max = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"viewof range = Inputs.range([val_min, val_max], {label: \"Valor Selecionado\", step: 1, value:30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"circulo = htl.html`

Também é possível fazer referência ao valor de um input em células HTML, como neste exemplo:

\n\n

Vamos utilizar o valor do range acima (${range}) para codificar o raio de círculo

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"### CheckBox\n\nUm *Input* do tipo ***checkbox*** retorna um *Array* contendo todas as opções selecionadas. [Saiba mais neste link](https://observablehq.com/@observablehq/input-checkbox).\n\nEm sua definição, utilizamos um *array* para estabelecer as opções disponíveis. Este conjunto pode, naturalmente, estar associado ao conjunto de dados da análise e/ou codificar algum elemento de uma visualização. \n\nPor exemplo, abaixo os valores selecionados são: ${checkboxes.join('; ')}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":552,"value":"viewof checkboxes = Inputs.checkbox(opcoes, {label: \"Select some\", value: [\"A\", \"C\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"checkboxes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"opcoes = [\"A\", \"B\", \"C\", \"D\", \"E\",\"F\"] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"### Radio \n\nUm *Input* do tipo ***radio*** é utilizado para que o usuário possa selecionar uma opção única. [Saiba mais neste link](https://observablehq.com/@observablehq/input-radio).\n\nAbaixo, o dia selecionado é: ${radios}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":717,"value":"viewof radios = Inputs.radio(dias, {label: \"Selecione uma opção\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"dias = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"### Select\n\nDe maneira similar ao ***radio***, um *input* do tipo ***select*** permite que o usuário escolha uma entre as opções apresentadas (vinculadas, neste caso, ao mesmo *array* com os dias da semana, definido na célula acima). \n\nPor padrão, um ***select*** é um menu suspenso, tendo como valor inicial o primeiro elemento entre as opções disponíveis.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"viewof select = Inputs.select(dias, {label: \"Selecione um\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1735,"value":"viewof select1 = Inputs.select([\"A\", \"B\"], {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"Um ***select*** também pode assumir múltiplos valores. Neste caso, a variável terá como resultado um *array* com o conjunto de valores selecionados. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":756,"value":"viewof select2 = Inputs.select(dias, {label: \"Selecione vários\", multiple:3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"select2.map(d=> htl.html`

${d}

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"

A seguir definimos uma lista em HTML com o resultado do select:

\n\n

${d}

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"------- \n\nUm *select* pode, também, trabalhar com um ***Array*** de objetos (de um JSON, por exemplo), permitindo que possamos utilizar uma coluna para seleção e ter acesso a todas as informações relacionadas. Para isto, codificamos o parâmetro \"format\". Vejamos:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":791,"value":"array_obj = [\n {nome: 'João', idade: 21},\n {nome: 'Maria', idade: 24},\n {nome: 'Pedro', idade: 20},\n {nome: 'Isabel', idade: 19},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"viewof pessoa = Inputs.select(array_obj, {label: \"Selecione:\", format: p => p.nome})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"

A idade da pessoa selecionada é ${pessoa.idade}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"pessoa","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"No exemplo a seguir, vamos utilizar um dataset externo para exemplificar a utilizar de um select. \n\nOutras possibilidades estão disponíveis na documentação: [Saiba mais neste link](https://observablehq.com/@observablehq/input-select).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":843,"value":"estados_brasileiros = d3.csv(\"https://raw.githubusercontent.com/gabrielapcustodio/datasets/main/cod_sg_uf.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"colunas = estados_brasileiros.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"viewof estados_seleciconados = Inputs.select(estados_brasileiros, {\n label: \"Selecione um\",\n format: d=> d.NOME + ' ('+d.SIGLA+')'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"### Color\n\nOutro tipo de *Input* muito utilizado é o **seletor de cores**, que permite, dentre outras coisas, facilmente alterar o resultado das cores utilizadas em uma visualização até definir um valor final a ser utilizado. [Saiba mais neste link](https://observablehq.com/@observablehq/input-color).\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"viewof color = Inputs.color({label: \"Cor selecionada\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"

Nesta célula HTML utilizamos a cor definida acima para codificar o estilo de uma tag:

\n\n

\n\n\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1581,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.lineY(aapl, Plot.windowY({x: \"Date\", y: \"Close\", k: media_movel, reduce: \"mean\", stroke:\"red\"}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"viewof media_movel = Inputs.range([1, 100], {label: \"media_movel\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"Plot.plot({\n marks: [\n Plot.rectY(olympians, Plot.binX({y: \"count\"}, {x: \"weight\"})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"Plot.plot({\n color: {\n scheme: \"ylgnbu\"\n },\n marks: [\n Plot.hexagon(olympians, Plot.hexbin({fill: \"sum\"}, {x: \"weight\", y: \"height\"}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"Plot.plot({\n marks: [\n Plot.cell(weather.slice(-365), {\n x: d => d.date.getUTCDate(),\n y: d => d.date.getUTCMonth(),\n fill: \"temp_max\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"Plot.plot({\n y: {\n tickFormat: \"s\"\n },\n marks: [\n Plot.areaY(industries, {x: \"date\", y: \"unemployed\", fill: \"industry\"}),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"Plot.plot({\n marks: [\n Plot.voronoi(penguins, {x: \"culmen_depth_mm\", y: \"culmen_length_mm\", fill: \"species\", stroke: \"white\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"Plot.plot({\n marks: [\n Plot.boxX(olympians, {x: \"weight\", y: \"sport\", sort: {y: \"x\"}})\n ],\n marginLeft:100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"## Bônus: recursos legais disponibilizados por ai. \n\nUma das coisas mais legais do Observable é a infinidade de exemplos, bibliotecas e recursos disponibilizados pela plataforma e pela comunidade. Para finalizar esta seção, vale listar algumas delas: \n\n* [Summary Data](https://observablehq.com/@observablehq/summary-table)\n* [Plot Tooltip](https://observablehq.com/@mkfreeman/plot-tooltip)\n* [Navio](https://observablehq.com/@john-guerra/navio?collection=@john-guerra/navio)\n* [AutoSelect](https://observablehq.com/@jashkenas/inputs#autoSelectDemo)\n* [Multi-auto-select](https://observablehq.com/@john-guerra/multi-auto-select)\n* [Auto Resizing Embed](https://observablehq.com/@observablehq/auto-resizing-embed)\n* [Scrubber](https://observablehq.com/@mbostock/scrubber)\n* [Googlesheets](https://observablehq.com/@jerryjappinen/googlesheets)\n* [Categorical Legend Picker](https://observablehq.com/@zzzev/categorical-legend-picker)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"url_arquivo = \"https://raw.githubusercontent.com/datadoc-opovo/candidaturas-eleicoes-2022/main/arquivos-gerados/candidatos_ce_cor_raca_2014_2018_2022.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"arquivo = d3.csv(url_arquivo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"arquivo.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"arquivo.map(d=> +d['Quantidade de candidatos'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"d3.mean(arquivo.map(d=> +d['Quantidade de candidatos']))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"d3.mean(\n arquivo.filter(d=> d[\"Cor/Raça\"] == \"Indígena\").map(d=> +d['Quantidade de candidatos'])\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"escala_de_cores = d3.scaleOrdinal()\n .domain([\"Indígena\", \"Branca\", \"Parda\", \"Amarela\", \"Preta\"])\n .range(['#66c2a5','#fc8d62','#8da0cb','#e78ac3','#a6d854'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"escala_de_cores(\"Indígena\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"total_ano = d3.sum(arquivo.filter(d=> d.Ano == ano).map(d=> d[\"Quantidade de candidatos\"]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"viewof ano = Inputs.range(d3.extent(arquivo.map(d=> d.Ano)), {label: \"Ano\", step: 4})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"grafico = Plot.plot({\n \n marks: [\n Plot.barX(\n arquivo.filter(d=> d.Ano == ano), \n {\n x: \"Quantidade de candidatos\", \n y: \"Cor/Raça\", \n sort: {y: \"x\", reverse: true},\n title: d=> \n `${d[\"Quantidade de candidatos\"]} \n (${(d[\"Quantidade de candidatos\"]/total_ano*100).toFixed(2)}%)\n `,\n fill: d=> escala_de_cores(d[\"Cor/Raça\"])\n \n }\n ),\n Plot.ruleX([0])\n ],\n marginLeft:100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"s4 = md`# Hands-on -> Passo a passo com um exemplo de análise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"data_url = 'https://raw.githubusercontent.com/datadoc-opovo/violencia-domestica/master/baseExtra2021.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"dataset = d3.csv(data_url)\n .then(data => {\n data.forEach(d=> \n {\n d.AIS = d.AIS.replace('Não Identificada (Fortaleza)', 'N/I (Fort.)');\n d['Idade da Vítima'] = +d['Idade da Vítima'];\n d['Hora'] = +d['Hora']\n return d;\n }\n )\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"summary = SummaryTable(dataset)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"tabela_dos_dados = dataset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"tabela_dos_dados","database":"$undefined"},{"id":135,"value":"lista_ais = [... new Set(dataset.map(d=> d['AIS']))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"lista_dias = [\"Segunda\", \"Terça\", \"Quarta\", \"Quinta\", \"Sexta\", \"Sábado\", \"Domingo\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"viewof AIS = Inputs.select([\"Todas\"].concat(lista_ais.sort()), {label: \"Selecione uma AIS\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof dias_da_semana = Inputs.checkbox(lista_dias, {label: \"Dias considerados\", value: lista_dias})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"dataset_com_filtros = dataset.filter(\n d=> \n \n (AIS=='Todas' || d.AIS == AIS)\n && (dias_da_semana.includes(d['Dia da Semana']))\n\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"total_registros_com_filtro = dataset_com_filtros.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"filtro = total_registros_com_filtro != dataset.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"titulo = md`\n\n # No total, temos ${dataset.length} registros. \n ${filtro?`# Com o filtro: ${total_registros_com_filtro}.`:\"\"} \n ${AIS != \"Todas\"?`AIS selecionada: ${AIS}`:\"\"}\n ${dias_da_semana.length != 7?`\\n Dias selecionados: ${dias_da_semana.join('; ')+\";\"}`:\"\"}\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"g2_hist_idade = addTooltips(Plot.plot({\n marks: [\n Plot.rectY(dataset_com_filtros, Plot.binX({y: \"count\"}, {x: \"Idade da Vítima\", title:\"Idade da Vítima\", fill: color})),\n Plot.ruleY([0])\n ]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"resumo_por_raca = {\n \n let lista_racas = [... new Set(dataset_com_filtros.map(d=> d['Raça da Vítima']))] \n let dataset_resumo = [];\n let total = dataset_com_filtros.length;\n lista_racas.forEach(r => {\n \n let n = dataset_com_filtros.filter(d=> d['Raça da Vítima'] == r).length; \n dataset_resumo.push({\n 'Raça': r,\n 'Qtd': n, \n 'Pct': +(n/total*100).toFixed(2)})\n })\n \n return dataset_resumo\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof barGroup = Inputs.radio([\"Qtd\", \"Pct\"], {label: \"Como agrupar?\", value: \"Pct\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"g1_Raca = addTooltips(Plot.plot({\n marks: [\n Plot.barY(resumo_por_raca, {\n x: \"Raça\", \n y: barGroup, \n sort: {x: \"y\", reverse: true},\n title: d=> `${d.Raça}: ${d.Qtd} (${d.Pct}%)`,\n \n }),\n Plot.ruleY([0])\n ]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"# Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"