Boost D3.js gráficos com gradientes SVG

Nadieh Bremer será em Gere London Em setembro, onde ela estará demonstrando como tomar Svg além de meras formas , usando JavaScript, CSS e D3.js para tornar as visualizações de dados ainda mais divertidas e emocionantes. Reserve o seu bilhete agora !

D3.js assumiu o mundo da visualização de dados interativos. Um enorme número de exemplos pode ser encontrado, cada um mostrando sua própria torção divertida e útil na biblioteca. Você vê, D3 não é uma biblioteca de gráficos, mas algo muito melhor. Ele fornece apenas as ferramentas básicas para criar visualizações de dados e, ao fazê-lo, você criará praticamente qualquer coisa que você possa imaginar. Mesmo que algumas ideias possam levar mais tempo do que outras, você chegará lá eventualmente. E essa liberdade é exatamente o que eu amo sobre D3.

Em seu núcleo, cada visual D3 é construído de elementos SVG. Por exemplo, para cada datapoint em um gráfico de plataforma de dispersão, para criar um gráfico de barras, como um eixo, coordenadas paralelas ou gráfico de inclinação, como rótulos, e o extremamente útil para praticamente tudo. Além disso, os SVGs são independentes de resolução, assim parecem grandes em qualquer nível de exibição ou zoom.

Mesmo se você estiver apenas usando o SVGs para suas formas, você pode criar visualizações maravilhosas. No entanto, eles podem fazer muito mais - pensar em filtros SVG, por exemplo. Neste tutorial, assumiremos um mergulho profundo em um aspecto específico e analisaremos algumas maneiras diferentes, pode ser aplicada para iluminar uma visualização. Deixe-me apresentá-lo aos gradientes SVG!

Encontre todos os arquivos necessários para este tutorial aqui .

Gradientes lineares.

Às vezes, quando eu crio um gráfico de linha com uma única linha, ele só parece um pouco vazio e pode se perder no fundo branco. Para fazer isso se destacar mais, coloco um gradiente de luz abaixo usando o D3 d3.svg.area. função, preenchida com um gradiente SVG (veja a Fig. 1).

Eu quero que o gradiente corra verticalmente a partir do topo (onde é a mesma cor que a linha, mas uma sombra mais clara) para o fundo (onde deve ficar branco ou transparente). Isto é o que é conhecido como um gradiente linear; algo que muda de cor ao longo de uma linha reta.

Começamos com um SVG. Esta é a tela em que nosso gráfico de linha será desenhado. Então criamos um defs. elemento em que podemos anexar um Gradiente linear elemento. É muito importante dar o gradiente um ID único - vamos usar isso mais tarde quando precisarmos dar a área abaixo da linha de seu preenchimento.

 var áreagradient = svg.appons ("Defs")
.Append ("lineargradiente")
.attr ("id", "áreagradiente")
.attr ("x1", "0%"). Attr ("y1", "0%")
.attr ("x2", "0%"). Attr ("y2", "100%"); 

As duas últimas linhas do código acima definem como o gradiente deve ser executado. Pense nisso como uma linha invisível: x1. e Y1. são as posições iniciais da linha invisível e do x2. e Y2. indique seu ponto final, para dar a direção do gradiente. Muitas vezes é mais fácil definir essas porcentagens, embora seja possível usar locais exatos de pixels. Por padrão, os locais referem-se à caixa delimitadora do elemento no qual o gradiente é aplicado. Queremos que o gradiente funcione verticalmente, então x1. e x2. deve ser o mesmo ( 0% está bem), Y1. tem que ser 0% e Y2 100% .

Agora podemos definir as cores do gradiente. Pelo menos duas cores são necessárias para um gradiente, mas você pode usar quantos quiser. Para cada cor no gradiente que você adiciona um Pare elemento. Dentro disso você especifica a sombra com cor de parada e a localização (ao longo da linha invisível) onde você quer que esta cor seja pura (a cor exata) com Deslocamento .

Opcionalmente, também podemos definir a opacidade de cada cor com parada-opacidade . Aqui estou fazendo a sombra ligeiramente mais leve no topo e completamente transparente na parte inferior.

