D3.js - Desenho de gráficos

D3.js é usado para criar um gráfico SVG estático. Isso ajuda a desenhar os seguintes gráficos -

Gráfico de barras
Gráfico Circular
Gráfico de pizza
Donut Chart
Gráfico de linha
Gráfico de bolhas, etc.

Este capítulo explica como desenhar gráficos em D3. Vamos entender cada um deles em detalhes.

Gráfico de barras

Os gráficos de barras são um dos tipos de gráfico mais comumente usados e são usados para exibir e comparar o número, frequência ou outra medida (por exemplo, média) para diferentes categorias ou grupos discretos. Este gráfico é construído de forma que as alturas ou comprimentos das diferentes barras sejam proporcionais ao tamanho da categoria que representam.

O eixo x (o eixo horizontal) representa as diferentes categorias sem escala. O eixo y (o eixo vertical) tem uma escala e isso indica as unidades de medida. As barras podem ser desenhadas vertical ou horizontalmente, dependendo do número de categorias e do comprimento ou complexidade da categoria.

Desenhe um gráfico de barras

Vamos criar um gráfico de barras em SVG usando D3. Para este exemplo, podemos usar orect elements para os bares e text elements para exibir nossos valores de dados correspondentes às barras.

Para criar um gráfico de barras em SVG usando D3, vamos seguir as etapas abaixo.

Step 1 - Adding style in the rect element - Vamos adicionar o seguinte estilo ao elemento ret.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Adicione a seguinte classe CSS para aplicar estilos a valores de texto. Adicione este estilo ao elemento de texto SVG. É definido abaixo -

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

Aqui, Fill é usado para aplicar cores. A âncora de texto é usada para posicionar o texto na extremidade direita das barras.

Step 3 - Define variables- Vamos adicionar as variáveis no script. Isso é explicado a seguir.

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

Aqui,

Width - Largura do SVG.
Scalefactor - Escalonado para um valor de pixel que é visível na tela.
Barheight - Esta é a altura estática das barras horizontais.

Step 4 - Append SVG elements - Vamos acrescentar elementos SVG em D3 usando o código a seguir.

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Aqui, primeiro selecionaremos o corpo do documento, criaremos um novo elemento SVG e então o anexaremos. Vamos construir nosso gráfico de barras dentro deste elemento SVG. Em seguida, defina a largura e a altura do SVG. A altura é calculada como altura da barra * número de valores de dados.

Consideramos a altura da barra como 30 e o comprimento da matriz de dados é 4. Então a altura do SVG é calculada como barheight * comprimento de dados que é 120 px.

Step 5 - Apply transformation - Vamos aplicar a transformação em barra usando o seguinte código.

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

Aqui, cada barra interna corresponde a um elemento. Portanto, criamos elementos de grupo. Cada um dos elementos do nosso grupo precisa ser posicionado um abaixo do outro para construir um gráfico de barras horizontais. Tomemos um índice da fórmula de transformação * altura da barra.

Step 6 - Append rect elements to the bar- Na etapa anterior, acrescentamos elementos de grupo. Agora adicione os elementos retos à barra usando o código a seguir.

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

Aqui, a largura é (valor dos dados * fator de escala) e a altura é (altura da barra - margem).

Step 7 - Display data- Esta é a última etapa. Vamos exibir os dados em cada barra usando o código a seguir.

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

Aqui, a largura é definida como (valor dos dados * fator de escala). Elementos de texto não suportam preenchimento ou margem. Por esse motivo, precisamos dar a ele um deslocamento “dy”. Isso é usado para alinhar o texto verticalmente.

Step 8 - Working example- A listagem completa do código é mostrada no seguinte bloco de código. Crie uma página da webbarcharts.html e adicione as seguintes alterações.

barcharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

Agora solicite seu navegador, você verá a seguinte resposta.

Gráfico Circular

Um gráfico circular é um gráfico estatístico circular, dividido em fatias para ilustrar uma proporção numérica.

Desenhe um gráfico circular

Vamos criar um gráfico circular em SVG usando D3. Para fazer isso, devemos seguir as seguintes etapas -

Step 1 - Define variables- Vamos adicionar as variáveis no script. Isso é mostrado no bloco de código abaixo.

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

Aqui,

Width - largura do SVG.
Height - altura do SVG.
Data - array de elementos de dados.
Colors - aplique cores aos elementos do círculo.

Step 2 - Append SVG elements - Vamos acrescentar elementos SVG em D3 usando o código a seguir.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Apply transformation - Vamos aplicar a transformação em SVG usando o seguinte código.

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

Aqui,

var g = svg.selectAll(“g”) - Cria um elemento de grupo para conter os círculos.

.data(data) - Vincula nosso array de dados aos elementos do grupo.

.enter() - Cria marcadores de posição para os elementos do nosso grupo.

.append(“g”) - Acrescenta elementos de grupo à nossa página.

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

Aqui, traduzir é usado para posicionar seus elementos em relação à origem.

Step 4 - Append circle elements - Agora, anexe elementos de círculo ao grupo usando o código a seguir.

g.append("circle")

Agora, adicione os atributos ao grupo usando o código a seguir.

.attr("cx", function(d, i) {
   return i*75 + 50;
})

