Chuck's Academy

Gráficos con D3

Escalas y Ejes en D3

Las escalas y los ejes son componentes cruciales de las visualizaciones de datos, ya que permiten mapear datos a posiciones visuales y proporcionar referencias visuales en gráficos. En este capítulo, exploraremos cómo crear y utilizar escalas y ejes en D3.

Escalas en D3

Las escalas en D3 son funciones que mapean un dominio de valores de datos a un rango de valores visuales. D3 proporciona varios tipos de escalas, incluyendo lineales, logarítmicas, de tiempo, categóricas, etc.

Escalas Lineales

Una escala lineal es la más sencilla y se utiliza cuando los datos tienen una relación lineal.

javascript

Escalas de Bandas

Las escalas de bandas son útiles para gráficos de barras, donde se necesita asignar intervalos uniformes a categorías discretas.

javascript

Escalas de Tiempo

Las escalas de tiempo son importantes para gráficos donde los datos se distribuyen a lo largo de un periodo.

javascript

Ejes en D3

Después de establecer las escalas, los ejes nos permiten representarlas visualmente en la gráfica.

Crear un Eje

D3 proporciona métodos para crear diferentes tipos de ejes: ejes inferiores, superiores, izquierdos y derechos.

javascript

En este ejemplo:

  • axisBottom(xScale) crea un eje inferior basado en la escala xScale.
  • El eje se agrega a un grupo (g) dentro del SVG.
  • transform se usa para posicionar el eje dentro del SVG.

Ejes Y

De manera similar, puedes crear un eje Y.

javascript

En este caso:

  • axisLeft(yScale) crea un eje izquierdo basado en la escala yScale.
  • El eje se posiciona correctamente en el SVG.

Personalización de Ejes y Escalas

Personalización de Ticks

Puedes personalizar la cantidad y el formato de los ticks en un eje.

javascript

Agregar Etiquetas

Agregar etiquetas a los ejes facilita la interpretación de los gráficos.

javascript

Resumen

Las escalas y ejes en D3 son herramientas esenciales para mapear datos al espacio visual y proporcionar un contexto comprensible en gráficos. En este capítulo, cubrimos cómo crear y utilizar diferentes tipos de escalas y ejes, así como técnicas para personalizarlos.

Con las escalas y ejes, puedes construir gráficos coherentes y efectivos que comunican datos de manera clara. En los próximos capítulos, aplicaremos estos conceptos para crear diferentes tipos de gráficos y visualizaciones.


Pregúntame lo que sea