El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Escalas Lineales y Ordinales

Siguiente ►
►

En este módulo, aprenderemos sobre dos tipos fundamentales de escalas en D3.js: las escalas lineales y las escalas ordinales. Las escalas son una parte crucial de D3.js, ya que nos permiten mapear datos a valores visuales, como posiciones en un gráfico, colores, tamaños, etc.

  1. Introducción a las Escalas

Las escalas en D3.js son funciones que mapean un dominio de entrada (valores de datos) a un rango de salida (valores visuales). Esto es esencial para crear visualizaciones precisas y efectivas.

1.1. Conceptos Clave

  • Dominio (Domain): El conjunto de valores de entrada que la escala puede recibir.
  • Rango (Range): El conjunto de valores de salida que la escala puede producir.
  • Escala Lineal: Mapea un dominio continuo a un rango continuo.
  • Escala Ordinal: Mapea un dominio discreto a un rango discreto.

  1. Escalas Lineales

Las escalas lineales son útiles cuando trabajamos con datos numéricos continuos. Estas escalas mapean un dominio de valores numéricos a un rango de valores numéricos de manera lineal.

2.1. Creando una Escala Lineal

Para crear una escala lineal en D3.js, utilizamos la función d3.scaleLinear(). A continuación, se muestra un ejemplo básico:

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

// Usar la escala para mapear un valor
const valorMapeado = escalaLineal(50);  // Resultado: 250
console.log(valorMapeado);

2.2. Explicación del Código

  • d3.scaleLinear(): Crea una nueva escala lineal.
  • .domain([0, 100]): Define el dominio de la escala, en este caso de 0 a 100.
  • .range([0, 500]): Define el rango de la escala, en este caso de 0 a 500.
  • escalaLineal(50): Mapea el valor 50 del dominio al rango, resultando en 250.

2.3. Ejemplo Práctico

Supongamos que queremos crear un gráfico de barras donde la altura de las barras se base en valores de datos. Utilizaremos una escala lineal para mapear los valores de datos a alturas de barras.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gráfico de Barras con Escala Lineal</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const datos = [10, 20, 30, 40, 50];
        const alturaMaxima = 300;

        const escalaLineal = d3.scaleLinear()
            .domain([0, d3.max(datos)])
            .range([0, alturaMaxima]);

        const svg = d3.select("svg");

        svg.selectAll("rect")
            .data(datos)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 50)
            .attr("y", d => alturaMaxima - escalaLineal(d))
            .attr("width", 40)
            .attr("height", d => escalaLineal(d))
            .attr("fill", "steelblue");
    </script>
</body>
</html>

2.4. Explicación del Código

  • d3.max(datos): Encuentra el valor máximo en el conjunto de datos.
  • escalaLineal(d): Mapea cada valor de datos a una altura de barra.
  • svg.selectAll("rect"): Selecciona todos los elementos rect en el SVG.
  • .data(datos): Vincula los datos a los elementos rect.
  • .enter(): Crea elementos rect para cada dato.
  • .attr("x", (d, i) => i * 50): Define la posición horizontal de cada barra.
  • .attr("y", d => alturaMaxima - escalaLineal(d)): Define la posición vertical de cada barra.
  • .attr("width", 40): Define el ancho de cada barra.
  • .attr("height", d => escalaLineal(d)): Define la altura de cada barra.
  • .attr("fill", "steelblue"): Define el color de las barras.

  1. Escalas Ordinales

Las escalas ordinales son útiles cuando trabajamos con datos categóricos. Estas escalas mapean un dominio de valores discretos a un rango de valores discretos.

3.1. Creando una Escala Ordinal

Para crear una escala ordinal en D3.js, utilizamos la función d3.scaleOrdinal(). A continuación, se muestra un ejemplo básico:

// Crear una escala ordinal
const escalaOrdinal = d3.scaleOrdinal()
    .domain(["A", "B", "C", "D"])
    .range(["rojo", "verde", "azul", "naranja"]);

