El problema con D3

Recientemente hubo un par de hilos en Twitter discutiendo las dificultades asociadas con el aprendizaje de d3.js. También he visto esto surgir en muchas conversaciones similares que he tenido en reuniones, conferencias, talleres, hilos de listas de correo y chats flojos. Si bien estoy de acuerdo en que muchas de las dificultades son reales, los hilos destacan una idea errónea común que debe aclararse si queremos ayudar a las personas a acceder a la visualización de datos.

La idea errónea en el corazón de estos hilos es que d3 y la visualización de datos son lo mismo. Para hacer la visualización de datos uno debe aprender y usar todo d3, y para usar d3 uno debe aprender toda la visualización de datos. En cambio, me gustaría enfatizar que d3 es un juego de herramientas para comunicar conceptos complejos basados ​​en datos en la web.

Lo que quiero transmitir aquí es cómo podemos obtener una visión más integral del papel de d3 en la visualización de datos basada en la web. Usemos una metáfora inspirada en Miles McCrocklin donde la visualización de datos se compara con la construcción de muebles. Todo tipo de personas puede entrar en la construcción de muebles, por todo tipo de razones, especialmente cuando ven las cosas hermosas que otras personas están haciendo:

La silla Eames se considera una silla magistralmente diseñada.Hay muchas visualizaciones de datos aspiracionales hechas con d3

Las personas ven el resultado impresionante y, naturalmente, desean la capacidad de hacerlo por sí mismas, preguntan cómo se hace y a menudo escuchan "se hizo con d3". Este es el comienzo del problema, porque cuando alguien escucha que se hizo con d3 , piensan "oh, debería ir a aprender d3". Van a la documentación y ven algo como esto:

API de d3

Muchas de estas herramientas parecen desconcertantes, requieren conocimientos sobre el trabajo de la madera y procesos en los que nunca antes habíamos pensado, o incluso sabíamos que podríamos tener que pensar. Nos sentimos abrumados y desanimados, parece que el camino hacia algo que parecía estar al alcance es largo y traicionero.

Aquí es donde creo que podemos cambiar las cosas para mejor, en lugar de cambiar el conjunto de herramientas, podemos guiar a las personas en función de sus objetivos a lo largo de los caminos más adecuados para ellos. Examinemos algunas situaciones comunes donde las personas se encuentran con ganas de hacer una visualización interactiva de datos y cómo podríamos trazar un mejor curso para cada una.

El diseñador

Nuestro diseñador ya se siente cómodo comunicando ideas visualmente, sabe cómo resolver problemas complejos y asignarlos a conceptos relacionados. Tienen un conjunto de herramientas que mejoran su capacidad de expresar lo que piensan. A menudo no están muy familiarizados con la programación, quizás tengan cierta experiencia con HTML y CSS básicos para armar páginas web estáticas. Han visto lo que las personas pueden hacer con d3 y están motivados para poder hacer lo mismo. Cuando intentan entender lo que parece una cantidad muy pequeña de código en un bl.ock, se confunden mucho.

¿Qué parte de esto es JavaScript? ¿Qué parte es específica de d3? ¿Qué es una solicitud asincrónica? ¿Sobre qué DOM sigo escuchando?

Para estas personas, d3 ofrece una gran potencia y flexibilidad, pero primero deben aprender algunas habilidades técnicas fundamentales para operar en este entorno. A menudo recomiendo el excelente tutorial (y libro) d3 de Scott Murray que cubre conceptos básicos de HTML, CSS y JavaScript. También recomiendo experimentar exportando SVG desde herramientas de diseño como Illustrator y Sketch y dándoles interactividad y magia de datos en el navegador.

Al comenzar, a menudo animo a los diseñadores a no centrarse en el patrón de entrada / actualización / salida, la reutilización o las preocupaciones de rendimiento. Es mucho más útil concentrarse en obtener el resultado deseado, una vez que tiene algo cerca, hay muchas personas amigables que pueden ayudarlo a hacerlo más eficiente o robusto.

El analista

Nuestro analista ya se siente cómodo trabajando con datos, escribiendo consultas y llamando a funciones potentes con API complejas. Tienen un flujo de trabajo en un entorno poderoso como R Studio o Jupyter Notebooks. Lo más probable es que lleguen a d3 porque quieren publicar su análisis de alguna manera. Si bien el analista suele ser una programación más cómoda que el diseñador, es probable que no esté familiarizado con las idiosincrasias de programación en un entorno de navegador web.

