
Pro D3.js
Marcos Iglesias
- Editorial
- Apress
- Año
- 2019
- Páginas
- ~223
- Nivel
- Intermedio
De qué trata
Libro avanzado de Marcos Iglesias, ingeniero de software sénior en Eventbrite y mantenedor de la librería de gráficos de código abierto Britecharts. Enseña a convertir el código típico de un gráfico D3.js en módulos reutilizables, ampliables, mantenibles y testeables. Por su fecha (2019) trabaja con D3 moderno, la API modular de la versión 5, y con JavaScript ES2015+. Va dirigido a ingenieros de visualización, científicos de datos y desarrolladores frontend que ya conocen los fundamentos de D3 y tienen experiencia con JavaScript; no es un libro para empezar desde cero.
Empieza explicando por qué D3 y el JavaScript moderno son buenas herramientas para visualizar datos en la web. Luego analiza la anatomía de un gráfico D3 típico, con sus puntos fuertes y débiles, y repasa estrategias para encapsular el código. El núcleo del libro es el patrón de API reutilizable (reusable chart API): gráficos componibles y configurables. Con él, un gráfico de barras inicial se convierte en un componente listo para producción. A continuación toma Britecharts como caso de estudio: cómo se usa a diario, cómo se componen sus componentes y cómo se extiende un gráfico para devolver la mejora al proyecto mediante un pull request. Los capítulos finales tratan el desarrollo guiado por pruebas (TDD) de gráficos, la compilación y publicación de una librería en npm con Webpack y Babel, la generación de documentación a partir de comentarios (con ESLint para vigilar las anotaciones y GitHub Pages para alojarla) y el uso de D3 dentro de aplicaciones React.
El libro aporta algo que pocos manuales de D3 tratan: prácticas de ingeniería de software aplicadas a la visualización, como modularidad, pruebas, documentación y publicación de código abierto. Las enseñanzas se apoyan en la experiencia real de publicar Britecharts y Britecharts-React. Deja fuera el catálogo exhaustivo de tipos de gráficos, los mapas y las técnicas de diseño visual. Su valor es mayor para equipos que mantienen muchos gráficos en producción o que quieren crear su propia librería. Conviene saber manejar npm y un empaquetador, además de los fundamentos de selecciones, escalas y ejes de D3.
- D3.js v5
- Reusable Chart API
- Componentes modulares
- Britecharts
- TDD
- Webpack
- Babel
- npm
- Documentación de código
- ESLint
- React
¿Cómo enseña?
Teoría + práctica
- ✓ Incluye ejercicios
- ✓ Incluye proyectos
Proyectos
Gráfico de barras reutilizable
Un gráfico de barras D3 convencional se refactoriza paso a paso hasta convertirlo en un componente configurable, componible y testeable, siguiendo el patrón de API reutilizable y con pruebas guiadas por TDD.
Extensión y contribución a Britecharts
Se amplía un gráfico de la librería Britecharts de Eventbrite y la mejora se devuelve al proyecto mediante un pull request, aplicando el flujo de contribución al código abierto.
Librería de gráficos publicada
Se monta, compila y publica en npm una librería de gráficos de código abierto con Webpack y Babel, y se genera su documentación a partir de comentarios para alojarla en GitHub Pages.

