El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderás cómo limpiar y transformar datos para prepararlos para su visualización con D3.js. La limpieza y transformación de datos son pasos cruciales en el proceso de análisis de datos, ya que los datos en bruto a menudo contienen errores, valores faltantes o formatos inconsistentes que pueden afectar la precisión y la claridad de tus visualizaciones.

Objetivos de Aprendizaje

Comprender la importancia de la limpieza y transformación de datos.
Aprender técnicas comunes para limpiar datos.
Aplicar transformaciones a los datos para adecuarlos a las necesidades de visualización.
Utilizar herramientas y bibliotecas de JavaScript para la limpieza y transformación de datos.

Importancia de la Limpieza y Transformación de Datos

¿Por qué es importante?

Precisión: Datos limpios y bien transformados aseguran que las visualizaciones sean precisas y confiables.
Claridad: Datos bien estructurados facilitan la creación de visualizaciones claras y comprensibles.
Eficiencia: Datos preparados adecuadamente pueden ser procesados y visualizados más rápidamente.

Técnicas Comunes de Limpieza de Datos

2.1. Eliminación de Valores Faltantes

Los valores faltantes pueden distorsionar los resultados de tus visualizaciones. Puedes optar por eliminar filas con valores faltantes o imputar estos valores con técnicas estadísticas.

// Ejemplo: Eliminación de valores faltantes en un array de objetos
let data = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: null },
  { name: "Charlie", age: 30 }
];

let cleanedData = data.filter(d => d.age !== null);
console.log(cleanedData);
// Output: [{ name: "Alice", age: 25 }, { name: "Charlie", age: 30 }]

2.2. Corrección de Errores

Los errores en los datos pueden incluir errores tipográficos, valores fuera de rango o inconsistencias en el formato.

// Ejemplo: Corrección de errores en los datos
let data = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: -5 }, // Edad no válida
  { name: "Charlie", age: 30 }
];

let correctedData = data.map(d => {
  if (d.age < 0) d.age = null; // Corrige edades no válidas
  return d;
});
console.log(correctedData);
// Output: [{ name: "Alice", age: 25 }, { name: "Bob", age: null }, { name: "Charlie", age: 30 }]

2.3. Normalización de Datos

La normalización implica ajustar los valores de los datos a un rango común o formato estándar.

// Ejemplo: Normalización de datos
let data = [
  { name: "Alice", height: "5.5ft" },
  { name: "Bob", height: "170cm" }
];

let normalizedData = data.map(d => {
  if (d.height.includes("ft")) {
    d.height = parseFloat(d.height) * 30.48; // Convertir pies a cm
  } else {
    d.height = parseFloat(d.height); // Convertir string a número
  }
  return d;
});
console.log(normalizedData);
// Output: [{ name: "Alice", height: 167.64 }, { name: "Bob", height: 170 }]

Transformación de Datos

3.1. Agrupación de Datos

Agrupar datos puede ser útil para resumir información y hacerla más manejable.

// Ejemplo: Agrupación de datos por categoría
let data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "A", value: 15 },
  { category: "B", value: 25 }
];

let groupedData = d3.group(data, d => d.category);
console.log(groupedData);
// Output: Map { "A" => [{ category: "A", value: 10 }, { category: "A", value: 15 }], "B" => [{ category: "B", value: 20 }, { category: "B", value: 25 }] }

3.2. Agregación de Datos

La agregación implica calcular estadísticas como sumas, promedios o conteos sobre grupos de datos.

// Ejemplo: Agregación de datos para obtener sumas por categoría
let data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "A", value: 15 },
  { category: "B", value: 25 }
];

let aggregatedData = Array.from(d3.rollup(data, v => d3.sum(v, d => d.value), d => d.category));
console.log(aggregatedData);
// Output: [["A", 25], ["B", 45]]

3.3. Transformación de Formato

A veces, los datos necesitan ser transformados de un formato a otro para ser utilizados en visualizaciones.

// Ejemplo: Transformación de datos de un array de objetos a un array de arrays
let data = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

let transformedData = data.map(d => [d.name, d.age]);
console.log(transformedData);
// Output: [["Alice", 25], ["Bob", 30]]

Herramientas y Bibliotecas para Limpieza y Transformación de Datos

4.1. D3.js

D3.js proporciona varias funciones útiles para la manipulación de datos, como d3.group, d3.rollup, y d3.map.

4.2. Lodash

Lodash es una biblioteca de JavaScript que ofrece utilidades para trabajar con arrays, números, objetos, cadenas, etc.

// Ejemplo: Uso de Lodash para limpiar datos
let _ = require('lodash');

let data = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: null },
  { name: "Charlie", age: 30 }
];

let cleanedData = _.filter(data, d => d.age !== null);
console.log(cleanedData);
// Output: [{ name: "Alice", age: 25 }, { name: "Charlie", age: 30 }]

Ejercicio Práctico

Ejercicio 1: Limpieza de Datos

Dado el siguiente conjunto de datos, realiza las siguientes tareas:

Elimina las entradas con valores faltantes.
Corrige los errores en los datos (edades negativas).
Normaliza las alturas a centímetros.

let data = [
  { name: "Alice", age: 25, height: "5.5ft" },
  { name: "Bob", age: -5, height: "170cm" },
  { name: "Charlie", age: 30, height: null },
  { name: "David", age: 40, height: "6ft" }
];

// Solución
let cleanedData = data
  .filter(d => d.age !== null && d.height !== null)
  .map(d => {
    if (d.age < 0) d.age = null;
    if (d.height.includes("ft")) {
      d.height = parseFloat(d.height) * 30.48;
    } else {
      d.height = parseFloat(d.height);
    }
    return d;
  })
  .filter(d => d.age !== null);

console.log(cleanedData);
// Output: [{ name: "Alice", age: 25, height: 167.64 }, { name: "David", age: 40, height: 182.88 }]

Ejercicio 2: Transformación de Datos

Dado el siguiente conjunto de datos, agrupa los datos por categoría y calcula la suma de los valores para cada categoría.

let data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "A", value: 15 },
  { category: "B", value: 25 }
];

// Solución
let aggregatedData = Array.from(d3.rollup(data, v => d3.sum(v, d => d.value), d => d.category));
console.log(aggregatedData);
// Output: [["A", 25], ["B", 45]]

Conclusión

En esta sección, hemos aprendido la importancia de la limpieza y transformación de datos, así como técnicas y herramientas para llevar a cabo estas tareas. La limpieza y transformación de datos son pasos esenciales para garantizar que tus visualizaciones sean precisas, claras y eficientes. Con estos conocimientos, estarás mejor preparado para manejar datos en bruto y convertirlos en visualizaciones significativas y útiles.

En el próximo módulo, exploraremos cómo integrar D3.js con otras bibliotecas para ampliar las capacidades de tus visualizaciones.

Limpieza y Transformación de Datos

Objetivos de Aprendizaje

Importancia de la Limpieza y Transformación de Datos

¿Por qué es importante?

Técnicas Comunes de Limpieza de Datos

2.1. Eliminación de Valores Faltantes

2.2. Corrección de Errores

2.3. Normalización de Datos

Transformación de Datos

3.1. Agrupación de Datos

3.2. Agregación de Datos

3.3. Transformación de Formato

Herramientas y Bibliotecas para Limpieza y Transformación de Datos

4.1. D3.js

4.2. Lodash

Ejercicio Práctico

Ejercicio 1: Limpieza de Datos

Ejercicio 2: Transformación de Datos

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