áreagradient.Append ("Stop")
.attr ("offset", "0%")
.attr ("stop-color", "# 21825C")
.attr ("parada-opacidade", 0,6);
áreagradient.Append ("Stop")
.attr ("offset", "80%")
.attr ("stop-color", "branco")
.attr ("parada-opacidade", 0); 

Agora o gradiente linear está configurado, podemos criar um gráfico de área e preenchê-lo com o gradiente. Para fazer isso, use URL (# Irdient-ID) No estilo de preenchimento, junto com o ID exclusivo, definimos anteriormente.

 svg.appons ("caminho")
.Style ("preencher", "URL (#Arítico)") "
.attr ("D", funcionamento da área (DataSet)); 

Depois, desenhe a linha no topo desta área do gráfico para que o espectador possa ler resultados do seu gráfico. No meu gráfico, também fiz círculos para enfatizar os locais de pontos de dados específicos.

Uma lenda suave

Lendas são muito comuns em visualizações de dados. Quando você está usando cores para representar um aspecto específico de seus dados, você precisa explicar o que cada cor significa. É aqui que surge uma lenda.

Em alguns gráficos, você estará usando cores para discriminar entre casos discretos (por exemplo, diferentes países), caso em que as cores são muitas vezes muito diferentes. No entanto, você também pode usar a cor para indicar um valor quantitativo.

Aqui estamos representando a temperatura fora (veja a Fig 2). A cor muda gradualmente para indicar a temperatura indo de baixa a alta. Para mostrar isso em uma lenda, vamos criar um longo retângulo e preenchê-lo com um gradiente indo da esquerda para a direita. Podemos reutilizar o gradiente que criamos para o nosso gráfico de linha, mas folheçamos por 90 graus (então x2. agora é executado para 100% , ao invés de Y2. ). Embora geralmente uma paleta de arco-íris não seja recomendada na visualização de dados, as pessoas são usadas para ver mapas de temperatura coloridos, e eu escolhi nove cores para usar em nosso exemplo.

Em vez de escrever cada Pare Para anexar, podemos colocar todas as cores em um conjunto de dados e usar o Nifty do D3 dados passo para tornar o processo mais rápido. Com D3 é possível acessar qualquer propriedade do conjunto de dados nas etapas subseqüentes de encadeamento usando uma função anônima, permitindo-nos colocar a cor e compensação em apenas duas linhas.

 SVG.Append ("Defs")
.Append ("lineargradiente")
.attr ("id", "legendgradientmulti")
.attr ("x1", "0%"). Attr ("y1", "0%")
.attr ("x2", "100%"). Attr ("y2", "0%")
.Selectall ("Stop")
.dados([
{offset: "0%", cor: "# 2c7bb6"},
{offset: "12,5%", cor: "# 00a6ca"},
{offset: "25%", cor: "# 00ccbc"},
{offset: "37,5%", cor: "# 90eb9d"},
{offset: "50%", cor: "# ffff8c"},
{offset: "62,5%", cor: "# F9D057"},
{offset: "75%", cor: "# f29e2e"},
{offset: "87,5%", cor: "# E76818"},
{offset: "100%", cor: "# D7191C"}])
.enter (). APPEND ("STOP")
.attr ("offset", função (d) {return D.Offset;})
.attr ("stop-color", função (d) {return d.color;}); 

Como antes, o passo final é criar um ret. e preencha isso usando o ID de gradiente exclusivo.

 svg.apend ("retras")
.attr ("x", 0) .attr ("y", 0)
.attr ("largura", 500) .attr ("altura", 20)
.Style ("preencher", "URL (#legendgradientmulti)"); 

Os gráficos que essas lendas são recriadas após o trabalho fabuloso de www.weather-radials.com. Mostrando a temperatura em Nova York ou Pequim em 2015. A temperatura média a cada dia é indicada por uma linha colorida, e essas linhas são organizadas para formar um gráfico circular. A lenda abaixo explica o que cada cor significa. Um gráfico usa um gradiente de uma cor para outro, e o outro progride através de todas as nove cores.

Gradientes baseados em dados

De uma maneira semelhante ao exemplo anterior, também podemos criar vários gradientes. Poderíamos fazer um gradiente exclusivo para cada ponto de dados, com base em um aspecto específico dos dados. Eu usei essa abordagem em um Visualização de exoplaneta , onde cada planeta recebeu um gradiente com base na classe estelar da estrela que ele órbita. Eu usei um efeito sutil da esfera para dar a impressão cada foi iluminado pela estrela no centro.

Então vamos voltar aos anos 90 e transformar uma coleção de círculos planos representando os planetas em nosso próprio sistema solar em esferas de aparência 3D com gradientes radiais (Fig. 4). Eu criei um pequeno conjunto de dados contendo o nome e o diâmetro do planeta. Cada um será generalizado por uma cor, que usaremos para criar um gradiente exclusivo para cada planeta.

 var gradientradial = svg.appons ("defs")
.Selectall ("RadialGradient")
.data (planetas)
.enter (). Anexar ("radialgradient")
.attr ("ID", função (d) {return "gradient-" + D.planet;})
.attr ("cx", "15%")
.attr ("cy", "50%")
.attr ("R", "85%"); 

O código é um pouco diferente aqui: em vez de anexar primeiro elemento gradiente, agora anexamos imediatamente o planetas DataSet e somente após o digitar Criamos um elemento gradiente (neste caso RadialGradient. ). Desta forma, um gradiente é criado para cada ponto no conjunto de dados. Mantenha o ID de cada ponto único, bascando-o nos dados. O índice eu geralmente funciona, mas aqui o nome do planeta é mais seguro. Isso garante que possamos acessar o gradiente correto mais tarde.

Um gradiente radial é ligeiramente diferente de um linear. Criamos de maneira semelhante a um círculo SVG: fornecer o centro do gradiente em relação aos limites do objeto a que será aplicado, usando cx. e cy. . Estes valores padrão para 50% , que é o centro do objeto.

Para simular a aparência de uma estrela brilhando nos planetas de um lado, vamos mover o centro do gradiente para a esquerda pela definição cx. para 15% . O raio do gradiente (onde uma parada de gradiente de 100% deve terminar) é indicado por R. . Também é padronizado para 50% , mas devido ao nosso cx. deslocamento, isso é agora 85% Então, preenche todo o círculo.

Podemos usar os dados do planeta para anexar as paradas de cor. Para criar a aparência de uma esfera que está sendo brilhada, a cor em 0% deve ser mais leve. Usando d3.rgb (). Mais brilhante (k) Eu não tenho que especificar uma cor separada, pois o D3 fará esse cálculo para mim. O valor que K. Define o quanto mais leve que quero que a cor se torne. Por perto 50% Eu defino a cor verdadeira no conjunto de dados. À beira, quero uma cor ligeiramente mais escura, dando a aparência de sombra. Logicamente, há também um d3.rgb (). Mais escuro (k) que podemos usar.

 gradientradial.Append ("Stop")
.attr ("offset", "0%")
.attr ("stop-color", função (d) {
return D3.RGB (D.Color). Crilho (1); });
GradientRadial.Append ("Stop")
.attr ("offset", "50%")
.attr ("stop-color", função (d) {return d.color;});
GradientRadial.Append ("Stop")
.attr ("offset", "100%")
.attr ("stop-color", função (d) {
return D3.RGB (D.Color) .Darker (2.5); }); 

Se você fosse inspecionar o HTML depois de correr isso, haveria oito gradientes radiais diferentes presentes. Por último, precisamos criar oito círculos, dar-lhes um raio conforme definido pelos dados e preenchê-los com o gradiente correto.

 svg.selectall ("Planetas")
.data (planetas)
.enter (). Append ("Circle")
/ * Defina as atributos de classe, localização e raio ... * /
.Style ("preencher", função (d) {
return "URL (# gradient-" + D.planet + ")"; }); 

Eu também adicionei o sol, que tem seu próprio gradiente radial, mas eu saí cx. , cy. e R. com a configuração padrão de 50% Para fazer parecer que o sol está brilhando do centro para fora.

Um aviso: Embora os diâmetros de todas as esferas estejam corretos parentes uns aos outros, as distâncias são claramente falsas. E me desculpe que Saturno não tenha anéis

Brincando com as orientações

Agora exploramos como definir aspectos de cores com base nos dados, mas há muito mais possibilidades. Podemos definir praticamente tudo com base nos dados - até as orientações de cada gradiente.

Para tentar isso, vamos fazer um diagrama de acordes D3 mostrando as colaborações entre os Vingadores no Universo Cinematográfico da Marvel (Fig. 5). Os acordes que correm entre os seis vingadores são dimensionados de acordo com o número de filmes em que ambos aparecem. Nós vamos preencher esses acordes com um simples gradiente linear, mudando de cor de um vingador para outro.

Um acorde geralmente não é exatamente horizontal ou vertical. Então, vamos ter que definir o X1, x2. , Y1. e Y2. valores com base nas localizações do arco externo de cada vingador. Esses dados não estão em nosso conjunto de dados original, mas depois de fornecêmos ao D3 d3.layout.chord. função, vamos recuperar um novo conjunto de dados contendo os ângulos de início e fim de cada arco (como d.source.stargle. e d.Target.endangle. ). Este é o conjunto de dados que fornecemos ao criar os gradientes.

Precisamos saber as posições de pixel da linha invisível que é executada de uma extremidade de um acorde para o outro. Estes são então usados ​​para dar o x1, .., y2 atributos de cada gradiente. Podemos aplicar alguns trigonometria usando o raio do diagrama de acordes e a localização a meio caminho ao longo do arco de cada vingador para recuperar essas posições. A fórmula trigonométrica completa foi removida do seguinte código, mas você vai encontrá-lo em O repositório do Github que acompanha este artigo .

Para criar um ID exclusivo para cada acorde, criamos uma combinação de string do valor de índice do vingador em cada extremidade de um acorde. D3's. d3.layout.chord. sempre define um (dos vingadores) para fonte e o outro para alvo , o que faz um par exclusivo. Mais tarde, ao desenhar os acordes, podemos usar a mesma técnica para chamar o gradiente correto.

 Var grads = svg.apend ("Defs"). SELECTALL ("lineargradiente")
.data (choford.chords ())
.enter (). Append ("lineargradiente")
.attr ("ID", função (d) {return "gradientchord-" + D.Source.
Índice + "-" + D.Target.Index; })
.attr ("gradientunits", "userspaceonuse")
// o local de pixel de uma extremidade de um acorde
.attr ("x1", função (d, i) {return / * ... trigonometria com base em
D.Source Valores ... * /; })
.attr ("y1", função (d, i) {return / * ... * /})
// o local de pixel da outra extremidade de um acorde
.attr ("x2", função (d, i) {return / * ... * /})
.attr ("y2", função (d, i) {return / * ... * /}); 

Como cada vingador é definido pelo seu próprio número de índice, podemos fazer uma função de cor, cores que retorna a cor de cada vingador por valor de índice. Isso facilita a consulsão da cor certa, anexando as duas paradas de cor.

 Grads.Append ("Stop")
.attr ("offset", "0%")
.attr ("stop-color", função (d) {retorno cores (D.Source.Index);
});
Grads.Append ("Stop")
.attr ("offset", "100%")
.attr ("stop-color", função (D) {Cores de retorno (D.Target.Index);
}); 

Tudo o que resta é chamar o ID do gradiente certo ao definir o estilo de preenchimento dos acordes (com a mesma função que usamos para definir o ID do gradiente).

Arredondamento para cima

Durante este tutorial, observamos quatro maneiras diferentes de usar gradientes SVG em visualizações de dados, mas há sempre mais coisas que você pode fazer. Com animações de gradiente, você pode simular um fluxo de uma parte da visualização de dados para outra, por exemplo.

Então, da próxima vez que você planeja uma visualização de dados, deixe sua criatividade correr livre. Com d3.js, você não precisa ser restrito pelo que acha que são os limites da ferramenta. Com um pouco de pensamento e esforço de caixa, você pode fazer as coisas mais incríveis.

Não perca a sessão de Nadieh, SVG Além de meras formas, em gerar Londres, 21 a 23 de setembro. Agende agora !

Este artigo originalmente apareceu em Revista Net. Edição 280; compre aqui !