El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos a crear diagramas de dispersión utilizando D3.js. Los diagramas de dispersión son útiles para visualizar la relación entre dos variables continuas. A lo largo de esta sección, cubriremos los siguientes puntos:

Preparación del entorno y datos
Creación de escalas y ejes
Dibujado de puntos en el diagrama
Añadiendo interactividad básica

Preparación del entorno y datos

Configuración del entorno

Antes de comenzar, asegúrate de tener un entorno de desarrollo configurado con D3.js. Puedes incluir D3.js en tu proyecto mediante un CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scatter Plot with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="scatter-plot"></div>
    <script src="scatter-plot.js"></script>
</body>
</html>

Datos de ejemplo

Para este ejemplo, utilizaremos un conjunto de datos simple que contiene pares de valores (x, y):

const data = [
    {x: 30, y: 20},
    {x: 50, y: 90},
    {x: 80, y: 50},
    {x: 90, y: 80},
    {x: 100, y: 60},
    {x: 120, y: 40},
    {x: 140, y: 70},
    {x: 160, y: 100},
    {x: 180, y: 30},
    {x: 200, y: 50}
];

Creación de escalas y ejes

Definiendo las escalas

Las escalas en D3.js nos ayudan a mapear los datos a coordenadas en el SVG. Utilizaremos escalas lineales para ambos ejes:

const width = 500;
const height = 400;
const margin = {top: 20, right: 30, bottom: 40, left: 50};

const xScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.x)])
    .range([margin.left, width - margin.right]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.y)])
    .range([height - margin.bottom, margin.top]);

Creando los ejes

Ahora, crearemos los ejes utilizando las escalas definidas:

const svg = d3.select("#scatter-plot")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append("g")
    .attr("transform", `translate(0, ${height - margin.bottom})`)
    .call(xAxis);

svg.append("g")
    .attr("transform", `translate(${margin.left}, 0)`)
    .call(yAxis);

Dibujado de puntos en el diagrama

Añadiendo los puntos

Para dibujar los puntos en el diagrama de dispersión, utilizaremos elementos <circle> en SVG:

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y))
    .attr("r", 5)
    .attr("fill", "blue");

Añadiendo interactividad básica

Añadiendo eventos de mouse

Podemos añadir interactividad básica, como mostrar información al pasar el mouse sobre los puntos:

svg.selectAll("circle")
    .on("mouseover", function(event, d) {
        d3.select(this)
            .attr("fill", "orange")
            .attr("r", 7);

        svg.append("text")
            .attr("id", "tooltip")
            .attr("x", xScale(d.x) + 10)
            .attr("y", yScale(d.y) - 10)
            .text(`(${d.x}, ${d.y})`);
    })
    .on("mouseout", function(event, d) {
        d3.select(this)
            .attr("fill", "blue")
            .attr("r", 5);

        d3.select("#tooltip").remove();
    });

Resumen

En esta sección, hemos aprendido a crear un diagrama de dispersión básico utilizando D3.js. Hemos cubierto cómo preparar el entorno y los datos, crear escalas y ejes, dibujar puntos y añadir interactividad básica. Con estos conocimientos, estás listo para explorar visualizaciones más complejas y personalizadas.

En el siguiente módulo, profundizaremos en visualizaciones avanzadas, como diseños jerárquicos y mapas geográficos. ¡Sigue adelante y sigue aprendiendo!

Creando Diagramas de Dispersión

Preparación del entorno y datos

Configuración del entorno

Datos de ejemplo

Creación de escalas y ejes

Definiendo las escalas

Creando los ejes

Dibujado de puntos en el diagrama

Añadiendo los puntos

Añadiendo interactividad básica

Añadiendo eventos de mouse

Resumen

D3.js: De Principiante a Avanzado

Módulo 1: Introducción a D3.js

Módulo 2: Trabajando con Selecciones

Módulo 3: Datos y Escalas

Módulo 4: Creando Visualizaciones Básicas

Módulo 5: Visualizaciones Avanzadas

Módulo 6: Interactividad y Animación

Módulo 7: Trabajando con Datos Reales

Módulo 8: Rendimiento y Optimización

Módulo 9: Mejores Prácticas y Técnicas Avanzadas

Módulo 10: Proyecto Final