Hola, soy Julià Minguillón y en este video vamos a ver una introducción a D3, una herramienta para crear gráficos interactivos. Primero, empezaremos viendo los conceptos básicos que hay detrás de D3 y veremos, después, el significado de las tres "D" de D3. Después, veremos dos elementos claves que nos proporciona D3 que son los "layouts" y la interactividad. Después, veremos la utilización de D3 con datos provenientes de infraestructuras Big Data y veremos los pros y contras de esta herramienta. Y, finalmente, veremos algunos ejemplos de usos de D3. D3 es una librería JavaScript para la creación de visualizaciones interactivas en entornos web. La idea es que visualizaremos los gráficos creados con D3 mediante el navegador web. Esta librería fue creada en febrero de 2011 por Mike Bostock y otros, aunque Mike Bostock es quien ostenta el título de autor principal de la librería. Está basada en trabajos previos como Prefuse, Flare y Protovis, pero fue D3 la primera librería que realmente tuvo un éxito masivo y ha sido utilizada masivamente en el ámbito de la visualización de datos. Uno de los aspectos clave de D3 es que permite un control total sobre el aspecto y funcionalidades de la visualización de datos y, para ello, se fundamenta en toda la estructura de los documentos web, es decir, HTML5, CSS, el documento DOM y la generación de gráficos mediante el formato SVG. Y, también, otro de los aspectos interesantes de D3 es que nos proporciona o nos presenta la visualización como interfaz a los propios datos, de forma que es posible crear visualizaciones interactivas que nos permitan manipular los datos. Las siglas de D3 vienen de "Data Driven Documents", que es, su traducción literal, "documentos dirigidos por datos". La idea es que D3, lo que hace es convertir ficheros que contienen datos en visualizaciones, en elementos gráficos. D3 nos proporciona diferentes operaciones para leer ficheros CSV, JSON o geoJSON, que es son formatos específicos de mapas, y también XML. Una vez leídos los datos, nos proporciona herramientas para mapear dichos datos a elementos o atributos que componen la página web, mediante la opción o la operación de selección. D3, de hecho, no genera gráficos directamente, no genera un gráfico de barras, por ejemplo, o un diagrama de fuerza, sino que lo que hace es mapear los datos a cada uno de los elementos que los componen y sus atributos, es decir, nodos, barras, etcétera, etcétera, y los atributos como la forma, el color, su posición, etcétera, etcétera. Lo que sí que proporciona D3 es que, para facilitar la creación de visualizaciones complejas, existe el concepto de "layout" que vamos a ver a continuación. Un "layout", como hemos dicho, es una estructura ya precreada para la creación de visualizaciones complejas. Estas visualizaciones pueden ser estructuradas, pueden ser jerárquicas, pueden ser relacionales o combinaciones de las anteriores. La idea de los "layouts" es que son usables como caja negra, es posible cargar ficheros con datos, y mediante un "layout" estándar, es posible convertir estos datos en una visualización interactiva, de forma que sin cambiar la codificación, sin cambiar el "layout", cambiando los datos, obtenemos diferentes visualizaciones. De esta forma podemos pensar en un "layout" como una especie de molde que, a partir de un fichero de entrada y la suma al "layout" adecuado, obtenemos la visualización deseada. Por otra parte, como hemos mencionado, uno de los aspectos claves de D3 es sus capacidades interactivas. Estas capacidades están, en principio, a un nivel de ventana, es decir, la visualización que estamos viendo. Y podemos utilizar las operaciones típicas como el "zoom", el "pan", desplazarnos por la visualización, etcétera. Pero, también, es posible añadir elementos de interactividad a nivel de elemento, de forma que cuando estamos cerca, o hacemos clic, o pasamos por encima de cualquier elemento de los que componen la visualización, podemos añadir "hovering" para añadir detalle, podemos realizar operaciones en caso de realizar un clic y podemos, también, en el caso de algunos "layouts", realizar operaciones de "drag and drop" sobre los elementos. Otro aspecto interesante que tiene D3 es que nos proporciona transiciones animadas, como veremos a continuación. D3 tiene muchos "layouts" disponibles, los tiene, como se puede observar en esta diapositiva, de muchos tipos diferentes. Para representar árboles, para representar clústers, "treemaps", "packing", particiones del espacio, diagramas Chord, diagramas de Sankey, etcétera, etcétera. Veamos algunos ejemplos en la galería de D3. En esta galería que está en GitHub están colgados centenares de ejemplos de forma colaborativa que han sido creados utilizando D3. Están organizados por temática aunque, realmente, se trata de una colección que muestra ejemplos sin realmente ninguna estructura. De todas formas, es posible observar diferentes gráficos creados con D3 y sus capacidades. Veamos uno, por ejemplo, que nos muestre esta capacidad que tiene D3 para crear transiciones interactivas. Así, por ejemplo, tenemos este "layout" que es un árbol colapsable que nos muestra una estructura jerárquica, como sería una estructura de directorios, por ejemplo. Pero, podemos ver que si hacemos clic en un elemento, el grafo o, en este caso, el árbol, cambia teniendo en cuenta los datos que estamos desplegando o sin desplegar. En el caso de que no podamos hacer clic, no pasa nada, pero en el caso de elementos, en este caso, que están de color azul, si hacemos clic se nos despliega el árbol correspondiente. Esto está realizado utilizando D3 y leyendo datos de un fichero JSON que, seguramente, ocupa muy pocas líneas, especialmente en la visualización y esto es lo que hace interesante a D3. D3, no es que esté especialmente pensado para visualizar datos provenientes de Big Data porque, en el fondo, D3 no gestiona pixeles, sino elementos gráficos y sus atributos. Y lo hace de forma muy eficiente, pero utilizando el formato gráfico SVG. Como hemos dicho, D3 utiliza el navegador para mostrar estos elementos. Por lo tanto, si tenemos que cargar un fichero muy grande, lo estaremos cargando en nuestro navegador en el cliente, lo que representa, o puede representar, un elevado consumo de memoria y, por lo tanto, no se suele utilizar herramientas "online" web como D3 para la visualización de grandes volúmenes de datos. De hecho, D3, se puede decir que es muy eficiente o eficiente hasta diez a la cuatro, o del orden de diez a la cuatro elementos, pero empieza a degradarse rápidamente a partir del orden de diez a la cinco elementos, de forma que no es claramente factible visualizar visualizaciones que estén compuestas por más de 100.000 elementos. De hecho, para mayores volúmenes de datos, es mejor usar otras opciones de más bajo nivel que D3 como, por ejemplo, "canvas" de HTML5 que es parecido, pero utiliza otro concepto diferente al que utiliza D3. D3 presenta muchos pros más que contras para la creación de visualizaciones y, de hecho, son los pros los que lo han convertido un poco en el estado del arte para la creación de visualizaciones interactivas. Así, D3 permite el control total del aspecto final de la visualización, creando visualizaciones con un aspecto estético muy conseguido. Las visualizaciones creadas en D3 están disponibles online, lo cual permite su fácil acceso y no es necesario instalar ninguna herramienta para visualizarlas. Se trata de una librería de código abierto, por lo que también existe una gran cantidad de código D3 reutilizable, de forma que es muy factible que ya encontremos una visualización en D3 parecida o que nos sirva como base para la que queramos crear nosotros. Y, finalmente, como hemos comentado, D3 ofrece muchos elementos de interactividad y de transiciones animadas de forma que las visualizaciones creadas permiten la manipulación de los datos. Por el contrario, la utilización de D3 requiere conocimientos de programación, HTML, CSS, etcétera, etcétera, y además, tiene una curva de aprendizaje elevada y no resulta sencillo empezar a utilizarlo. Además,D3 no está pensado para la creación de gráficos sencillos como un gráfico de barras que, aunque pueda ser creado con D3, es un poco innecesario debido a su complejidad. Veamos ahora diferentes ejemplos de usos de D3. Uno de los ejemplos típicos de D3, como aprovechando sus capacidades de interactividad, es para el análisis visual de un conjunto de datos, ya sea un análisis explicativo o un análisis exploratorio aprovechando esta interactividad. D3, al ser una herramienta "online", "web", se utiliza mucho para crear sitios "web" interactivos donde se presentan infografías o visualizaciones interactivas y, en concreto, para el periodismo de datos siendo el New York Times un buen ejemplo dado que, de hecho, durante dos años tuvo en nómina como creadores de las visualizaciones al propio Mike Bostock, el creador de D3. Finalmente, D3 también se está empezando a utilizar mucho para la creación de "dashboards" interactivos, lo que son los "front-end" para el acceso a resúmenes y presentaciones de datos que pueden estar en infraestructuras "big data" o en bases de datos tradicionales. Veamos un ejemplo del New York Times, creado por Mike Bostock mientras estuvo trabajando allí, para ver qué palabras utilizaban los candidatos a la presidencia y los compañeros de partido en los mitines durante la campaña de las elecciones de los Estados Unidos. La idea era analizar el contenido de los mitines políticos en Estados Unidos durante dicha campaña electoral, de forma que fuera posible visualizar las palabras más usadas por cada ponente y por cada partido. Esta visualización, que es una página "web", combina diferentes elementos estáticos con otros dinámicos y "layouts" en una misma página y permite al usuario, es decir, al lector, escoger la información que desea en función de sus intereses aprovechando las opciones de interactividad que ofrece D3. Y, como comentábamos, está publicado por el New York Times y podemos ir a verlo. Esta es la página archivada del New York Times que contiene la visualización creada por Mike Bostock sobre las palabras utilizadas en campaña. Como podemos ver, hay una primera visualización, un "layout" que es una especie de "tag cloud" pero es, de hecho, un "packing" de círculos donde cada palabra aparece pintada en un círculo, de mayor tamaño si esa palabra ha sido utilizada más veces. Y, de hecho, nos indica cuántas veces ha sido utilizada por los demócratas y cuántas veces ha sido utilizada por los republicanos, pintando también el círculo en dos colores, partiendo el círculo en azul o en rojo en función de cada partido. Así, podemos ver más a un lado las palabras utilizadas por los republicanos, más en rojo y, en cambio, en el otro lado, las palabras más utilizadas por los demócratas más en azul. La gracia, o uno de los aspectos interesantes de esta visualización, es que si nos interesa un concepto como, por ejemplo, salud, observamos cómo en la parte inferior nos ha aparecido que los demócratas mencionaron el concepto salud 38 veces cada 25 mil palabras, mientras que los republicanos sólo mencionaron salud 9,5 veces por cada 25 mil palabras, lo que nos puede dar una idea de si el concepto de salud, como aspecto político, interesa más a los demócratas que a los republicanos o importa más a unos que otros. Y, también, lo que nos muestra la "web" es, por ejemplo, que en este caso Kathleen Sebelius, que es la secretaria de Salud y Servicios a las personas de los Estados Unidos, ha utilizado la palabra salud en su mitin diferentes veces, y esto lo podemos ver tanto para los republicanos como para los demócratas. Este ejemplo permite ver, aunque tampoco es el objetivo, las posibilidades estéticas de D3 por lo que representa a la manipulación del gráfico, las transiciones animadas que comentábamos anteriormente. Esto ha sido todo en este video que nos ha presentado una breve introducción a D3 para la creación de visualizaciones interactivas. Esperamos que haya sido de vuestro interés.
