Como adicionar gráficos ao seu site WordPress usando D3.js

Você pode estar familiarizado com o termo “visualização de dados”, pois ele se tornou mais popular tanto como prática quanto como plano de carreira. Há uma razão pela qual esse campo emergente está bem encaminhado – é importante que estejamos constantemente aprendendo mais sobre nossos usuários, além de mostrar a eles os dados para respaldar nossas reivindicações.

Quando os dados são apresentados de forma limpa e profissional, facilitam a compreensão e a interpretação. Na maioria dos casos, seus usuários são pessoas visuais, então qual a melhor maneira de ilustrar dados do que com gráficos? D3.js, também conhecido como Documentos Orientados a Dados, é uma ótima maneira de adicionar gráficos ao seu site WordPress.

Por que D3?

Essa biblioteca ajuda os designers a exibir dados na web. As possibilidades são infinitas, tornando esta uma biblioteca muito popular. De simples a complexo a qualquer coisa intermediária, o D3 pode ser personalizado para renderizar praticamente qualquer tipo de gráfico. Ele funciona bem com tecnologias padrão da web, pode manipular o DOM, é super flexível e os gráficos podem ser personalizados exatamente ao seu gosto.

Até agora, você provavelmente já encontrou Scalable Vector Graphics, geralmente chamado de SVGs. Este é o tipo de formato que a biblioteca D3 cria. Os SVGs são ótimos porque são pequenos em tamanho, escaláveis ​​e independentes de resolução.

Só para deixar claro, esta solução não vem com nenhum gráfico pré-construído pronto para uso - você terá que criar o seu próprio! Dê uma olhada na galeria D3 e você pode ver muitos bons exemplos para se inspirar.

Como uma solução Open Source, você não precisa se preocupar com licenciamento e custo. Por ser Open Source, o desenvolvimento está em andamento. Para manter-se atualizado com a versão mais recente, você pode fazer um fork do D3 no Github.

Fazendo um gráfico D3 simples

Agora que sabemos o quão bom é o D3, vamos construir algo. Faremos um gráfico de rosca simples, que cobrirá os conceitos básicos do D3.

Etapa um: adicione os scripts ao seu site

Primeiro, você precisará adicionar o script D3 ao seu site WordPress. O site da d3 tem disponível para download ou você pode linkar diretamente para a versão mais recente. Você notará que estou usando a versão minificada para este tutorial. O D3 é naturalmente muito pequeno em tamanho, mas o minificado ainda é um pouco menor, com apenas 148 KB.

Em seguida, você criará um novo arquivo JavaScript onde o script de gráfico personalizado vai. Dê ao arquivo um nome reconhecível para que seja fácil encontrá-lo.

É muito importante que o script D3 seja chamado antes do JavaScript específico do gráfico. Se as coisas não forem chamadas na ordem correta, os gráficos não serão renderizados. (Eu sei disso por experiência própria e, se você não perceber imediatamente, provavelmente passará muito tempo tentando consertar as coisas que não estão quebradas.)

Esses scripts devem ser adicionados ao seu site após a tag de fechamento do corpo. Ao inspecionar a página, verifique se ela se parece com isto:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Lembre-se de que o caminho do arquivo pode ser diferente disso, dependendo da estrutura do arquivo.

Etapa dois: adicionar scripts para criar o gráfico

Você não tocará no arquivo d3.js , apenas trabalhando em seu arquivo gráfico específico. Nesse caso, é chamado charts.js .

Vamos dividir as coisas por partes. Primeiro, crie sua variável e estabeleça o que você precisará em sua função. Vou nomear essa variável de donut .

var donut = (function(one) {
})();

Dentro das chaves, você adicionará suas informações de tamanho.

var width = 400,

height = 400,

radius = 200

Em seguida, defina suas cores. Que tal um gráfico cinza e azul? A primeira cor listada aqui é um cinza claro que será a cor padrão. A segunda é a cor azul que representará os dados.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Você precisará de alguns dados para testar isso, então vamos adicioná-los a seguir. Para este tutorial, os dados são codificados, mas você também pode usar dados de planilha e dados dinâmicos com D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Agora você pode adicionar mais detalhes que ajudam a definir como o gráfico é renderizado.