// Usar la escala para mapear un valor
const colorMapeado = escalaOrdinal("B");  // Resultado: "verde"
console.log(colorMapeado);

3.2. Explicación del Código

  • d3.scaleOrdinal(): Crea una nueva escala ordinal.
  • .domain(["A", "B", "C", "D"]): Define el dominio de la escala, en este caso cuatro categorías.
  • .range(["rojo", "verde", "azul", "naranja"]): Define el rango de la escala, en este caso cuatro colores.
  • escalaOrdinal("B"): Mapea la categoría "B" al color "verde".

3.3. Ejemplo Práctico

Supongamos que queremos crear un gráfico de barras donde el color de las barras se base en categorías. Utilizaremos una escala ordinal para mapear las categorías a colores.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gráfico de Barras con Escala Ordinal</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const datos = [
            {categoria: "A", valor: 10},
            {categoria: "B", valor: 20},
            {categoria: "C", valor: 30},
            {categoria: "D", valor: 40}
        ];
        const alturaMaxima = 300;

        const escalaLineal = d3.scaleLinear()
            .domain([0, d3.max(datos, d => d.valor)])
            .range([0, alturaMaxima]);

        const escalaOrdinal = d3.scaleOrdinal()
            .domain(["A", "B", "C", "D"])
            .range(["red", "green", "blue", "orange"]);

        const svg = d3.select("svg");

        svg.selectAll("rect")
            .data(datos)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 50)
            .attr("y", d => alturaMaxima - escalaLineal(d.valor))
            .attr("width", 40)
            .attr("height", d => escalaLineal(d.valor))
            .attr("fill", d => escalaOrdinal(d.categoria));
    </script>
</body>
</html>

3.4. Explicación del Código

  • d3.max(datos, d => d.valor): Encuentra el valor máximo en el conjunto de datos.
  • escalaLineal(d.valor): Mapea cada valor de datos a una altura de barra.
  • escalaOrdinal(d.categoria): Mapea cada categoría a un color.
  • svg.selectAll("rect"): Selecciona todos los elementos rect en el SVG.
  • .data(datos): Vincula los datos a los elementos rect.
  • .enter(): Crea elementos rect para cada dato.
  • .attr("x", (d, i) => i * 50): Define la posición horizontal de cada barra.
  • .attr("y", d => alturaMaxima - escalaLineal(d.valor)): Define la posición vertical de cada barra.
  • .attr("width", 40): Define el ancho de cada barra.
  • .attr("height", d => escalaLineal(d.valor)): Define la altura de cada barra.
  • .attr("fill", d => escalaOrdinal(d.categoria)): Define el color de las barras.

  1. Ejercicios Prácticos

Ejercicio 1: Crear una Escala Lineal

Crea una escala lineal que mapee un dominio de [0, 200] a un rango de [0, 1000]. Usa esta escala para mapear el valor 150.

Solución:

const escalaLineal = d3.scaleLinear()
    .domain([0, 200])
    .range([0, 1000]);

const valorMapeado = escalaLineal(150);  // Resultado: 750
console.log(valorMapeado);

Ejercicio 2: Crear una Escala Ordinal

Crea una escala ordinal que mapee las categorías ["X", "Y", "Z"] a los colores ["purple", "yellow", "cyan"]. Usa esta escala para mapear la categoría "Y".

Solución:

const escalaOrdinal = d3.scaleOrdinal()
    .domain(["X", "Y", "Z"])
    .range(["purple", "yellow", "cyan"]);

const colorMapeado = escalaOrdinal("Y");  // Resultado: "yellow"
console.log(colorMapeado);

  1. Conclusión

En esta lección, hemos aprendido sobre las escalas lineales y ordinales en D3.js. Las escalas son herramientas poderosas que nos permiten mapear datos a valores visuales de manera efectiva. Hemos visto cómo crear y utilizar estas escalas con ejemplos prácticos y ejercicios. En el próximo módulo, exploraremos cómo crear visualizaciones básicas utilizando estas escalas y otros conceptos de D3.js.

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados