D3.js - Gráficos

Un gráfico es un espacio plano bidimensional representado como un rectángulo. Los gráficos tienen un espacio de coordenadas donde las coordenadas x = 0 e y = 0 se encuentran en la parte inferior izquierda. De acuerdo con el espacio de coordenadas cartesianas matemáticas, las gráficas tienen la coordenada X creciendo de izquierda a derecha y la coordenada Y creciendo de abajo hacia arriba.

Cuando hablamos de dibujar un círculo con coordenadas x = 30 e y = 30, vamos 30 unidades de la parte inferior izquierda a la derecha y luego subimos 30 unidades.

Espacio de coordenadas SVG

El espacio de coordenadas SVG funciona de la misma manera que un espacio de coordenadas de gráfico matemático, excepto por dos características importantes:

El espacio de coordenadas SVG tiene x = 0 y las coordenadas y = 0 se encuentran en la parte superior izquierda.
El espacio de coordenadas SVG tiene la coordenada Y creciendo de arriba a abajo.

Gráfico de espacio de coordenadas SVG

Cuando hablamos de dibujar un círculo con x = 30 e y = 30 coordenadas en el espacio de coordenadas SVG, vamos 30 unidades desde la parte superior izquierda a la derecha y luego bajamos 30 unidades hacia arriba. Se define como sigue.

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

Considere el elemento SVG como un gráfico de 200 unidades de ancho y 200 unidades de alto. Ahora sabemos que las coordenadas cero X e Y están en la parte superior izquierda. Ahora también sabemos que a medida que crece la coordenada Y, se moverá de la parte superior a la inferior de nuestro gráfico. Puede diseñar los elementos SVG como se muestra a continuación.

var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 200)
   .attr("height", 200)
   .style("border", "1px solid black");

Ejemplo de gráfico

Consideremos un ejemplo del gráfico lineal.

Line Graph- Se utiliza un gráfico de líneas para visualizar el valor de algo a lo largo del tiempo. Compara dos variables. Cada variable se traza a lo largo de un eje. Un gráfico de líneas tiene un eje vertical y un eje horizontal.

En este gráfico de ejemplo, podemos tomar los registros del archivo csv como el crecimiento de la población de los estados de la India del año 2006 al 2017. Primero creemos data.csv para mostrar los registros de población.

Cree un nuevo archivo csv en su carpeta D3 -

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Ahora, guarde el archivo y realice los siguientes pasos para dibujar un gráfico lineal en D3. Repasemos cada paso en detalle.

Step 1 - Adding styles - Agreguemos un estilo al line class usando el código que se proporciona a continuación.

.line {
   fill: none;
   stroke: green;
   stroke-width: 5px;
}

Step 2 - Define variables - Los atributos SVG se definen a continuación.

var margin = {top: 20, right: 20, bottom: 30, left: 50},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

Aquí, la primera línea define los cuatro márgenes, que rodean el bloque donde se coloca el gráfico.

Step 3 - Define line - Dibuja una nueva línea usando el d3.line() función, que se muestra a continuación.

var valueline = d3.line()
   .x(function(d) { return x(d.year); })
   .y(function(d) { return y(d.population); });

Aquí, Año representa los datos en los registros del eje X y la población se refiere a los datos en el eje Y.

Step 4 - Append SVG attributes - Agregue atributos SVG y elementos de grupo usando el código siguiente.

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

Aquí, hemos agregado los elementos del grupo y aplicado la transformación.

Step 5 - Read data - Ahora, podemos leer datos de nuestro conjunto de datos. data.csv.

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

Aquí, el data.csv no está presente, arroja un error.

Step 6 - Format data - Ahora, formatee los datos usando el siguiente código.

data.forEach(function(d) {
   d.year = d.year;
   d.population = +d.population;
});

Este código anterior garantiza que todos los valores que se extraen del archivo csv estén configurados y formateados correctamente. Cada fila consta de dos valores: un valor para 'año' y otro valor para 'población'. La función extrae valores de 'año' y 'población' una fila a la vez.

Step 7 - Set scale range - Después de formatear los datos, puede establecer el rango de escala para X e Y.

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 8 - Append path - Agregue la ruta y los datos como se muestra a continuación.

svg.append("path").data([data])
   .attr("class", "line").attr("d", valueline);

Step 9 - Add X-axis - Ahora, puede agregar el eje X usando el siguiente código.

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

Step 10 - Add Y-axis - Podemos agregar el eje Y al grupo como se muestra a continuación.

svg.append("g")
   .call(d3.axisLeft(y));

Step 11 - Working Example- El código completo se proporciona en el siguiente bloque de código. Crea una página web sencillalinegraphs.html y agregue los siguientes cambios.

graph.html

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style> 
         .line {
            fill: none;
            stroke: green;
            stroke-width: 5px;
         }
      </style>
   </head>

   <body>
      <script>
         // set the dimensions and margins of the graph
         var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

         // set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);

         // define the line
         var valueline = d3.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d.population); });

         // append the svg obgect to the body of the page
         // appends a 'group' element to 'svg'
         // moves the 'group' element to the top left margin
         var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
               "translate(" + margin.left + "," + margin.top + ")");

         // Get the data
         d3.csv("data.csv", function(error, data) {
            if (error) throw error;
            // format the data
            data.forEach(function(d) {
               d.year = d.year;
               d.population = +d.population;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

            // Add the valueline path.
            svg.append("path")
               .data([data])
               .attr("class", "line")
               .attr("d", valueline);

            // Add the X Axis
            svg.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x));

            // Add the Y Axis
            svg.append("g")
               .call(d3.axisLeft(y));
         });
      </script>
   </body>
</html>

Ahora solicita el navegador y veremos el siguiente resultado.

↰ Previous page Next page ↱