31:T5fa,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] const maxOfNumbers = d3.max(arrayOfNumbers) 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 + 35) // Configura a posição x de acordo com o índice do vetor .attr('y', d => (maxOfNumbers - d) *2 + 30 ) // 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 + 45) .attr('y', d => (maxOfNumbers - d) *2 + 28 ) .attr('text-anchor', 'middle') .style("font", "bold 14px arial") .text(d=>d) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }32:T79d,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 let maxOfNumbers = d3.max(dataset.map(d=>d.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', (d, i) => i * 30 + 35) // Configura a posição x de acordo com o índice do vetor .attr('y', d => (maxOfNumbers - d.height) *2 + 30 ) // 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 + 45) .attr('y', d => (maxOfNumbers - d.height) *2 + 28 ) .attr('text-anchor', 'middle') .style("font", "bold 14px arial") .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() }33:T673,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*3) // Configura a altura de cada barra .attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra svg.selectAll('text') // 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('text') .attr('x', (d, i) => d.despesa*3 + 15) .attr('y', (d, i) => i * 30 + 35) .style('font', 'normal 14px arial') .text(d=>d.categoria) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }34:T67c,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) 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*3) .attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra svg.selectAll('text') // 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('text') .attr('x', (d, i) => d.despesa*3 + 15) .attr('y', (d, i) => i * 30 + 35) .style('font', 'bold 14px arial') .text(d=>d.categoria) // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }35:[] 2f:{"title":"Introdução ao D3 com Observable","cells":[{"id":22,"value":"md`# Introdução ao D3 com Observable\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":"ojs"},{"id":34,"value":"md`## 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":"ojs"},{"id":0,"value":"md`## 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":"ojs"},{"id":458,"value":"10 * 5 * 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"md` \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":"ojs"},{"id":464,"value":"comida = \"pizza\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`E quem não gosta de ${comida}?`","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"md`** 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 o template literal built-in \\`html\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"html`\n Esse é o template literal HTML.
\n Ele é usado para criar células com HTML.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`\n*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":"ojs"},{"id":58,"value":"md`## 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`### Selecionando um único elemento\nNo exemplo abaixo, iremos adicionar um elemento parágrafo (p) ao **div**. \n\nPrimeiro 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().**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"html`\n

Escreva Hello World abaixo:

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"{\n d3.select(\"#parent\")\n .append(\"p\")\n .text(\"Hello World!\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`### 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 “.”. Isso permite executar várias operações em um único comando:\n\\`\\`\\`javascript\nd3.select(\"#parent\")\n .append(\"p\")\n .text(\"Hello World!\");\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`### Operadores\n\nAlém de **.text()**, outros operadores:\n\n* Configurando atributos: **.attr()**\n* Estilos: **.style()**\n* Propriedades: **.property()**\n* HTML: **.html()**\n\nExemplos:\n* Configurar o atributo foo com o valor bar no elemento p\n\\`\\`\\`javascript\nd3.select(\"p\").attr(\"foo\", \"bar\")\n\\`\\`\\`\n \n* Obter o atributo foo no elemento p\n\\`\\`\\`javascript\nd3.select(\"p\").attr(\"foo\")\n\\`\\`\\`\n* Altera o tamanho da fonte do estilo do elemento p\n\\`\\`\\`javascript\nd3.select(\"p\").style(\"font-size\", \"10px\")\n\\`\\`\\`\n\nAlém de constantes, valores de operadores também podem ser funções:\n\\`\\`\\`javascript\nd3.select(\"p\").style(\"font-size\", function(){\n return normalFontSize + 10;});\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`## 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://emanueles.github.io/datavis-course/assets/images/observable/intro1_exercicio1.png)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"html`\n

Célula html

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n // escreva seu código aqui\n d3.select(\"#exercicio\")\n .append(\"div\")\n .attr(\"id\",\"newDiv\")\n .style(\"border\", \"1px black solid\")\n .style(\"background-color\",\"LightYellow\")\n .style(\"font-size\",\"24px\")\n .append(\"p\")\n .text(\"Novo parágrafo!\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`## 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":"ojs"},{"id":143,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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":"md`## 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":"ojs"},{"id":237,"value":"md`## 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**).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`## 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":"ojs"},{"id":249,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`## 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":"ojs"},{"id":293,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`## 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":"ojs"},{"id":339,"value":"html`\n

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":"ojs"},{"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":"md`## 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":"ojs"},{"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":"md`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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`## Ordenando dados\n\nCriamos uma função para comparar valores:`","pinned":false,"hidden":false,"mode":"ojs"},{"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":"md`Depois usamos essa função para ordenar os dados:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"sorteddata.sort(comparePorDespesa)","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"md` 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":"ojs"},{"id":450,"value":"md`## 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":"ojs"},{"id":86,"value":"md `### 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":"ojs"},{"id":81,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`Outras utilidades para o tutorial:`","pinned":false,"hidden":false,"mode":"ojs"},{"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":"$W35","stdlib":"1","titling":"auto"}