D3.js: gráficos de dibujo

D3.js se utiliza para crear un gráfico SVG estático. Ayuda a dibujar los siguientes gráficos:

  • Gráfico de barras
  • Gráfico circular
  • Gráfico circular
  • Gráfico de anillos
  • Gráfico de linea
  • Gráfico de burbujas, etc.

Este capítulo explica cómo dibujar gráficos en D3. Entendamos cada uno de estos en detalle.

Gráfico de barras

Los gráficos de barras son uno de los tipos de gráficos más utilizados y se utilizan para mostrar y comparar el número, la frecuencia u otra medida (por ejemplo, la media) para diferentes categorías o grupos discretos. Este gráfico está construido de tal manera que las alturas o longitudes de las diferentes barras sean proporcionales al tamaño de la categoría que representan.

El eje x (el eje horizontal) representa las diferentes categorías que no tiene escala. El eje y (el eje vertical) tiene una escala y esto indica las unidades de medida. Las barras se pueden dibujar de forma vertical u horizontal según el número de categorías y la longitud o complejidad de la categoría.

Dibujar un gráfico de barras

Creemos un gráfico de barras en SVG usando D3. Para este ejemplo, podemos usar elrect elements para los bares y text elements para mostrar nuestros valores de datos correspondientes a las barras.

Para crear un gráfico de barras en SVG usando D3, sigamos los pasos que se indican a continuación.

Step 1 - Adding style in the rect element - Agreguemos el siguiente estilo al elemento rect.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Agregue la siguiente clase CSS para aplicar estilos a valores de texto. Agregue este estilo al elemento de texto SVG. Se define a continuación:

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

Aquí, Relleno se usa para aplicar colores. Text-anchor se utiliza para colocar el texto hacia el extremo derecho de las barras.

Step 3 - Define variables- Agreguemos las variables en el script. Se explica a continuación.

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

Aquí,

  • Width - Ancho del SVG.

  • Scalefactor - Escalado a un valor de píxel que es visible en la pantalla.

  • Barheight - Esta es la altura estática de las barras horizontales.

Step 4 - Append SVG elements - Agreguemos elementos SVG en D3 usando el siguiente código.

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

Aquí, primero seleccionaremos el cuerpo del documento, crearemos un nuevo elemento SVG y luego lo agregaremos. Construiremos nuestro gráfico de barras dentro de este elemento SVG. Luego, establezca el ancho y alto de SVG. La altura se calcula como la altura de la barra * número de valores de datos.

Hemos tomado la altura de la barra como 30 y la longitud de la matriz de datos es 4. Luego, la altura de SVG se calcula como altura de la barra * longitud de datos que es 120 px.

Step 5 - Apply transformation - Apliquemos la transformación en barra usando el siguiente código.

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

Aquí, cada barra del interior se corresponde con un elemento. Por tanto, creamos elementos de grupo. Cada uno de los elementos de nuestro grupo debe colocarse uno debajo del otro para construir un gráfico de barras horizontales. Tomemos una fórmula de transformación índice * altura de barra.

Step 6 - Append rect elements to the bar- En el paso anterior, agregamos elementos de grupo. Ahora agregue los elementos rect a la barra usando el siguiente código.

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

Aquí, el ancho es (valor de datos * factor de escala) y la altura es (altura de barra - margen).

Step 7 - Display data- Este es el último paso. Visualicemos los datos en cada barra usando el siguiente código.

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

Aquí, el ancho se define como (valor de datos * factor de escala). Los elementos de texto no admiten relleno ni margen. Por esta razón, necesitamos darle una compensación "dy". Esto se usa para alinear el texto verticalmente.

Step 8 - Working example- La lista completa de códigos se muestra en el siguiente bloque de código. Crea una pagina webbarcharts.html y agregue los siguientes cambios.

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>

Ahora solicite su navegador, verá la siguiente respuesta.

Gráfico circular

Un gráfico circular es un gráfico estadístico circular, que se divide en porciones para ilustrar una proporción numérica.

Dibujar un gráfico circular

Creemos un gráfico circular en SVG usando D3. Para hacer esto, debemos cumplir con los siguientes pasos:

Step 1 - Define variables- Agreguemos las variables en el script. Se muestra en el bloque de código a continuación.

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

Aquí,

  • Width - ancho del SVG.

  • Height - altura del SVG.

  • Data - matriz de elementos de datos.

  • Colors - aplicar colores a los elementos del círculo.

Step 2 - Append SVG elements - Agreguemos elementos SVG en D3 usando el siguiente código.

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

Step 3 - Apply transformation - Apliquemos la transformación en SVG usando el siguiente código.

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

Aquí,

var g = svg.selectAll(“g”) - Crea un elemento de grupo para sujetar los círculos.

.data(data) - Vincula nuestra matriz de datos a los elementos del grupo.

.enter() - Crea marcadores de posición para los elementos de nuestro grupo.

.append(“g”) - Agrega elementos de grupo a nuestra página.

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

Aquí, traducir se usa para colocar sus elementos con respecto al origen.

