
Data Visualization with JavaScript
Stephen A. Thomas
- Editorial
- No Starch Press
- Año
- 2015
- Páginas
- ~381
- Nivel
- Intermedio
De qué trata
Libro de No Starch Press en el que Stephen A. Thomas, desarrollador frontend del Departamento de Tecnología Educativa de Georgia Tech, enseña a crear visualizaciones de datos prácticas para la web solo con JavaScript, HTML y CSS. Se publicó en 2015 y refleja el ecosistema de esa época: jQuery, librerías de gráficos basadas en canvas y SVG, y D3.js en su versión 3. Está pensado para quienes ya hacen páginas web y conocen JavaScript y los selectores básicos de jQuery, pero nunca han trabajado con visualización de datos. La editorial lo resume como un libro para mojarse los pies sin lanzarse a la parte honda.
El recorrido es progresivo. Empieza con gráficos de barras, líneas, dispersión y circulares hechos con Flotr2. Sigue con gráficos interactivos en Flot (selección, zoom, seguimiento de valores y carga de datos por AJAX), y luego con la integración de varios gráficos en una página mediante jQuery Sparklines y gráficos compuestos. El capítulo de gráficos especializados presenta los tree maps con Treemap-Squared y Raphaël, los mapas de calor con heatmap.js, los grafos de redes con sigma.js y su plugin forceAtlas2, y las nubes de palabras con wordcloud2. Las líneas de tiempo se construyen de tres maneras: con Chronoline.js, con Timeline JS y con HTML, CSS y JavaScript sin librerías. Para los datos geográficos usa fuentes de mapas (Continental y Stately), mapas SVG coloreados con Chroma.js, Modest Maps con teselas de Stamen y Leaflet con animaciones. Después dedica un capítulo a visualizaciones a medida con D3.js. Los dos últimos bloques tratan la gestión de datos en el navegador con Underscore.js y la creación de una aplicación de una sola página con Yeoman y Backbone.js.
Todos los ejemplos usan datos reales: poblaciones de estados de EE. UU., tiros de baloncesto, álbumes de jazz y sus músicos, etiquetas de Stack Overflow, la cronología de las obras de Shakespeare, indicadores de salud de los condados de Georgia, avistamientos de ovnis y rutas de trenes de los años 40. Así se puede comparar cómo se resuelve cada tipo de gráfico con distintas herramientas. El libro termina con una aplicación completa guiada por datos, desarrollada a lo largo de dos capítulos. Su punto fuerte es el panorama amplio y práctico, con buenas explicaciones sobre cuándo conviene cada tipo de visualización. Su principal limitación es la edad: Flotr2, Chronoline, Modest Maps, Backbone y Yeoman han quedado en desuso, y D3 cambió mucho a partir de la versión 4. Los conceptos siguen siendo válidos, pero hay que adaptar el código a herramientas actuales como D3 v7, Chart.js o frameworks modernos. No profundiza en estadística ni en diseño avanzado de visualizaciones.
- Visualización de datos
- JavaScript
- Flotr2 y Flot
- D3.js
- Gráficos interactivos
- Tree maps y mapas de calor
- Grafos de redes (sigma.js)
- Líneas de tiempo
- Mapas con Leaflet
- SVG
- Underscore.js
- Backbone.js
¿Cómo enseña?
Teoría + práctica
- ✓ Incluye ejercicios
- ✓ Incluye proyectos
Proyectos
Aplicación web guiada por datos (SPA)
Aplicación de una sola página que se desarrolla en los dos últimos capítulos: carga datos desde la web, los procesa y los muestra con visualizaciones. Usa Yeoman para las herramientas de desarrollo y Backbone.js para organizar modelos, vistas y rutas.
Mapa animado de rutas ferroviarias
Mapa hecho con Leaflet y un control de animación propio que recorre los horarios y paradas de los trenes Silver Comet y Southerner de los años 40, entre Washington D. C. y Atlanta.

