3e:null 3f:["$","title",null,{"children":"Introdução ao D3 com Observable (Parte 1) | fcmesquita's Workspace | Observable"}] 45:T5d6,### Operadores Além de **.text()**, outros operadores: * Configurando atributos: **.attr()** * Estilos: **.style()** * Propriedades: **.property()** * HTML: **.html()** Exemplos: * Configurar o atributo foo com o valor bar no elemento p ```javascript d3.select("p").attr("foo", "bar") ``` * Obter o atributo foo no elemento p ```javascript d3.select("p").attr("foo") ``` * Altera o tamanho da fonte do estilo do elemento p ```javascript d3.select("p").style("font-size", "10px") ``` Além de constantes, valores de operadores também podem ser funções: ```javascript d3.select("p").style("font-size", function(){ return normalFontSize + 10;}); ``` --- > 💡 **Diferença entre atributos e propriedades.** > > Caso você esteja se perguntando a diferença entre atributo e propriedade, normalmente atributos são definidos pelo HTML e propriedades são definidas pelo DOM (Document Object Model). > - Alguns atributos HTML possuem mapeamentos 1:1 a propriedades. `id` é um exemplo. > - Alguns atributos HTML não possuem propriedades correspondentes. `colspan` é um exemplo. > - Algumas propriedades DOM não possuem atributos correspondentes. `textContent` é um exemplo. > - Muitos atributos HTML parecem que são mapeados a propriedades, mas não do jeito esperado. Eles inicializam propriedades DOM e depois o mapeamento é desfeito. > > Para saber mais detalhes: [documentação Angular](https://angular.io/guide/binding-syntax#html-attribute-vs-dom-property) --- 46:T570,barras1 = { const width = 700 const height = 200 // DOM.svg() é um método específico do Observable para criar um elemento DOM SVG. const svg = d3.select(DOM.svg(width, height)) const arrayOfNumbers = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8] svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia) .data(arrayOfNumbers) // Vincula arrayOfNumbers com DOM elementos , produzindo seleções .enter(),.exit() .enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM .append('rect') // Para cada item de dado, adiciona um ao svg selecionado .attr('x', (d, i) => i * 30 + 20) // Configura a posição x de acordo com o índice do vetor .attr('y', (d) => 180 - d*2) // Configura a posição y de cada barra .attr('width', 20) //Configura a largura de cada barra .attr('height', (d) => d*2) // Configura a altura de cada barra .attr('fill', "DarkSlateGrey") // Configura a cor de preenchimento de cada barra svg.selectAll('text') .data(arrayOfNumbers) .enter() .append('text') .attr('x', (d, i) => i * 30 + 20) .attr('y', d => 178 - d*2) .text(d => d) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }47:T704,barras2 = { const width = 700 const height = 200 // DOM.svg() é um método específico do Observable para criar um elemento DOM SVG. const svg = d3.select(DOM.svg(width, height)) const dataset = [ {height: 10, color: 23},{height: 15, color: 33}, {height: 30, color: 40},{height: 50, color: 60}, {height: 80, color: 22},{height: 65, color: 10}, {height: 55, color: 5},{height: 30, color: 30}, {height: 20, color: 60},{height: 10, color: 90}, {height: 8, color: 10}] let colorScale = d3.scaleLinear() .domain([0, 100]) .range(["Khaki", "Gold"]); // Escala de cor svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia) .data(dataset) // Vincula arrayOfNumbers com DOM elementos , produzindo seleções .enter(),.exit() .enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM .append('rect') // Para cada item de dado, adiciona um ao svg selecionado .attr('x', (d, i) => i * 30 + 20) // Configura a posição x de acordo com o índice do vetor .attr('y', d => 180 - d.height*2) // Configura a posição y de cada barra .attr('width', 20) //Configura a largura de cada barra .attr('height', d => d.height*2) // Configura a altura de cada barra .attr('fill', d => colorScale(d.color)) // Configura a cor de preenchimento de cada barra svg.selectAll('text') .data(dataset) .enter() .append('text') .attr('x', (d, i) => i * 30 + 20) .attr('y', d => 178 - d.height*2) .text(d => d.height) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }48:T551,barras3 = { const width = 600 const height = 400 // DOM.svg() é um método específico do Observable para criar um elemento DOM SVG. const svg = d3.select(DOM.svg(width, height)) svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia) .data(dataset) // Vincula arrayOfNumbers com DOM elementos , produzindo seleções .enter(),.exit() .enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM .append('rect') // Para cada item de dado, adiciona um ao svg selecionado .attr('x', 10) // Configura a posição x de acordo com o índice do vetor .attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor .attr('height', 20) //Configura a largura de cada barra .attr('width', d => d.despesa * 2) // Configura a altura de cada barra .attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra svg.selectAll('text') .data(dataset) .enter() .append('text') .attr('y', (d, i) => i * 30 + 35) .attr('x', d => d.despesa*2 + 12) .text(d => d.despesa + ": " + d.categoria) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }49:T8e0,barras4 = { const width = 600 const height = 400 // DOM.svg() é um método específico do Observable para criar um elemento DOM SVG. const svg = d3.select(DOM.svg(width, height)) sorteddata.sort(comparePorDespesa) //aqui os dados são ordenados /* svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia) .data(sorteddata) // Vincula arrayOfNumbers com DOM elementos , produzindo seleções .enter(),.exit() .enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM .append('rect') // Para cada item de dado, adiciona um ao svg selecionado .attr('x', 10) // Configura a posição x de acordo com o índice do vetor .attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor .attr('height', 20) //Configura a largura de cada barra .attr('width', 200) // Configura a altura de cada barra .attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra */ svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia) .data(sorteddata) // Vincula arrayOfNumbers com DOM elementos , produzindo seleções .enter(),.exit() .enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM .append('rect') // Para cada item de dado, adiciona um ao svg selecionado .attr('x', 10) // Configura a posição x de acordo com o índice do vetor .attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor .attr('height', 20) //Configura a largura de cada barra .attr('width', d => d.despesa * 2) // Configura a altura de cada barra .attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra svg.selectAll('text') .data(sorteddata) .enter() .append('text') .attr('y', (d, i) => i * 30 + 35) .attr('x', d => d.despesa*2 + 12) .text(d => d.despesa + ": " + d.categoria) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }4a:[{"id":"8b99ce30433276d103c08805cb65c9c5b99b34b4849ae088d5193bc294bc7bf0f6355018de3fc628c49e590114b6ce645fe98dbf2bb267099be22d56512997f8","href":"https://static.observableusercontent.com/files/8b99ce30433276d103c08805cb65c9c5b99b34b4849ae088d5193bc294bc7bf0f6355018de3fc628c49e590114b6ce645fe98dbf2bb267099be22d56512997f8","name":"titanic - titanic.csv","type":"text/csv","lastModified":1694194732892.316,"size":61265}] 43:{"id":"6f3c0def95eb5563","slug":null,"title":"Introdução ao D3 com Observable (Parte 1)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-04T19:53:03.564Z","update_time":"$D2023-09-08T18:29:23.665Z","view_time":null,"first_public_time":"$D2023-09-04T19:53:03.564Z","has_unpublished_edits":null,"fork":{"id":"144e1b6afe72026b","slug":"introducao-ao-d3-com-observable-parte-1","title":"Introdução ao D3 com Observable (Parte 1)","owner":{"id":"6f9f0719fe133b18","login":"vis-ufc","name":"Data Visualization @ UFC-Brazil"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7d7e1bee765022b2","login":"fcmesquita-ws","name":"fcmesquita's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/c3ae2004f4a8c7e6e5c4504a2b9ad7238da63ed53d2669c370f147bbe4f29729","tier":"starter_2024","bio":"","following":false},"version":719,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d8ac65d8152078d","login":"fcmesquita","name":"fcmesquita","avatar_url":"https://avatars-next.observableusercontent.com/c6f4ad92f13d142ddca448615cb1aa9b0d71e83da28821b37dc2a860d2ae60f5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"5d8ac65d8152078d","login":"fcmesquita","name":"fcmesquita","avatar_url":"https://avatars-next.observableusercontent.com/c6f4ad92f13d142ddca448615cb1aa9b0d71e83da28821b37dc2a860d2ae60f5","tier":null,"role":"editor"},{"type":"team","id":"7d7e1bee765022b2","login":"fcmesquita-ws","name":"fcmesquita's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/c3ae2004f4a8c7e6e5c4504a2b9ad7238da63ed53d2669c370f147bbe4f29729","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":"Introdução ao D3 com Observable (Parte 1)","cells":[{"id":22,"value":"# Introdução ao D3 com Observable (Parte 1)\n\nEsse é o primeiro notebook de uma sequência de 3 notebooks.\n\nNesse notebook iremos aprender como usar o D3.\n## Visão geral\nD3 ou d3.js é uma biblioteca JavaScript declarativa para criação de visualizações cujo foco está nos dados.\nÉ interativa, rápida e flexível. No entanto todo esse poder do D3 exige que tenhamos conhecimento de detalhes de HTML, CSS e JavaScript. Mesmo que você ainda não tenha muito conhecimento, pode copiar e colar vários exemplos de códigos disponíveis na Web.\n\nO D3 facilita a vinculação de dados de entrada a elementos do DOM.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"## d3js.org\n* Autor principal: Mike Bostock.\n* Open source e também disponível no [GitHub](https://github.com/d3/d3).\n* Grande comunidade de usuários e muitos exemplos de aplicação.\n* Apresentada oficialmente na InfoVis 2011, com o artigo [D3: Data-Driven Documents](http://idl.cs.washington.edu/papers/d3).\n\n## O que o D3 faz\n\n* **Carrega** dados na memória do browser.\n* **Vincula** dados a elementos dentro do documento, criando novos elementos quando necessário.\n* **Transforma** os elementos interpretando o valor do dado associado ao elemento e alterando as suas propriedades visuais.\n* **Transiciona** elementos entre estados em resposta a entrada do usuário.\n\n## O que o D3 não faz\n**Não é uma biblioteca de gráficos (barras, pizza, linhas, etc).**\n\n* Não suporta browsers antigos.\n* Não esconde os seus dados originais.\n * Os dados são enviados para o browser do cliente.\n * Se os seus dados não podem ser compartilhados, não use D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Como usar esse Notebook\n* Comece **\"forking\"** esse notebook pelo botão no topo da página à direita. Isso irá permitir que você salve as alterações feitas nesse notebook.\n\n### Células\n\nPara ver o código ou o markdown por trás de um célula, clique nos três pontinhos do lado esquerdo de uma célula e clique em **edit**. Experimente com a célula abaixo.\n\n*Sempre que modificar o código, pressione ${key(\n \"Shift-Enter\"\n)} para executar o código. Você precisará fazer isso para que a maioria das visualizações apareça*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"10 * 5 * 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"\nClique o ${greypin} no lado esquerdo da célula para manter a janela de código aberta, mesmo que você não esteja com a seção selecionada.\n\nCélulas podem ter nomes. Isso permite que o valor de uma célula seja referenciado por outras células.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"comida = \"pizza\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"E quem não gosta de ${comida}?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"** Células seguem o modelo de execução de dataflow.**\n \nUma célula referenciando outra célula é avaliada novamente automaticamente quando o valor da referência é alterado. Por exemplo, altere a definição da variável \\`comida\\` acima e pressione pressione ${key(\n \"Shift-Enter\"\n)} para avaliá-la novamente.\n\nCélulas podem gerar elementos DOM (HTML, SVG, Canvas, WebGL, etc.). Você pode usar a API DOM padrão como \\`document.createElement\\`, ou usar a célula do tipo html:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"\n Esse é o template literal HTML.
\n Ele é usado para criar células com HTML.\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"*Essa foi apenas uma pequena introdução a notebooks Observable. Para saber mais, veja os links no final desse notebook.*\n\n---\n## Elementos básicos de D3\n\nO **operando** básico do d3 é uma **seleção**.\n * Conjunto selecionado de elementos consultados a partir do documento atual.\n\n**Operadores** atuam em seleções, modificando conteúdo.\n\n**Data joins** vinculam dados a elementos, produzindo subseleções **enter** e **exit** para criação e destruição de elementos correspondendo a dados.\n\n**Transições** animadas interpolam atributos e estilos em função do tempo.\n\n**Event handlers** para lidar com ações do usuário.\n\n**Módulos** simplificando algumas tarefas de visualização.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"## Seleções\n\nO D3 adota a API de seletores da W3C (a mesma utilizada pelo CSS e pelo jQuery) para identificar elementos para seleção:\n\n```\npela tag (\"tag\")\npela classe (\".class\")\npelo identificador (\"#id\")\npela tag com identificador (\"tag#id\")…\n```\n\nO namespace global d3 possui métodos ``select`` e ``selectAll`` para obter as seleções e aceitam os seletores acima.\n\n---\n💡 Para saber mais sobre seleções em D3, consulte este [link](https://bost.ocks.org/mike/selection/) e a [página da documentação](https://d3js.org/d3-selection/selecting).\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"### Selecionando um único elemento\nNo exemplo abaixo, iremos adicionar um elemento parágrafo (p) ao **div**. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"