Step 4 - Append circle elements - Ahora, agregue elementos circulares al grupo usando el siguiente código.

g.append("circle")

Ahora, agregue los atributos al grupo usando el siguiente código.

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

Aquí, usamos la coordenada x del centro de cada círculo. Estamos multiplicando el índice del círculo por 75 y agregando un relleno de 50 entre los círculos.

A continuación, establecemos la coordenada y del centro de cada círculo. Se utiliza para uniformar todos los círculos y se define a continuación.

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

A continuación, establezca el radio de cada círculo. Se define a continuación,

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

Aquí, el radio se multiplica por el valor de los datos junto con una constante "1.5" para aumentar el tamaño del círculo. Finalmente, complete los colores para cada círculo usando el siguiente código.

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

Step 5 - Display data- Este es el último paso. Visualicemos los datos en cada círculo usando el siguiente código.

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- La lista completa de códigos se muestra en el siguiente bloque de código. Crea una pagina webcirclecharts.html y agregue los siguientes cambios en él.

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>

Ahora, solicite su navegador y la siguiente será la respuesta.

Gráfico circular

Un gráfico circular es un gráfico estadístico circular. Se divide en porciones para mostrar la proporción numérica. Entendamos cómo crear un gráfico circular en D3.

Dibujar un gráfico circular

Antes de comenzar a dibujar un gráfico circular, debemos comprender los dos métodos siguientes:

  • El método d3.arc () y
  • El método d3.pie ().

Entendamos ambos métodos en detalle.

The d3.arc() Method- El método d3.arc () genera un arco. Debe establecer un radio interior y un radio exterior para el arco. Si el radio interior es 0, el resultado será un gráfico circular; de lo contrario, el resultado será un gráfico de anillos, que se analiza en la siguiente sección.

The d3.pie()Method- El método d3.pie () se utiliza para generar un gráfico circular. Toma datos del conjunto de datos y calcula el ángulo inicial y el ángulo final para cada segmento del gráfico circular.

Dibujemos un gráfico circular siguiendo los siguientes pasos.

Step 1 - Applying styles - Apliquemos el siguiente estilo a un elemento de arco.

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

.arc path {
   stroke: #fff;
}

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

Aquí, el relleno se usa para aplicar colores. Se utiliza un ancla de texto para colocar el texto hacia el centro de un arco.

Step 2 - Define variables - Defina las variables en el script como se muestra a continuación.

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

Aquí,

  • Width - Ancho del SVG.

  • Height - Altura del SVG.

  • Radius - Se puede calcular usando la función de Math.min (ancho, alto) / 2;

Step 3 - Apply Transformation - Aplicar la siguiente transformación en SVG usando el siguiente código.

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

Ahora agregue colores usando el d3.scaleOrdinal funcionan como se indica a continuación.

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

Step 4 - Generate a pie chart - Ahora, genere un gráfico circular usando la función que se proporciona a continuación.

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

Aquí, puede trazar los valores porcentuales. Se requiere una función anónima para regresard.percent y configúrelo como el valor circular.

Step 5 - Define arcs for pie wedges - Después de generar el gráfico circular, ahora defina el arco para cada sector circular utilizando la función que se indica a continuación.

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

Aquí, este arco se establecerá en los elementos de la ruta. El radio calculado se establece en radio exterior, mientras que el radio interior se establece en 0.

Step 6 - Add labels in wedges- Agregue las etiquetas en porciones circulares proporcionando el radio. Se define como sigue.

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

Step 7 - Read data- Este es un paso importante. Podemos leer datos usando la función que se proporciona a continuación.

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

Aquí, populations.csvcontiene el archivo de datos. losd3.csvLa función lee datos del conjunto de datos. Si los datos no están presentes, arroja un error. Podemos incluir este archivo en su ruta D3.

Step 8 - Load data - El siguiente paso es cargar datos usando el siguiente código.

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

Aquí, podemos asignar datos a elementos de grupo para cada uno de los valores de datos del conjunto de datos.

Step 9 - Append path - Ahora, agregue la ruta y asigne una clase 'arco' a los grupos como se muestra a continuación.

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

Aquí, el relleno se usa para aplicar el color de los datos. Se toma deld3.scaleOrdinal función.

Step 10 - Append text - Para mostrar el texto en etiquetas usando el siguiente código.

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

Aquí, el elemento de texto SVG se utiliza para mostrar texto en etiquetas. Los arcos de etiquetas que creamos anteriormente usandod3.arc()devuelve un punto de centroide, que es una posición para las etiquetas. Finalmente, proporcionamos datos utilizando eld.data.browser.

Step 11 - Append group elements - Agregue atributos de elementos de grupo y agregue título de clase para colorear el texto y ponerlo en cursiva, que se especifica en el Paso 1 y se define a continuación.

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 dibujar un gráfico circular, podemos tomar un conjunto de datos de la población india. Este conjunto de datos muestra la población en un sitio web ficticio, que se define de la siguiente manera.

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

Creemos una visualización de gráfico circular para el conjunto de datos anterior. Cree una página web "piechart.html" y agregue el siguiente código en ella.

<!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>