Los gráficos de dispersión, también conocidos como gráficos de puntos, son utilizados para visualizar la relación entre dos variables. Cada punto en el gráfico representa una observación del conjunto de datos. En este capítulo, aprenderemos a crear gráficos de dispersión utilizando D3.

Datos de Ejemplo

Vamos a usar un conjunto de datos de ejemplo que muestra las calificaciones y horas de estudio de varios estudiantes:

javascript

Configuración del SVG

Primero, configuramos el área del SVG donde se dibujará el gráfico de dispersión:

javascript

Escalas

Necesitamos escalas para los ejes X e Y.

Escala X

Usamos una escala lineal para el eje X:

javascript

Escala Y

Para el eje Y, utilizamos una escala lineal:

javascript

Ejes

Creamos y añadimos los ejes X e Y utilizando las escalas definidas:

javascript

Creación de los Puntos

Ahora vinculamos los datos a los elementos circle para crear los puntos del gráfico de dispersión:

javascript

Personalización del Gráfico de Dispersión

Podemos personalizar el gráfico de dispersión para hacerlo más atractivo. Por ejemplo, añadiendo labels a los puntos con los valores correspondientes:

javascript

Podemos añadir estilos CSS para mejorar su apariencia:

style.css

css

Interactividad

Vamos a añadir interactividad básica, como un tooltip que muestra el valor al pasar el mouse por encima de un punto:

javascript

Resumen

En este capítulo, aprendimos a crear un gráfico de dispersión en D3. Comenzamos con la configuración básica del área de dibujo y luego creamos las escalas y ejes. Trazamos los puntos usando elementos circle y agregamos etiquetas para mejorar la visibilidad. Finalmente, añadimos interactividad básica con tooltips.

Los gráficos de dispersión son útiles para mostrar la relación entre dos variables y detectar patrones o tendencias. Ahora tienes las herramientas necesarias para crear y personalizar tus propios gráficos de dispersión utilizando D3.

En el siguiente capítulo, exploraremos cómo visualizar datos jerárquicos con gráficos de árbol.