31: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) --- 32:T49f,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', 10) // Configura a posição y de cada barra .attr('width', 20) //Configura a largura de cada barra .attr('height', 160) // Configura a altura de cada barra .attr('fill', "DarkSlateGrey") // Configura a cor de preenchimento de cada barra // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }33:T613,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', 10) // Configura a posição y de cada barra .attr('width', 20) //Configura a largura de cada barra .attr('height', 160) // Configura a altura de cada barra .attr('fill', "Gold") // Configura a cor de preenchimento de cada barra // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }34:T46e,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', 200) // Configura a altura de cada barra .attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }35:T4b8,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 // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }36:[] 2f:{"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\n> **_D3 facilita a vinculação de dados de entrada a elementos do DOM._**","pinned":false,"hidden":false,"mode":"md"},{"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ã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"},{"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"},{"id":458,"value":"10 * 5 * 2","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":464,"value":"comida = \"pizza\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"E quem não gosta de ${comida}?","pinned":true,"hidden":false,"mode":"md"},{"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"},{"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"},{"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\n```\n selection = d3.select(\"body\");\n```\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** simplificam algumas tarefas de visualização.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":70,"value":"

Escreva Hello World abaixo:

\n \n

","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":75,"value":"{\n // d3.select(\"#parent\")\n // .append(\"p\")\n // .text(\"Hello World!\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":103,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"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\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"},{"id":117,"value":"

Célula html

","pinned":true,"hidden":false,"mode":"html"},{"id":119,"value":"{\n // escreva seu código aqui\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"## Selecionando múltiplos elementos\nPodemos selecionar mais de um elemento de uma vez:\n```javascript\nd3.selectAll(\"rect\") \n .attr(\"width\", \"200\"); \n```\n\n## Adicionando elementos\nO operador ``.append()`` cria um novo elemento com o nome dado e o adiciona como último filho de cada elemento da seleção.\n\nEsse operador retorna uma nova seleção contendo o elemento recém adicionado.","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"

\n \n

\n","pinned":true,"hidden":false,"mode":"html"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":249,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":293,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":352,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"## Ordenando dados\n\nCriamos uma função para comparar valores:","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"comparePorDespesa = (a, b) => a.despesa - b.despesa","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":407,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":86,"value":"### Importar a biblioteca D3 como um único objeto Javascript \nA biblioteca d3 já está disponível por padrão em notebooks Observable. No entanto, é possível importá-la e especificar uma versão específica da biblioteca em uma célula em qualquer posição do notebook, mas é mais comum no final do notebook Observable.\n\nPor exemplo, para importar a versão 5 do d3, usaríamos\n```\nd3 = require('d3@5')\n```","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"//d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"Outras utilidades para o tutorial:","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"key = c =>\n html`${c}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"greypin = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}