Engineer at RisingStack, interested in JS, Golang,. net Core.
recentemente, tivemos o prazer de participar de um projeto de aprendizagem de máquinas que envolve bibliotecas como Reat e D3.js. Entre muitas tarefas, eu desenvolvi poucos gráficos que ajudam a processar o resultado de modelos ML, como Bayes ingênuos em forma de um gráfico de linhas ou gráfico de barras agrupadas.,neste artigo, gostaria de apresentar o meu progresso com o D3.js até agora e mostrar o uso básico da biblioteca através do exemplo simples de um gráfico de barras.
Depois de ler este artigo, você vai aprender a criar D3.gráficos js como este facilmente:
o código fonte completo está disponível aqui.
nós em RisingStack gostamos do ecossistema JavaScript, infra-estrutura e desenvolvimento front-end também. Pessoalmente, estou interessado em ambos., Na infra-estrutura, eu posso ver através da lógica de negócio subjacente de uma aplicação, enquanto eu também tenho a oportunidade de criar coisas incríveis olhando na frente. É onde o D3.o js entra em cena!
Update: a 2nd part of my D3.js tutorial series is available as well: Building a D3.js Calendar Heatmap (to visualize Stackoverflow Usage Data)
What is D3.js?
D3.js é uma biblioteca JavaScript de dados para manipular elementos DOM.
“D3 ajuda você a trazer dados para a vida usando HTML, SVG e CSS., A ênfase do D3 nos padrões web dá-lhe todas as capacidades dos navegadores modernos sem se ligar a um framework proprietário, combinando componentes de visualização poderosos e uma abordagem baseada em dados à manipulação do DOM.”- d3js.org
Por que você criaria gráficos com D3.js em primeiro lugar? Porque não mostrar uma imagem?
bem, os gráficos são baseados em informações provenientes de recursos de terceiros que requerem visualização dinâmica durante o tempo de renderização. Além disso, SVG é uma ferramenta muito poderosa que se encaixa bem neste caso de Aplicação.,
vamos fazer um desvio para ver quais os benefícios que podemos obter com o uso de SVG.
the benefits of SVG
SVG stands for Scalable Vector Graphics which is technically an XML based markup language.
é comumente usado para desenhar gráficos vetoriais, especificar linhas e formas ou modificar imagens existentes. Você pode encontrar a lista de elementos disponíveis aqui.
Pros:
- suportado em todos os navegadores principais;
- Tem interface DOM, não requer nenhuma lib de terceiros;
- escalável, pode manter uma resolução elevada;
- tamanho reduzido em comparação com outros formatos de imagem.,
Cons:
- Ele só pode exibir imagens bidimensionais;
- curva de aprendizagem longa;
- renderizar pode demorar muito com operações intensivas em computação.
apesar das suas desvantagens, SVG é uma grande ferramenta para mostrar ícones, logotipos, ilustrações ou, neste caso, gráficos.
começar com D3.js
escolhi um gráfico de barras para começar porque representa um elemento visual de baixa complexidade enquanto ensina a aplicação básica de D3.js em si. Isto não deve enganá-lo, D3 fornece um grande conjunto de ferramentas para visualizar dados., Confira sua página github para alguns casos de uso realmente bom!
um gráfico de barras pode ser horizontal ou vertical com base na sua orientação. Eu vou com a vertical, também conhecida como Tabela de colunas.
neste diagrama, eu vou mostrar as 10 linguagens de programação mais amadas com base no resultado da pesquisa de desenvolvimento da Stack Overflow em 2018.
tempo para desenhar!
SVG tem um sistema de coordenadas que começa do canto superior esquerdo (0;0). O eixo x positivo vai para a direita, enquanto o eixo y positivo vai para o fundo., Assim, a altura do SVG tem que ser tomada em consideração quando se trata de calcular a coordenada y de um elemento.
isso é suficiente verificação de fundo, vamos escrever algum código!
quero criar um gráfico com 1000 pixels de largura e 600 pixels de altura.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>No trecho de código acima, eu selecionar o criado. <svg> elemento no arquivo HTML com d3 select. Este método de selecção aceita todos os tipos de strings do selector e devolve o primeiro elemento correspondente., Use selectAll se você gostaria de obter todos eles.
também define um valor de margem que dá um pouco de enchimento extra ao gráfico. Padding can be applied with a <g> element translated by the desired value. A partir de Agora, eu atraio este grupo para manter uma distância saudável de qualquer outro conteúdo da página.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);adicionar atributos a um elemento é tão fácil como chamar o método attr. O primeiro parâmetro do método leva um atributo que eu quero aplicar ao elemento DOM selecionado., O segundo parâmetro é o valor ou uma função de callback que retorna o valor dela. O código acima simplesmente move o início do gráfico para a posição (60;60) do SVG.
suportou D3.formatos de entrada js
para começar a desenhar, preciso de definir a fonte de dados de que estou a trabalhar. Para este tutorial, eu uso um array javascript simples que contém objetos com o nome das linguagens e suas taxas de porcentagem, mas é importante mencionar que D3.js suporta múltiplos formatos de dados.
a biblioteca tem funcionalidade incorporada para carregar a partir de XMLHttpRequest,.ficheiros csv, ficheiros de texto, etc., Cada uma destas fontes pode conter dados que D3.js pode usar, a única coisa importante é construir um array a partir deles. Note que, a partir da versão 5.0, a biblioteca usa promessas em vez de callbacks para carregar dados que são uma mudança não-backward compatível.
escala, eixos
vamos continuar com os eixos do gráfico. A fim de desenhar o eixo y, eu preciso definir o limite de valor mais baixo e mais alto que, neste caso, são 0 e 100.
estou a trabalhar com percentagens neste tutorial, mas existem funções de utilidade para tipos de dados diferentes dos números que vou explicar mais tarde.,
I tem que dividir a altura do Gráfico entre estes dois valores em partes iguais. Para isso, eu crio algo que é chamado de função de escala.
const yScale = d3.scaleLinear() .range() .domain();Linear scale is the most commonly known scaling type. Ele converte um domínio de entrada contínua em uma faixa de saída contínua. Notice the range and domain method. O primeiro leva o comprimento que deve ser dividido entre os limites dos valores do domínio.,
lembre-se, o sistema de coordenadas SVG começa a partir do canto superior esquerdo.é por isso que o intervalo leva a altura como o primeiro parâmetro e não zero.
criar um eixo à esquerda é tão simples como adicionar outro grupo e chamar D3’s axisLeft método com a função de escala como um parâmetro.
chart.append('g') .call(d3.axisLeft(yScale));agora, continue com o eixo dos X.
esteja ciente de que eu uso scaleBand para o eixo dos x, o que ajuda a dividir o intervalo em faixas e calcular as coordenadas e larguras das barras com estofamento adicional.
D3.,js também é capaz de lidar com o tipo de data, entre muitos outros. scaleTime é realmente semelhante ao scaleLinear exceto que o domínio é aqui uma matriz de datas.
barras de desenho em D3.js
pense sobre o tipo de entrada que precisamos para desenhar as barras. Cada um deles representa um valor que é ilustrado com formas simples, especificamente retângulos. No próximo excerto de código, adiciono-os ao elemento de grupo criado.
primeiro, I selectAll elementos no gráfico que retorna com um conjunto de resultados vazio., Então, data função diz Quantos elementos o DOM deve ser atualizado com base no comprimento do array. enter identifica os elementos que faltam se a entrada de dados for maior do que a selecção. Isto retorna uma nova seleção representando os elementos que precisam ser adicionados. Usually, this is followed by an append which adds elements to the DOM.basicamente, digo ao D3.js para adicionar um retângulo para cada membro do array.
agora, isto só adiciona retângulos em cima uns dos outros que não têm altura ou largura., Estes dois atributos têm de ser calculados e é aí que as funções de escala vêm a calhar novamente.
Veja, eu adiciono as coordenadas dos retângulos com o attr call. O segundo parâmetro pode ser um callback que leva 3 parâmetros: o membro real dos dados de entrada, o índice dele e toda a entrada.
.attr(’x’, (actual, index, array) => xScale(actual.value))a função de escala devolve a coordenada para um dado valor do domínio. Calculando as coordenadas são um pedaço de bolo, o truque é com a altura da barra., A coordenada y calculada tem de ser subtraída da altura do gráfico para obter a representação correcta do valor como uma coluna.
I define a largura dos retângulos com a função de escala também. scaleBandtem uma funçãobandwidth que devolve a largura calculada para um elemento com base no conjunto de enchimento.
Bom trabalho, mas não tão extravagante, certo?
para evitar que o nosso público Sangre dos olhos, vamos adicionar alguma informação e melhorar os visuais!, 😉
dicas sobre como fazer gráficos de barras
Existem algumas regras básicas com gráficos de barras que vale a pena mencionar.
- Evitar o uso de efeitos 3D;
- pontos de dados de ordem intuitivamente – alfabeticamente ou ordenados;
- manter a distância entre as bandas;
- iniciar o eixo y em 0 e não com o valor mais baixo;
- Usar cores consistentes;
- adicionar etiquetas do eixo, título, linha de origem.
D3.js Grid System
I want to realce the values by adding grid lines in the background.,vá em frente, experimente com linhas verticais e horizontais, mas o meu conselho é mostrar apenas uma delas. Linhas excessivas podem distrair. Este excerto de código apresenta como adicionar ambas as soluções.
eu prefiro as linhas verticais da grelha neste caso porque eles conduzem os olhos e manter a imagem geral simples e simples.
etiquetas em D3.js
i also want to make the diagram more comprehensive by adding some textual guidance. Vamos dar um nome ao gráfico e adicionar etiquetas para os eixos.,
textos são elementos SVG que podem ser anexados à SVG ou grupos. Eles podem ser posicionados com coordenadas x e y enquanto o alinhamento de texto é feito com o atributo . Para adicionar o próprio rótulo, basta chamar text método no elemento texto.
interactividade com D3.js
temos um gráfico bastante informativo, mas ainda assim, existem possibilidades de torná-lo interativo também.
no próximo bloco de código, mostrar-lhe-ei como adicionar ouvintes de eventos aos elementos SVG.,
Note que eu uso a expressão da função em vez de uma função de seta porque eu acedo ao elemento via this palavra-chave.
I configura a opacidade do elemento SVG seleccionado para metade do valor original na passagem do rato e repõe-o quando o cursor sai da área.
pode também obter as coordenadas do rato com d3.mouse. Ele retorna um array com as coordenadas x e y. Desta forma, mostrar uma dica na ponta do cursor não seria problema nenhum.
criar diagramas de estalar os olhos não é uma forma de arte fácil.,pode-se exigir a sabedoria de designers gráficos, pesquisadores da UX e outras criaturas poderosas. No exemplo a seguir vou mostrar algumas possibilidades para aumentar o seu gráfico!
I have very similar values displayed on the chart so to realce the divergences among the bar values, I set up an event listener for the mouseenter event. Cada vez que o usuário paira sobre uma coluna específica a, uma linha horizontal é traçada em cima dessa barra. Além disso, eu também calcular as diferenças em comparação com as outras bandas e exibi-lo nas barras.,
Pretty neat, huh? Eu também adicionei o exemplo da opacidade a este e aumentei a largura da barra.
O métodotransition indica que eu quero animar as mudanças no DOM. Seu intervalo é definido com a função duration que leva milisegundos como argumentos. Esta transição acima apaga a cor da banda e amplia a largura da barra.
para desenhar uma linha SVG, preciso de um ponto de partida e de destino., Este pode ser definido através de x1 y1 e x2 y2 coordenadas. A linha não será visível até que eu defina a cor dela com o atributo stroke.
I só revelou parte do id
evento aqui, por isso tenha em mente que terá de reverter ou remover as alterações no ID
evento. O código fonte completo está disponível no final do artigo.
vamos adicionar algum estilo ao gráfico!,
vamos ver o que conseguimos até agora e como podemos agitar este gráfico com algum estilo. Você pode adicionar atributos de classe A elementos SVG com a mesma função attr função que usamos antes.
O diagrama tem um bom conjunto de funcionalidades. Em vez de uma imagem estática, ela também revela as divergências entre os valores representados na passagem do mouse. O título coloca o gráfico em contexto e as etiquetas ajudam a identificar os eixos com a unidade de medida. Eu também adiciono um novo rótulo no canto inferior direito para marcar a fonte de entrada.,
a única coisa que resta é actualizar as cores e os tipos de letra!
cartas com fundo escuro fazem com que as barras coloridas brilhantes pareçam fixes. Eu também aplicei a família de fontes Open Sans a todos os textos e definir o tamanho e o peso para os diferentes rótulos.nota que a linha foi danificada? Pode ser feito definindo os atributos stroke-widthe stroke-dasharray. Com stroke-dasharray, você pode definir padrões de traços e aberturas que alteram o contorno da forma.
Grid lines where it gets tricky., Eu tenho que aplicar stroke-width: 0 para elementos de caminho no grupo para esconder a moldura do diagrama e também reduzir a sua visibilidade definindo a opacidade das linhas.
Todas as outras regras CSS cobrem os tamanhos de letra e cores que você pode encontrar no código fonte.
encerrando o nosso D3.Tutorial de gráficos de barras js
D3.o js é uma biblioteca fantástica para a manipulação do DOM. A profundidade dele esconde incontáveis tesouros escondidos (na verdade, não escondidos, é realmente bem documentado) que esperam pela descoberta., Esta escrita cobre apenas fragmentos de seu conjunto de ferramentas que ajudam a criar um gráfico de barras não tão medíocre.continue, explore – o, use-o e crie visualizações espectaculares!