Desarrollo Frontend · FRO-160

Visualización web de datos con D3.js

Escalas, ejes y transiciones para gráficos a medida que ninguna librería de alto nivel permite.

Bajo demanda Avanzado 7 módulos · 34 clases

Formato asíncrono Desarrollo, Ingeniería / Industria D3.js, JavaScript

DATOS DESARROLLO

Lo que aprenderás

Seleccionar y enlazar datos al DOM con el patrón de entrada, actualización y salida
Construir escalas lineales, temporales, ordinales y de color según el tipo de dato
Generar ejes, rejillas y formatos de número y fecha adaptados al idioma
Dibujar formas con los generadores de línea, área, arco y curva de D3
Animar cambios de datos con transiciones encadenadas e interpolación personalizada
Añadir interacción con zoom, brocha, tooltip y filtrado cruzado entre gráficos
Proyectar datos geográficos con d3-geo y TopoJSON sobre mapas propios

Contenido del curso

7 módulos · 34 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Presentación y entorno 4 clases

Qué es D3 y qué no es una librería de gráficos
Proyecto de partida con módulos de D3
SVG imprescindible: coordenadas, grupos y transformaciones
Cargar datos con d3-fetch y comprobar tipos

Módulo 2 · Selecciones y enlace de datos 5 clases

Selecciones y modificación de atributos
El patrón de entrada, actualización y salida
join y su comportamiento con claves
Datos anidados y grupos de elementos
Ejercicio: gráfico de barras construido a mano

Módulo 3 · Escalas y ejes 5 clases

Escalas lineales, de potencia y logarítmicas
Escalas temporales y de banda
Escalas de color secuenciales y categóricas
Ejes, marcas y rejillas
Formato de números y fechas en castellano

Módulo 4 · Generadores de formas 5 clases

Generador de línea y tipos de curva
Áreas, áreas apiladas y línea de base
Arcos, sectores y diagramas circulares
Jerarquías: treemap y diagrama de árbol
Ejercicio: serie temporal con varias líneas

Módulo 5 · Transiciones y animación 5 clases

Transiciones, duración y suavizado
Interpolación de valores y de atributos
Transiciones encadenadas y retardos por elemento
Animar la entrada y salida de datos nuevos
Cuándo la animación aporta y cuándo estorba

Módulo 6 · Interacción 5 clases

Eventos de puntero y detección del dato más cercano
Tooltip posicionado y accesible
Zoom y desplazamiento en un gráfico grande
Brocha para selección de rango
Filtrado cruzado entre varios gráficos

Módulo 7 · Mapas y proyecto de cierre 5 clases

Proyecciones geográficas con d3-geo
TopoJSON y preparación de una capa propia
Mapa coroplético con leyenda y escala de color
Panel final con gráficos coordinados
Rendimiento con muchos elementos y paso a canvas

Requisitos

JavaScript moderno con soltura: módulos, funciones de orden superior y promesas
Conocimiento del DOM y de SVG a nivel de atributos y transformaciones
Nociones de estadística descriptiva para interpretar los datos representados

Descripción

Las bibliotecas de gráficos de alto nivel resuelven el ochenta por ciento de los casos y bloquean el resto: un eje que debe romperse, una anotación sobre un punto concreto, una transición que cuenta la evolución de una serie o un mapa con una proyección poco habitual. Cuando el gráfico forma parte del producto y no es un adorno, ese último tramo es el que importa.

El curso trabaja D3 por capas: primero el enlace de datos y las escalas, que son la parte que de verdad se reutiliza, y después los generadores de formas, las transiciones y la interacción. Se construyen gráficos completos sobre datos reales, incluido un panel con varios gráficos coordinados por filtrado cruzado y un mapa coroplético con datos de la comunidad.

Al terminar se pueden diseñar visualizaciones a medida y también leer y adaptar los muchos ejemplos publicados con D3. Encaja con el trabajo de paneles de datos, informes interactivos y visualización de datos de instrumentación industrial, y con equipos que necesitan un gráfico que ninguna herramienta ofrece de serie.

¿Para quién es este curso?

Desarrolladores frontend que necesitan gráficos que las librerías de alto nivel no permiten
Perfiles de ingeniería que representan datos de instrumentación o de proceso en paneles web
Personas que construyen informes interactivos y visualizaciones para publicación