25:["$","title",null,{"children":"18º Congresso da ABRAJI - Are web technologies like HTML, CSS and SVGs useful for journalism? | Gabriela Ferrarez | Observable"}] 49:T48a,# Revisão *Javascript*: métodos para manipulação de Arrays Para 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. Revisaremos aqui alguns desses conceitos, principalmente relacionados à definição e manipulação de *arrays* e objetos, que são fundamentais para o trabalho com dados. [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! Existem 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). *Este trecho é uma adaptação de um curso ministrado pelo mesmo autor. Disponível [neste link](https://observablehq.com/@cajazeiraramos/workshop-codabr22).* 4a:T6fe,## Observable Plot Vamos conhecer a biblioteca de visualização previamente disponibilizada por aqui? [Observable Plot](https://observablehq.com/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) Um excelente material introdutório, em português, foi desenvolvido pelo professor Adolfo Guimarães e está disponível nos links: [Introdução à Observable Plot](https://observablehq.com/@adolfoguimaraes/introducao-a-observable-plot) e [Visualização de Dados Eleitorais utilizando a API Plot](https://observablehq.com/@adolfoguimaraes/codabr22-workshop). 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: 4b:T7d9,# **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](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/). 4c:T442,------ ## O que acha de explorar outra base de dados? Essa é uma sugestão de trabalho para consolidar o aprendizado. ------- O Instituto Brasileiro de Geografia e Estatística (IBGE) publicou recentemente dados do Censo 2022. Disponibilizei, [nesta planilha](https://docs.google.com/spreadsheets/d/1slcmy2k1tDLs7iOJjGXiyuEzcxy9L70im40Q9opXCFU/edit?usp=sharing), a tabela [População de 2010 compatibilizada a partir da Base Territorial 2022, por município](https://www.ibge.gov.br/estatisticas/sociais/populacao/22827-censo-demografico-2022.html?edicao=37225&t=resultados) que apresenta, para cada município Brasileiro, a população em 2010, a população registrada em 2010 com as atualizações relacionadas à atualizações territoriais e a população atual (2022). Você é capaz de responder, com essa base, qual cidade mais cresceu? E qual estado? Para utilizar a base, digite: ``` d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vTjJ8tPoQuaGqJHJRiODW00HK-btRdjwNjxWo847dgRnbqsOrufG7m58nXU0hMXXrLvOaaezNhZwhsm/pub?gid=1609651089&single=true&output=csv') ```4d: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)4e:[] 29:{"id":"9e6975052acbd95f","slug":null,"title":"18º Congresso da ABRAJI - Are web technologies like HTML, CSS and SVGs useful for journalism? ","thumbnail":"e5399a21707c33db177727d171eb4498403f042c592eea0ec23ab4c50433def5","access_level":"public","create_time":"$D2023-07-02T18:50:56.873Z","update_time":"$D2023-07-02T18:51:11.361Z","view_time":null,"first_public_time":"$D2023-07-02T18:50:56.873Z","has_unpublished_edits":null,"fork":{"id":"0d56f9ac618633b2","slug":"18-congresso-da-abraji","title":"18º Congresso da ABRAJI - Are web technologies like HTML, CSS and SVGs useful for journalism? ","owner":{"id":"12d91e1495a7a094","login":"alexandre-opovo","name":"Alexandre Cajazeira"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bca2ddbe19986e9a","login":"gabrielaferrarez","name":"Gabriela Ferrarez","avatar_url":"https://avatars-next.observableusercontent.com/15e0705abc0a40a10583088a6ff3b8b394944bc468c29121bca4275d83476e18","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":744,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"df0315881d63116a","login":"ferrarezgabriela","name":"Gabriela Ferrarez Figueiredo","avatar_url":"https://avatars-next.observableusercontent.com/95abc04f3fb70e3758e84115b6626d0ea4e7b6ccc4cf0d193c63a59f0823d36f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"df0315881d63116a","login":"ferrarezgabriela","name":"Gabriela Ferrarez Figueiredo","avatar_url":"https://avatars-next.observableusercontent.com/95abc04f3fb70e3758e84115b6626d0ea4e7b6ccc4cf0d193c63a59f0823d36f","tier":null,"role":"editor"},{"type":"team","id":"bca2ddbe19986e9a","login":"gabrielaferrarez","name":"Gabriela Ferrarez","avatar_url":"https://avatars-next.observableusercontent.com/15e0705abc0a40a10583088a6ff3b8b394944bc468c29121bca4275d83476e18","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"18º Congresso da ABRAJI - Are web technologies like HTML, CSS and SVGs useful for journalism? ","cells":[{"id":0,"value":"# 18º Congresso da ABRAJI - _Are web technologies like HTML, CSS and SVGs useful for journalism? _\n\nAlexandre Cajazeira","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"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: ***pessoa = {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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"pessoa = ({nome:'João', idade: 27})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"pessoa.nome","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Atualizando uma característica: \n// aluno.nome = 'José'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"keys = Object.keys(pessoa)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"values = Object.values(pessoa)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"Object.entries(pessoa)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"É possível apresentar valores de variáveis também em um _Markdown_, em um gráfico ou em outros elementos. \n\n### A \"pessoa\" em questão, por exemplo, se chama **${pessoa.nome}**\n\nVamos alterar o nome desta pessoa e testar o comportamento do notebook? \n\nExecute o código: ``` pessoa.nome = \"João\"```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"pessoa.nome = \"João\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"array1 = ['oi', 100, {nome: 'João', idade:10}, ['outro array', 1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"array1[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"array1[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"array1[-1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"array_de_objetos = [\n {cidade: 'São Paulo', pop: 12330000, area:\t1521},\n {cidade: 'Rio de Janeiro', pop: 6748000, area:1200},\n {cidade: 'Salvador', pop: 2886698, area:\t693},\n {cidade: 'São Raimundo Nonato', pop: 35035, area:2415}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"array_de_objetos.filter(d => )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"// array_de_objetos.map(cidade => md`${cidade.cidade} tem ${cidade.pop} `)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"// array_de_objetos.filter(c => c.pop > 3000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"// array_de_objetos.map(c => (c.pop/c.area))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// array_de_objetos.map(c => (c.pop/c.area))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"// array_de_objetos.forEach(d => d.densidade = d.pop/d.area)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"// array_de_objetos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"array_simples = [1, 3, 5, 6, 7, 8, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"array_simples.indexOf(55)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"array_simples.at(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"// array_simples.indexOf(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// array_simples.includes(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"array_simples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"{\n array_simples.push(55);\n return array_simples.pop(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"array_de_objetos.map(e => e.pop/e.area)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"Por fim, uma estrutura javascript importante é o tipo \"Set\" (Conjunto), que permite o armazenamento de valores únicos (não repetidos, portanto) de qualquer tipo (Objetos, string, float, etc). Com um set, é possível verificar os valores únicos em uma coluna de uma base de dados, por exemeplo. Vejamos:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"array_de_objetos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"array_de_objetos.push({cidade:'São Paulo', pop:12330000})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"array_de_objetos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"array_de_objetos.map(d=> d.cidade)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"[... new Set(array_de_objetos.map(d=>d.cidade))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"# 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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"A = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"cor = 'red'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":254,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"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).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"min = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"max = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof range = Inputs.range([min, max], {label: \"Seleção\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"Aqui (Markdown) podemos verificar a atualização do valor no range acima: ${range}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"opcoes = ['A', 'B', 'C', 'D']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof checkboxes = Inputs.checkbox(opcoes, {label: \"Select some\", value: [\"A\", \"C\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"viewof radios = Inputs.radio(dias, {label: \"Selecione uma opção\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"dias = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"viewof select = Inputs.select(dias, {label: \"Selecione um\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"O dia selecionado foi ${select}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":314,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"viewof select2 = Inputs.select(dias, {label: \"Selecione vários\", multiple:5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"select2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"

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

\n\nAproveite para examinar o código :)\n\n

${d}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"viewof pessoa_selecionada = Inputs.select(array_obj, {label: \"Selecione:\", format: p => p.nome})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"pessoa_selecionada","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"

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

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":362,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"estados_brasileiros = d3.csv(\"https://raw.githubusercontent.com/gabrielapcustodio/datasets/main/cod_sg_uf.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"viewof estados_seleciconados = Inputs.select(estados_brasileiros, {\n label: \"Selecione um\",\n format: d=> d.NOME + ' ('+d.SIGLA+')'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"viewof color = Inputs.color({label: \"Cor selecionada\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"

Nesta célula HTML utilizamos a cor definida acima (${color}) para codificar o estilo de uma tag:

\n\n

\n\n\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"viewof media_movel = Inputs.range([1, 100], {label: \"media_movel\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"Plot.dot(olympians, {\n x: \"weight\",\n y: \"height\",\n stroke: \"sex\",\n channels: {name: \"name\", sport: \"sport\"},\n tip: true\n}).plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"Treemap(flare, {\n path: (d) => d.name.replaceAll(\".\", \"/\"), // e.g. flare/animate/Easing\n label: (d) => d.name.split(\".\").pop(), // display text\n group: (d) => d.name.split(\".\")[1], // for color; e.g. animate\n value: (d) => d?.size, // area of each rect\n title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), // hover text\n width,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"import {Treemap} from \"@d3/treemap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":450,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"arquivo = d3.csv(url_arquivo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"arquivo.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"arquivo.map(d=> +d['Quantidade de candidatos'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"d3.mean(arquivo.map(d=> +d['Quantidade de candidatos']))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"// // E a média de candidatos por raça? \n\n\nd3.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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"Plot.plot({\n marks: [\n Plot.barX(arquivo, {x: \"Quantidade de candidatos\", y: \"Cor/Raça\", sort: {y: \"x\", reverse: true}}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"escala_de_cores(\"Indígena\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"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 height:300,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":490,"value":"# Hands-on -> Passo a passo com um exemplo de análise","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"Coletando os dados:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":542,"value":"data_url = 'https://raw.githubusercontent.com/datadoc-opovo/violencia-domestica/master/baseExtra2021.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"summary = SummaryTable(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"lista_ais = [... new Set(dataset.map(d=> d['AIS']))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"lista_dias = [\"Segunda\", \"Terça\", \"Quarta\", \"Quinta\", \"Sexta\", \"Sábado\", \"Domingo\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"viewof AIS = Inputs.select([\"Todas\"].concat(lista_ais.sort()), {label: \"Selecione uma AIS\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"total_registros_com_filtro = dataset_com_filtros.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"filtro = total_registros_com_filtro != dataset.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"viewof barGroup = Inputs.radio([\"Qtd\", \"Pct\"], {label: \"Como agrupar?\", value: \"Pct\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":642,"value":"// dados_censo = d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vTjJ8tPoQuaGqJHJRiODW00HK-btRdjwNjxWo847dgRnbqsOrufG7m58nXU0hMXXrLvOaaezNhZwhsm/pub?gid=1609651089&single=true&output=csv').then(\n// data => {\n// function variacao(VF, VI){\n// return (VF/VI-1)*100;\n// }\n// data.forEach(\n// d=> \n// {\n// d['pop2010'] = +d['pop2010'];\n// d['pop2022'] = +d['pop2022'];\n// d['pop_2010_att'] = +d['pop_2010_att'];\n// d.var = variacao(d.pop2022, d.pop_2010_att);\n// }\n \n// )\n// return data;\n// });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"// d3.group(dados_censo, d => d.uf)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"// d3\n// .rollups(\n// dados_censo,\n// pop2010 => d3.sum(pop2010, x => x.pop2010),\n// d => d.uf \n// ).map(([k, v]) => ({ UF: k, Pop2010: v }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null