D3.js: Gráficas interactivas con espacio de coordenadas SVG
D3.js, que significa «Data-Driven Documents», es una poderosa biblioteca JavaScript para manipular documentos basados en datos, especialmente para crear visualizaciones interactivas y dinámicas. Una de las características fundamentales de D3.js es su capacidad para trabajar con el espacio de coordenadas SVG, que presenta diferencias con el espacio de coordenadas matemático tradicional.
En el contexto matemático, el origen (0, 0) se encuentra en la esquina inferior izquierda, y el eje Y crece hacia arriba. En SVG, sin embargo, el origen se encuentra en la esquina superior izquierda, y el eje Y crece hacia abajo. Esta diferencia es crucial para comprender cómo D3.js posiciona y escala los elementos de un d3 graph, y cómo se relacionan con las coordenadas que se establecen en el código.
El espacio de coordenadas SVG: Un nuevo enfoque
Para crear visualizaciones con D3.js, es necesario tener en cuenta el espacio de coordenadas SVG. A diferencia del espacio matemático, SVG considera el origen como la esquina superior izquierda del área de dibujo. Esto significa que las coordenadas (0, 0) representan la esquina superior izquierda, y las coordenadas (ancho, 0) representan la esquina superior derecha.
El eje Y crece hacia abajo, por lo que las coordenadas (0, alto) representan la esquina inferior izquierda, y las coordenadas (ancho, alto) representan la esquina inferior derecha.
Ejemplo práctico: Creación de una gráfica de línea con D3.js
Para ilustrar el uso de D3.js y el espacio de coordenadas SVG, crearemos un ejemplo simple: una gráfica de línea que visualiza la población de un país a lo largo de los años.
1. Datos: Creación de un archivo CSV
Comenzaremos creando un archivo CSV (Comma Separated Values) con los datos de la población. Este archivo se utilizará como fuente de datos para la gráfica.
csv
Año,Población
2010,1000000
2011,1050000
2012,1100000
2013,1150000
2014,1200000
2. Estructura HTML: Preparando el lienzo
Ahora, crearemos una página HTML básica que contendrá el d3 graph. Dentro de la página, incluiremos una etiqueta <div> con un ID específico, que servirá como contenedor para la gráfica.
html
<!DOCTYPE html>
<html>
<head>
<title>Gráfica de línea con D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// Código D3.js
</script>
</body>
</html>
3. Código D3.js: Trazando la gráfica
En el archivo HTML, dentro de la etiqueta <script>, escribiremos el código D3.js para generar la gráfica.
«`javascript
// Seleccionar el contenedor de la gráfica
var svg = d3.select(«#chart»)
.append(«svg»)
.attr(«width», 600)
.attr(«height», 400);
// Cargar datos del archivo CSV
d3.csv(«population.csv»).then(function(data) {
// Convertir los datos a números
data.forEach(function(d) {
d.Año = +d.Año;
d.Población = +d.Población;
});
// Definir la escala para el eje X (años)
var xScale = d3.scaleLinear()
.domain([d3.min(data, function(d) { return d.Año; }),
d3.max(data, function(d) { return d.Año; })])
.range([0, 600]);
// Definir la escala para el eje Y (población)
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.Población; })])
.range([400, 0]); // Notar que el rango es inverso para el eje Y
// Definir la línea
var line = d3.line()
.x(function(d) { return xScale(d.Año); })
.y(function(d) { return yScale(d.Población); });
// Dibujar la línea
svg.append(«path»)
.attr(«d», line(data))
.attr(«stroke», «blue»)
.attr(«stroke-width», 2)
.attr(«fill», «none»);
// Agregar los ejes
svg.append(«g»)
.attr(«transform», «translate(0, 400)»)
.call(d3.axisBottom(xScale));
svg.append(«g»)
.call(d3.axisLeft(yScale));
});
«`
4. Ejecutando el ejemplo
Después de guardar el archivo CSV como «population.csv» y el archivo HTML como «index.html» en la misma carpeta, puedes abrir el archivo «index.html» en un navegador web. Verás la gráfica de línea que representa la población a lo largo de los años, mostrando el uso de D3.js y el espacio de coordenadas SVG.
Conclusiones
D3.js es una herramienta poderosa para crear visualizaciones de datos interactivas. Su capacidad para trabajar con el espacio de coordenadas SVG ofrece un gran control sobre la posición y la escala de los elementos de la gráfica.
Al comprender las diferencias entre el espacio de coordenadas matemático y el espacio de coordenadas SVG, puedes crear d3 graphs precisos y visualmente atractivos que representen los datos de manera efectiva.