O arco define o raio interno. Imagine o raio externo do gráfico – você vai querer que ele seja bem grosso, então subtrair 100 deve ser suficiente.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Isso cria o contêiner SVG e o #donut é o que você direcionará em sua página para realmente renderizar o gráfico. É aqui que você começará a ver suas cores da etapa acima.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Código concluído

Caso você queira comparar o que tem com a amostra, aqui está o trecho de código completo.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Vendo o gráfico

Você precisará criar uma nova página ou postagem para que possa “chamar” o gráfico de rosca para realmente vê-lo. Certifique-se de estar no modo de edição de texto.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Caixa de visualização e proporção para o gráfico de tamanho

Há algo extra na tag SVG, que é o viewBox e preserveAspectRatio . Isso não foi gerado pelo D3 e é totalmente opcional. Você pode ter outro método preferido de dimensionamento, mas isso tende a funcionar bem e ajuda na capacidade de resposta dos gráficos.

Especialmente neste caso, sendo que queremos manter uma forma perfeitamente redonda, definir uma proporção garantirá que o SVG se ajuste. É aqui que o viewBox entra em ação. A vantagem do viewBox é que ele define como todas as medidas e coordenadas usadas dentro do SVG devem ser dimensionadas para caber no espaço disponível. Se você também estiver usando 400 como medida, aqui está uma explicação rápida de como manter a forma circular.

Temos dois valores de 400 que são iguais; a razão para isso é que a imagem é dimensionada corretamente. Com nossa viewBox="0 0 400 400" , estamos criando um sistema de coordenadas para o gráfico. Tem 400 unidades de largura e 400 unidades de altura. A largura e a altura do gráfico SVG estabelecem a área visível e definir uma viewBox permite-lhe especificar que os seus gráficos podem ser esticados para caber num determinado recipiente (provavelmente a janela de visualização por omissão, que é a parte da página Web que o utilizador pode ver atualmente).

Há um pouco mais do que isso, porque mesmo com o viewBox definido, ele ainda não será dimensionado perfeitamente. Não será distorcido, o que é uma coisa boa, mas há mais na equação. Conheça o ala, preserveAspectRatio . Não tem efeito, a menos que haja uma viewBox que defina a proporção da imagem. A escala será ajustada para preservar a proporção, para que você possa manter seu gráfico perfeitamente circular. Ao incluir preserveAspectRatio , você está planejando instâncias em que a viewBox não corresponde à proporção da janela de visualização ou do contêiner em que o gráfico está. Na maioria dos casos, por padrão, a imagem será dimensionada até se ajustar à altura e à largura, mas centra-se em qualquer espaço extra. Incluímos preserveAspectRatio="xMidYMid" que diz ao navegador para centralizar o gráfico na janela de visualização em ambas as direções.

O mais importante é saber que o gráfico não será cortado e que é escalável. A chave para realmente entender isso é experimentar os valores. Uma boa maneira de fazer isso é ver o que acontece quando os valores são alterados e como isso se relaciona com a janela de visualização.

Suporte ao navegador e d3

As chances são de que você esteja usando um navegador moderno, mas vale a pena mencionar se você precisar oferecer suporte a navegadores mais antigos. No geral, o suporte ao navegador é ótimo e você provavelmente não terá problemas, mas o D3.js não funciona bem com navegadores mais antigos, como o IE8.

Criar um gráfico simples é uma ótima maneira de começar a usar o D3.js. Conhecer o básico e se familiarizar com os gráficos iniciais do D3 será muito útil para você ao projetar seus dados e passar para mais tipos de gráficos. Do simples ao complexo, as opções de design são infinitas.

Como ficou seu gráfico? Deixe-nos saber nos comentários!

Qual é o próximo?

Baixe este e-book para obter uma lista dos nossos plugins mais recomendados para desenvolvedores! Descobrimos que todos esses plug-ins são fáceis de usar, não têm muito desempenho em seu site e são totalmente confiáveis.

Pronto para instalar seu novo plugin favorito? Clique abaixo!