Escreva Hello World abaixo:

\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"Primeiro selecionamos o div pelo seu id (parent), depois adicionamos o elemento p e por fim o texto “Hello world” é adicionado a ele, através do operador **.text().**\nDescomente as linhas dentro do bloco { } abaixo e execute a célula para ver o parágrafo adicionado à célula acima:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"{\n d3.select(\"#parent\")\n .append(\"p\")\n .text(\"Hello World2!\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"### Encadeando métodos\n\nD3 usa com frequência uma técnica chamada “chain syntax” (sintaxe de cadeia), na qual os métodos são encadeados com pontos “.”\n\nIsso permite executar várias operações em um único comando:\n```javascript\nd3.select(\"#parent\")\n .append(\"p\")\n .text(\"Hello World!\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"## Exercício\nModifique o código html da célula abaixo usando d3 na célula seguinte para:\nAdicionar um novo elemento ``div`` ao ``div`` com id *exercicio* contendo o seguinte estilo:\n```\nborder: 1px black solid\nbackground-color: LightYellow\npadding: 20px 0px 20px 0px\nfont-size: 24px\n```\nO novo div deve possuir id igual a **newDiv**.\n\nDepois adicione o parágrafo com o texto “Novo parágrafo!” ao elemento div com id newDiv.\nO resultado deve ser como o mostrado abaixo:\n\n![Novo parágrafo](https://github.com/emanueles/datavis-course/raw/master/assets/images/observable/intro1_exercicio1.png)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"

Célula html

\n \n

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"Descomente os comandos da célula abaixo para ver 3 quadrados azuis na célula acima.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"{\n //retorna uma seleção d3 do elemento svg dentro do elemento de classe selectall-example\n const svg = d3.select('.selectall-example').select(\"svg\") \n \n svg.append('rect')\n .attr(\"x\", \"50\")\n .attr(\"y\", \"50\")\n svg.append('rect')\n .attr(\"x\", \"300\")\n .attr(\"y\", \"50\")\n svg.append('rect')\n .attr(\"x\", \"550\")\n .attr(\"y\", \"50\")\n svg.selectAll('rect')\n .attr(\"width\", \"200\")\n .attr(\"height\", \"200\")\n .style('fill', 'SkyBlue')\n .style('stroke', '#777')\n .style('stroke-width', '1')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"## Lidando com dados\n\nEm Visualização de Dados, nós mapeamos **dados** a **elementos visuais**.\nEm D3, nós vinculamos **dados de entrada** a elementos no **DOM**.\nUsamos o operador ``.data()`` (mais detalhes à frente).\n\nD3 consegue lidar com diferentes tipos de dados:\n* Qualquer array de números, strings ou objetos; \n* Arquivos JSON (e GeoJSON);\n* Arquivos CSV;\n* Arquivos Texto;\n* Arquivos XML e \n* Arquivos HTML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"## O Padrão enter-update-exit\n\nÉ usado para definir a conexão entre dados e sua representação visual.\n\n![enter-exit-update](https://emanueles.github.io/datavis-course/assets/images/observable/intro1_enter_exit_update.png)\n\nDados ainda não vinculados produzem a seleção enter (**selection.enter**).\n\nItens de dados vinculados a elementos existentes produzem a seleção update (**selection.data**).\n\nElementos ainda não vinculados produzem a seleção exit (**selection.exit**).\n\n---\n💡 Mais recentemente, D3 incluiu o método chamado `.join()` que tenta simplificar o processo sem a perda de controle. Para mais detalhes, veja o notebook [selection.join](https://observablehq.com/@d3/selection-join)\n\n ---\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"## Vinculando um vetor a dados\nUsamos o operador ``.data()``.\n\nPodemos calcular os parâmetros da visualização a partir dos dados.\n\nNo exemplo abaixo, as barras estão com altura fixa, mas vamos usar os próprios valores do vetor para calcular a altura da barra. Podemos usar algo como:\n```javascript\n.attr('height', (d) => d*2) // Configura a altura da barra usando o próprio valor do dado\n``` \n\nTambém iremos ajustar a escala para posicionar as barras de forma correta e acrescentar labels com o valor de cada barra para ficar como a figura abaixo:\n![first bar chart](https://emanueles.github.io/datavis-course/assets/images/observable/intro1_barras1.png)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"## Vinculando um vetor de objetos\n\nQuando temos um vetor de objetos, podemos acessar os atributos de cada item de dado diretamente:\n```javascript\n.attr('height', (d) => d.height*2) // Configura a altura da barra usando o próprio valor do dado\n```\nIremos modificar o exemplo abaixo para alterar a altura e a cor das barras de acordo com a figura abaixo:\n\n![second bar chart](https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/images/observable/intro1_barras2.png)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"## Funções úteis para lidar com vetores de dados\n\nA seguir estão funções para: \n* Ordenar vetores\n* Calcular o mínimo e o máximo\n* Calcular média, mediana, somatório, etc.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"

const array = [3, 2, 11, 7, 6, 4, 10, 8, 15];

d3.min =>

d3.max =>

d3.extent =>

d3.sum =>

d3.median =>

d3.mean =>

array.sort(d3.ascending) =>

array.sort(d3.descending) =>

d3.quantile(array.sort(d3.ascending), 0.25) =>

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"{\n const array = [3, 2, 11, 7, 6, 4, 10, 8, 15];\n const div = d3.select(\".array-utils\")\n div.select(\"#min\").text(d3.min(array))\n div.select(\"#max\").text(d3.max(array));\n div.select(\"#extent\").text(d3.extent(array));\n div.select(\"#sum\").text(d3.sum(array));\n div.select(\"#median\").text(d3.median(array));\n div.select(\"#mean\").text(d3.mean(array));\n div.select(\"#asc\").text(array.sort(d3.ascending));\n div.select(\"#desc\").text(array.sort(d3.descending));\n div.select(\"#quantile\").text(\n d3.quantile(array.sort(d3.ascending), 0.25)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"## Carregando dados de arquivo\n\nO d3 possui diversas funções para carregar arquivos. Por exemplo, para ler um arquivo JSON, usamos d3.json:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"dataset = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/data.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"Para mais informações sobre carregar arquivos no Observable, veja [Introduction to data](https://observablehq.com/@observablehq/introduction-to-data).\n\nAbaixo vamos visualizar esse dataset com um gráfico de barras horizontal semelhante à figura mostrada abaixo.\n\n![third bar chart](https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/images/observable/intro_barras3.png)\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"## Ordenando dados\n\nCriamos uma função para comparar valores:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"comparePorDespesa = (a, b) => a.despesa - b.despesa","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"sorteddata = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/data.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"Depois usamos essa função para ordenar os dados, dentro da célula que gera a visualização como mostrado na figura aboixo:\n\n![fourth bar chart](https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/images/observable/intro_barras4.png)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"Ao concluir os exercícios, publique o seu fork, usando o botão **Publish** no topo direito da página.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"## Para aprender mais sobre Observable\n\nPara aprender mais sobre Observable, recomendo os seguintes notebooks:\n* [Manual do Usuário](https://observablehq.com/@observablehq/user-manual): *A seção **Start here** é obrigatória. Ela contém todos os notebooks relevantes para usar notebooks Observable.*\n* Uma série de [tutoriais em 3 partes](https://observablehq.com/@observablehq/tutorial)\n* Toda a [coleção introdutória de tutoriais](https://observablehq.com/collection/@observablehq/introduction).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":517,"value":"Essa é a parte 1. Prossiga para a parte 2:\n\n[Introdução ao D3 (Parte 2) - Escalas e Eixos](https://observablehq.com/@vis-ufc/introducao-ao-d3-parte-2-escalas-e-eixos)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"### Importar a biblioteca D3 como um único objeto Javascript \nIsso é possível no final de um notebook Observable, mas não em Javascript puro.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"Outras utilidades para o tutorial:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"key = c =>\n html`${c}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"greypin = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"await FileAttachment(\"titanic - titanic.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":679,"value":"titanic = FileAttachment(\"titanic - titanic.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"passenger_by_sex = {\n return [\n {\n \"sex\": \"male\",\n \"count\": titanic.reduce(\n (accumulator, object) => {\n return accumulator + (object.Sex==\"male\"?1:0);\n }\n , 0)\n },\n {\n \"sex\": \"female\",\n \"count\": titanic.reduce(\n (accumulator, object) => {\n return accumulator + (object.Sex==\"female\"?1:0);\n }\n , 0)\n }\n]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"usurio_db_client = DatabaseClient(\"Usuario\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"viewof toggle = Inputs.toggle({label: \"Active\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"Plot.plot({\n marks: [\n Plot.barY(passenger_by_sex, {x: \"sex\", y: \"count\"}),\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":701,"value":"x_{i} = \\frac {-b \\pm\\sqrt{\\Delta}} {2a} \\text{, onde } \\Delta = b^2 -4ac","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":706,"value":"Plot.plot({\n marks: [\n Plot.auto(titanic, {x: \"Sex\", fx: \"Survived\", color: \"#65a7ff\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"