Aqui, usamos a coordenada x do centro de cada círculo. Estamos multiplicando o índice do círculo por 75 e adicionando um preenchimento de 50 entre os círculos.

Em seguida, definimos a coordenada y do centro de cada círculo. Isso é usado para uniformizar todos os círculos e é definido a seguir.

.attr("cy", function(d, i) {
   return 75;
})

Em seguida, defina o raio de cada círculo. É definido abaixo,

.attr("r", function(d) {
   return d*1.5;
})

Aqui, o raio é multiplicado com o valor dos dados junto com uma constante “1,5” para aumentar o tamanho do círculo. Por fim, preencha as cores de cada círculo usando o código a seguir.

.attr("fill", function(d, i){
   return colors[i];
})

Step 5 - Display data- Esta é a última etapa. Vamos exibir os dados de cada círculo usando o código a seguir.

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

Step 6 - Working Example- A listagem completa do código é mostrada no seguinte bloco de código. Crie uma página da webcirclecharts.html e adicione as seguintes alterações nele.

circlecharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

Agora, solicite seu navegador e a resposta será a seguinte.

Gráfico de pizza

Um gráfico de pizza é um gráfico estatístico circular. É dividido em fatias para mostrar a proporção numérica. Vamos entender como criar um gráfico de pizza em D3.

Desenhe um gráfico de pizza

Antes de começar a desenhar um gráfico de pizza, precisamos entender os dois métodos a seguir -

O método d3.arc () e
O método d3.pie ().

Vamos entender esses dois métodos em detalhes.

The d3.arc() Method- O método d3.arc () gera um arco. Você precisa definir um raio interno e um raio externo para o arco. Se o raio interno for 0, o resultado será um gráfico de pizza, caso contrário, o resultado será um gráfico de rosca, que será discutido na próxima seção.

The d3.pie()Method- O método d3.pie () é usado para gerar um gráfico de pizza. Ele pega os dados do conjunto de dados e calcula o ângulo inicial e o ângulo final para cada fatia do gráfico de pizza.

Vamos desenhar um gráfico de pizza usando as seguintes etapas.

Step 1 - Applying styles - Vamos aplicar o seguinte estilo a um elemento de arco.

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

Aqui, o preenchimento é usado para aplicar cores. Uma âncora de texto é usada para posicionar o texto em direção ao centro de um arco.

Step 2 - Define variables - Defina as variáveis no script conforme mostrado abaixo.

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

Aqui,

Width - Largura do SVG.
Height - Altura do SVG.
Radius - Pode ser calculado usando a função de Math.min (largura, altura) / 2;

Step 3 - Apply Transformation - Aplique a seguinte transformação em SVG usando o código a seguir.

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Agora adicione cores usando o d3.scaleOrdinal funcionar conforme indicado abaixo.

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

Step 4 - Generate a pie chart - Agora, gere um gráfico de pizza usando a função fornecida abaixo.

var pie = d3.pie()
   .value(function(d) { return d.percent; });

Aqui, você pode plotar os valores percentuais. Uma função anônima é necessária para retornard.percent e defina-o como o valor da pizza.

Step 5 - Define arcs for pie wedges - Depois de gerar o gráfico de pizza, agora defina o arco para cada fatia de pizza usando a função fornecida abaixo.

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

Aqui, este arco será definido para os elementos do caminho. O raio calculado é definido como outerradius, enquanto o innerradius é definido como 0.

Step 6 - Add labels in wedges- Adicione os rótulos em fatias de pizza, fornecendo o raio. É definido como segue.

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

Step 7 - Read data- Este é um passo importante. Podemos ler os dados usando a função fornecida a seguir.

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

Aqui, populations.csvcontém o arquivo de dados. od3.csvfunção lê dados do conjunto de dados. Se os dados não estiverem presentes, ele gerará um erro. Podemos incluir este arquivo em seu caminho D3.

Step 8 - Load data - A próxima etapa é carregar os dados usando o código a seguir.

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

Aqui, podemos atribuir dados a elementos de grupo para cada um dos valores de dados do conjunto de dados.

Step 9 - Append path - Agora, anexe o caminho e atribua um 'arco' de classe aos grupos, conforme mostrado abaixo.

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

Aqui, o preenchimento é usado para aplicar a cor dos dados. É tirado dod3.scaleOrdinal função.

Step 10 - Append text - Para exibir o texto em etiquetas usando o seguinte código.

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

Aqui, o elemento de texto SVG é usado para exibir texto em rótulos. Os arcos de rótulo que criamos anteriormente usandod3.arc()retorna um ponto central, que é uma posição para rótulos. Por fim, fornecemos dados usando od.data.browser.

Step 11 - Append group elements - Anexar atributos de elementos de grupo e adicionar título de classe para colorir o texto e torná-lo itálico, o que é especificado na Etapa 1 e definido abaixo.

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

Step 12 - Working Example- Para desenhar um gráfico de pizza, podemos pegar um conjunto de dados da população indiana. Este conjunto de dados mostra a população em um site fictício, que é definido como segue.

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

Vamos criar uma visualização de gráfico de pizza para o conjunto de dados acima. Crie uma página da web “piechart.html” e adicione o seguinte código nela.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>

↰ Previous page Next page ↱