El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre las escalas en D3.js, una herramienta fundamental para mapear datos a valores visuales. Las escalas nos permiten transformar datos en coordenadas, colores, tamaños y otros atributos visuales. Este conocimiento es esencial para crear visualizaciones precisas y efectivas.

Conceptos Clave

Escalas en D3.js: Las escalas son funciones que mapean un dominio de entrada (datos) a un rango de salida (valores visuales).
Tipos de Escalas: D3.js ofrece varios tipos de escalas, incluyendo lineales, ordinales, de tiempo y logarítmicas.
Dominio y Rango: El dominio define los valores de entrada y el rango define los valores de salida.

Tipos de Escalas

Escalas Lineales

Las escalas lineales son las más comunes y se utilizan para datos numéricos continuos.

// Crear una escala lineal
const scaleLinear = d3.scaleLinear()
  .domain([0, 100])  // Dominio de entrada
  .range([0, 500]);  // Rango de salida

// Usar la escala
console.log(scaleLinear(50));  // Salida: 250

Escalas Ordinales

Las escalas ordinales se utilizan para datos categóricos.

// Crear una escala ordinal
const scaleOrdinal = d3.scaleOrdinal()
  .domain(['A', 'B', 'C'])  // Dominio de entrada
  .range([10, 20, 30]);     // Rango de salida

// Usar la escala
console.log(scaleOrdinal('B'));  // Salida: 20

Escalas de Tiempo

Las escalas de tiempo se utilizan para datos temporales.

// Crear una escala de tiempo
const scaleTime = d3.scaleTime()
  .domain([new Date(2020, 0, 1), new Date(2020, 11, 31)])  // Dominio de entrada
  .range([0, 100]);  // Rango de salida

// Usar la escala
console.log(scaleTime(new Date(2020, 5, 15)));  // Salida: 50

Escalas Logarítmicas

Las escalas logarítmicas se utilizan para datos que varían exponencialmente.

// Crear una escala logarítmica
const scaleLog = d3.scaleLog()
  .domain([1, 1000])  // Dominio de entrada
  .range([0, 100]);  // Rango de salida

// Usar la escala
console.log(scaleLog(10));  // Salida: 50

Ejemplo Práctico

Vamos a crear un gráfico de barras simple utilizando escalas lineales.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gráfico de Barras con D3.js</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <svg width="600" height="400"></svg>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// Datos
const data = [10, 20, 30, 40, 50];

// Dimensiones del SVG
const width = 600;
const height = 400;

// Crear una escala lineal para el eje X
const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, width])
  .padding(0.1);

// Crear una escala lineal para el eje Y
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);

// Seleccionar el SVG
const svg = d3.select("svg");

// Crear las barras
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i))
  .attr("y", d => yScale(d))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d))
  .attr("fill", "steelblue");

Ejercicio Práctico

Ejercicio

Crea un gráfico de dispersión utilizando escalas lineales para mapear los datos a coordenadas X e Y.

Datos

const data = [
  {x: 10, y: 20},
  {x: 20, y: 30},
  {x: 30, y: 40},
  {x: 40, y: 50},
  {x: 50, y: 60}
];

Pasos

Configura el entorno HTML y JavaScript.
Crea escalas lineales para los ejes X e Y.
Dibuja los puntos en el gráfico de dispersión.

Solución

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gráfico de Dispersión con D3.js</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <svg width="600" height="400"></svg>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// Datos
const data = [
  {x: 10, y: 20},
  {x: 20, y: 30},
  {x: 30, y: 40},
  {x: 40, y: 50},
  {x: 50, y: 60}
];

// Dimensiones del SVG
const width = 600;
const height = 400;

// Crear una escala lineal para el eje X
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, width]);

// Crear una escala lineal para el eje Y
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.y)])
  .range([height, 0]);

// Seleccionar el SVG
const svg = d3.select("svg");

// Crear los puntos
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", "steelblue");

Conclusión

En esta sección, hemos aprendido sobre las escalas en D3.js y cómo utilizarlas para mapear datos a valores visuales. Hemos explorado diferentes tipos de escalas y creado ejemplos prácticos para entender su aplicación. Las escalas son una herramienta poderosa en D3.js que nos permite crear visualizaciones precisas y efectivas. En el próximo módulo, profundizaremos en la creación de visualizaciones básicas utilizando estos conceptos.

Usando Escalas de D3

Conceptos Clave

Tipos de Escalas

Escalas Lineales

Escalas Ordinales

Escalas de Tiempo

Escalas Logarítmicas

Ejemplo Práctico

HTML

JavaScript (script.js)

Ejercicio Práctico

Ejercicio

Datos

Pasos

Solución

HTML

JavaScript (script.js)

Conclusión

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