¿Cuál es la diferencia entre SVG y Canvas? ¿Cuál es el equivalente de JavaScript para Pandas / Tidy? ¿Por qué no puedo dibujar un gráfico de líneas con una línea SVG? ¿Qué es este atributo "d" en una ruta?

Para estas personas, también recomiendo una introducción al desarrollo web para familiarizarse con conceptos como el DOM. Nuevamente, mi punto de partida favorito es el tutorial d3 de Scott Murray (y su libro). También recomendaría un curso intensivo en JavaScript y JSON, exportando datos de su entorno normal como JSON para visualizar en el navegador.

Al comenzar, a menudo animo a los analistas a ignorar muchas de las funciones de utilidad de d3, ya que probablemente estén más familiarizados con las funciones poderosas en sus propios entornos. En cambio, creo que es mejor centrarse en exportar los datos a un formato JSON o CSV fácil de consumir que coincida con los ejemplos existentes.

El ingeniero de software

Nuestro ingeniero de software es un caso interesante, porque aunque tienen muchas de las habilidades y conocimientos básicos sobre el desarrollo web, algunas de las herramientas de d3 requieren una forma de pensar extranjera. En nuestra metáfora, el ingeniero no solo se preocupa por hacer muebles, sino que está trabajando en todo el edificio. Hay marcos e infraestructura en los que los muebles tienen que encajar.

¿Qué es este negocio de entrada / actualización / salida? ¿Por qué estás jugando con mi DOM? Transiciones ... ¿Cómo pruebo las unidades?

Muchos desarrolladores ya estarán íntimamente familiarizados con el DOM y JavaScript, por lo que mi consejo es tratar de ignorar las partes de d3 que se centran en el DOM. En su lugar, familiarícese con algunas utilidades clave para visualizaciones de datos como d3-scale. D3 se divide en muchos módulos más pequeños, por lo que es bastante fácil elegir la funcionalidad que desea utilizar.

También enfatizo la separación del diseño de los datos de la visualización, por lo que al usar un módulo como d3-jerarquía puede generar una estructura de datos con d3 y luego renderizarla en el DOM usando el marco de su elección.

Balas de plata

Estas situaciones son arquetipos sueltos, muchas personas caerán en algún lugar entre ellos y eso también está perfectamente bien. La idea es separar los objetivos y las limitaciones para que podamos guiar mejor a las diversas personas que ingresan a nuestra comunidad.

Personalmente, pienso en los estándares web como el mínimo común denominador para la comunicación global. Las API de gráficos no son ideales, pero si desea distribuir instantáneamente su experiencia basada en datos a miles de millones de personas, creo que es razonable pagar el precio de una curva de aprendizaje relativamente empinada. Los conceptos subyacentes de gráficos 2D, diseño visual, diseño de experiencia del usuario, arquitectura de información y programación se transfieren directamente a muchos otros esfuerzos además de la visualización de datos.

Pero a veces, una silla es solo un lugar para sentarse, ¡no tenemos tiempo ni dinero para preocuparnos tanto e IKEA lo hará bien! En esos casos, hay muchas bibliotecas de gráficos que solo necesitan un poco de configuración para comenzar.

A veces esta es la única herramienta que necesitas.

Elijah Meeks ha hecho un gran mapa de la API d3 que desglosa la caja de herramientas en categorías útiles en su artículo reciente.

del D3 de Elijah no es un artículo de la Biblioteca de visualización de datos.

También intenté trazar el panorama del aprendizaje de d3 en mi artículo La Guía del autoestopista para D3, que ofrece algunos enlaces y puntos de partida para lo que creo que son algunos de los conceptos más esenciales.

El viaje no es fácil, ¡pero ciertamente puede ser una aventura!

Hace un tiempo entrevisté a un puñado de visualizadores de datos que aprendieron d3 en el proceso de expresarse y los conjuntos de datos que les interesaban. El tema común era que habían comenzado con objetivos. Aprendieron lo que necesitaban de d3 en el camino para lograr esos objetivos.

Así que toma un mapa y traza tu propio curso a través del vasto mundo de la visualización de datos. Puede encontrar algunos senderos que otros han abierto con la búsqueda de Blockbuilder, probar JavaScripts en su propio entorno de Notebook Observable y unirse a más de 3.000 fabricantes de sillas con ideas afines, me refiero a visualizadores de datos en el canal s3 d3.

¡Buena suerte, espero ver tus visualizaciones!

Me gustaría agradecer a Erik Hazzard, Kerry Rodden, Zan Armstrong, Yannick Assogba, Adam Pearce y Nadieh Bremer por sus comentarios sobre este artículo.