En el Capítulo 17 aprendiste lo básico de D3, cómo seleccionar y cambiar elementos DOM, cómo añadir otros nuevos y cómo aplicar el patrón de actualización de datos, que es el eje en torno al cual gira el D3 interactivo. En este capítulo, ampliaré lo aprendido hasta ahora y te mostraré cómo construir un elemento visual bastante novedoso, que muestre todos los Premios Nobel individuales por año(Figura 18-1). Esta línea de tiempo de los Nobel nos permitirá ampliar los conocimientos del último capítulo, demostrando una serie de técnicas nuevas, incluida una manipulación de datos más avanzada.
Figura 18-1. El gráfico objetivo de este capítulo, una cronología de los Premios Nobel
Empecemos mostrando cómo construimos el marco HTML para nuestro gráfico de línea de tiempo.
Construir el marco
La construcción de nuestro gráfico objetivo es similar a la de nuestro gráfico de barras de los Premios Nobel, que tratamos en detalle en el último capítulo. Primero utilizamos D3 para seleccionar nuestro contenedor <div> con ID nobel-time, luego utilizamos la anchura y la altura del contenedor, junto con y nuestros márgenes especificados, para crear nuestro grupo de gráficos svg:
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
