Prefacio
Este libro se creó como una guía para ayudarte a aprender y explorar D3.js. Su objetivo es proporcionar una ruta de aprendizaje para que adquieras una sólida comprensión de sus conceptos fundamentales, aprendas a usar la mayoría de sus módulos y funciones, y adquieras la experiencia suficiente para crear tus propias visualizaciones D3.
Los conceptos fundamentales se explican en cada capítulo y luego se aplican a ejemplos más amplios en tutoriales paso a paso. Hay cientos de ejemplos que puedes descargar y ejecutar.
A lo largo del libro se utilizan listados de código, pero la mayoría de las veces se centran en una función específica y muestran solo un fragmento del código completo. No obstante, siempre puedes descargar el listado completo. Todos los ejemplos de código utilizados en el libro están disponibles en un repositorio público de GitHub (consulta los detalles a continuación). Puedes probar todos los ejemplos de código a medida que aprendes. También puedes usarlo como prefieras, ya que es gratuito y de código abierto.
Este libro cubre las funciones básicas y avanzadas de D3. Al terminar de leerlo, tras practicar con los ejemplos de código, creo que tendrá un conocimiento sólido y completo de esta biblioteca.
Para quién es este libro
El público objetivo ideal de este libro incluye desarrolladores y diseñadores web, periodistas de datos, científicos de datos y artistas que deseen crear visualizaciones interactivas basadas en datos para la Web.
Se requieren conocimientos básicos de HTML, CSS y JavaScript. No se requieren conocimientos previos de SVG.
Qué cubre este libro
El Capítulo 1, Introducción, presenta la biblioteca de JavaScript D3.js, describiendo sus principales características y conceptos, y cómo maneja datos para transformar documentos.
El Capítulo 2, Fundamentos técnicos, cubre las tecnologías web estándar fundamentales utilizadas por D3, como SVG, estructuras de datos JavaScript (ES 2015), HTML Canvas y formatos de datos estándar como JSON y CSV.
El Capítulo 3, Inicio rápido, incluye una introducción práctica paso a paso a D3.js que explora un poco de todo lo que se tratará más adelante en este libro. Aprenderá a vincular datos a elementos HTML y SVG y a crear un gráfico de barras horizontal sencillo, con funciones interactivas y transiciones animadas.
El Capítulo 4, Enlace de Datos, abarca la mayor parte del módulo d3-selection y describe las estrategias de enlace de datos en detalle mediante varios ejemplos. En este capítulo, también aprenderá a cargar y analizar archivos de datos externos y a usar los módulos d3-dsv y d3-fetch.
El Capítulo 5, Manipulación de Datos y Formato, explora las herramientas de seis módulos: d3-array, d3-collection, d3-random, d3-interpolate, d3-format y d3-time-format. Aprenderá a transformar matrices de datos, crear nuevas colecciones mediante agrupación, generar distribuciones aleatorias e histogramas, interpolar todo tipo de datos y formatear fechas y números según la configuración regional.
El Capítulo 6, Escalas, Ejes y Colores, muestra cómo crear y configurar ejes para cuadrículas cartesianas o radiales (d3-axis) y escalas que convierten datos de un dominio de entrada a un rango de salida (d3-scale). También se abordan esquemas de color, interpoladores y herramientas de manipulación de color en ejemplos que utilizan los módulos d3-color, d3-scale-chromatic y d3-interpolate.
El Capítulo 7, Generadores de Formas y Diseños, explora las funciones del generador del módulo d3-shape, utilizado para crear gráficos clásicos como gráficos de líneas, circulares y de áreas apiladas. En este capítulo, aprenderá a generar los datos para representar estos gráficos en SVG o Canvas.
El Capítulo 8, Animación e Interactividad, abarca el manejo de eventos, las transiciones y los comportamientos interactivos en D3, explorando los módulos d3-transition, d3-ease y d3-timer. Este capítulo también explora el zoom (d3-zoom), el arrastre (d3-drag) y el pincel (d3-brush).
El Capítulo 9, Visualización de datos jerárquicos, muestra cómo preparar un conjunto de datos para que pueda usarse para representar una jerarquía, utilizando técnicas de anidamiento y herramientas proporcionadas por el módulo d3-hierarchy para representar datos jerárquicos como un árbol, dendograma (clúster), mapa de árbol, paquete de círculos o partición.
El Capítulo 10, Visualización de Flujos y Redes, explora la visualización de diagramas de redes y flujos. Aprenderá a crear un diagrama de Sankey (d3-sankey), un diagrama de cuerdas/cintas (d3-chord) y una simulación de animación dirigida por fuerzas (d3-force).
El Capítulo 11, Visualización de Datos Geográficos, explora el módulo d3-geo, que contiene herramientas para operaciones en geometría plana y esférica. Aprenderá a generar visualizaciones de mapas interactivos con D3.js y diferentes proyecciones geográficas.
Para aprovechar al máximo este libro
La mejor manera de aprender una biblioteca es programando con ella. Si sigues los ejemplos de este libro y los pones en práctica mientras lees, estoy seguro de que tu aprendizaje será rápido. Además, asegúrate de configurar el entorno de desarrollo de tu navegador como se indica en el Capítulo 1: Introducción, para que puedas detectar errores de programación rápidamente. Los errores son una gran fuente de aprendizaje, siempre que puedas encontrarlos y corregirlos. Si te atascas, siempre puedes recurrir a los ejemplos de código.
Al escribir este libro, me esforcé al máximo por proporcionar la información más precisa posible. Todos los listados de código se probaron y se hizo un esfuerzo adicional para garantizar que todos los ejemplos de código estuvieran correctamente referenciados en el libro y funcionaran como se espera. Este libro se basa en la versión 5.9.2 de D3.js. Espero que los ejemplos de código sigan funcionando con cualquier versión 5.x, pero existe una pequeña posibilidad de que algún código no funcione correctamente si se utiliza una versión posterior.
Descargue los archivos de código de ejemplo
Puede descargar los archivos de código de ejemplo de este libro desde su cuenta en www.packt.com. Si compró el libro en otro sitio, puede visitar www.packt.com/support y registrarse para recibir los archivos directamente por correo electrónico.
Puede descargar los archivos de código siguiendo estos pasos:
- Inicie sesión o regístrese en www.packt.com.
- Seleccione la pestaña SOPORTE.
- Haga clic en Descargas de códigos y erratas.
- Ingrese el nombre del libro en el cuadro Buscar y siga las instrucciones en pantalla.
Una vez descargado el archivo, asegúrese de descomprimir o extraer la carpeta utilizando la última versión de:
- WinRAR/7-Zip para Windows
- Zipeg/iZip/UnRarX para Mac
- 7-Zip/PeaZip para Linux
El paquete de código del libro también está alojado en GitHub en https://github.com/PacktPublishing/Learn-D3.js. En caso de que se actualice el código, se publicará en el repositorio de GitHub existente.
También tenemos otros paquetes de código de nuestro amplio catálogo de libros y vídeos disponibles en https://github.com/PacktPublishing/. ¡Échales un vistazo!
Descargar las imágenes en color
También proporcionamos un archivo PDF con imágenes a color de las capturas de pantalla y diagramas utilizados en este libro. Puede descargarlo aquí: http://www.packtpub.com/sites/default/files/downloads/9781838645571_ColorImages.pdf.
Convenciones utilizadas
A lo largo de este libro se utilizan varias convenciones textuales.
CodeInText: Indica palabras clave en el texto, nombres de tablas de bases de datos, nombres de carpetas, nombres de archivos, extensiones de archivos, rutas de acceso, URL ficticias, entradas del usuario y cuentas de Twitter. Ejemplo: “Este código aplica la clase .red a cada elemento de una colección”.
Un bloque de código se establece de la siguiente manera:
<p>See results in console log.</p>
<div id="section">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<p>Paragraph 3</p>Cualquier entrada o salida de la línea de comandos se escribe de la siguiente manera:
npm install d3Las advertencias o notas importantes aparecen así.
Los consejos y trucos aparecen así: