Trazando las aguas: entre Bokeh y D3

Trazando las aguas: entre Bokeh y D3

Introducción

Llega un momento en la vida de un incipiente "discreto pero también de alto perfil que intenta convertirse en diseñador y desarrollador de front-end" en el que debe entrar en el mundo de las bibliotecas de gráficos.

Las bibliotecas de gráficos producen visualizaciones basadas en datos. Son la razón por la que puede captar rápidamente las tendencias en la esperanza de vida en FiveThirtyEight o evaluar el sentimiento nacional sobre las próximas elecciones presidenciales (¡ay!) En The New York Times.

Piense en los gráficos que puede crear dentro de Google Sheets, excepto que ahora tiene derechos de visualización y edición directa de la biblioteca que maneja esos gráficos. Usted es el maestro de estos bloques de construcción de bajo nivel que constituyen un "gráfico".

Varias bibliotecas de gráficos están escritas en JavaScript, un lenguaje que es más familiar para los desarrolladores web que la mayoría, lo que hace que aprenderlas sea una hazaña menos abrumadora. Cuando se ejecutan correctamente, las bibliotecas de gráficos tienen el poder de transmitir un mensaje poderoso y brindarle la oportunidad de ver atractivos visuales serios.

Recientemente, a nuestro equipo se le asignó la tarea de crear una interfaz que necesitaba integrar una biblioteca de gráficos para cumplir el objetivo. Como resultado, tuvimos que elegir una biblioteca que satisfaga nuestros casos de uso específicos. Si sopesas tus necesidades correctamente y eliges una biblioteca que de alguna manera las satisface todas, la vida es dorada.

Sin embargo, las bibliotecas nunca son un trato único para todos. La mayoría de las veces, su suposición inicial de que una biblioteca es la combinación perfecta será incorrecta debido a los obstáculos imprevistos que aparecen.

Quizás esté pensando: "¿Cuáles son esas opciones?", "¿Cómo se acercó a la elección de una opción?" o "¿Por qué te sentiste estúpido?" (se refiere al mensaje de Slack anterior).

Este artículo describirá nuestro proceso de elección de una biblioteca de gráficos entre la gran cantidad de bibliotecas de gráficos de JavaScript que están disponibles actualmente, la decisión crítica de cambiar entre dos bibliotecas de gráficos (Bokeh y D3.js) y los pros y los contras de cada una. Para mí, este fue un territorio "inexplorado", y si siente lo mismo sobre las bibliotecas de gráficos o la visualización de datos en general, se sentirá mejor después de leer esto.

¡Vamos a empezar!

Por qué probamos Bokeh primero

Nuestras necesidades se dividieron en dos campos: velocidad e interactividad . Debido a que manejamos grandes cantidades de datos, nuestra visualización tenía que poder actualizarse a la velocidad del rayo (o al menos a una velocidad que no tuviera un retraso perceptible).

Nuestra aplicación también necesitaba tener la interactividad deseada que imaginamos para el usuario. En un escenario ideal, la biblioteca ya incluiría algunas de estas funciones interactivas que podríamos incluir fácilmente, en lugar de tener que escribirlas desde cero.

Introduzca Bokeh.

Acerca de Bokeh

Bokeh es una biblioteca destinada principalmente a la creación de visualizaciones en el navegador a partir de conjuntos de datos grandes o de transmisión. Creas estas visualizaciones usando Python. Luego, la API de JavaScript de Bokeh toma su secuencia de comandos de Python y representa los gráficos o gráficos además de manejar las interacciones de la interfaz de usuario en el navegador.

También puede optar por utilizar el servidor Bokeh para gestionar la transmisión de sus datos. En la documentación de Bokeh 0.12.13, dice: "Esta capacidad para sincronizar entre Python y el navegador es el propósito principal del servidor Bokeh".

Ventajas

El bokeh es mágico por muchas razones. Primero se procesa utilizando WebGL con un respaldo de HTML5 Canvas, proporciona varias herramientas integradas para interactuar con gráficos, maneja conjuntos de datos enormemente grandes y, en última instancia, crea algo que puede conectarse a la web de inmediato.

La capacidad de navegar entre Python y JavaScript también es increíblemente poderosa para los gráficos porque Python le permite aprovechar la estructura de datos y las herramientas de análisis de datos útiles, mientras que JavaScript traduce los datos manipulados en visualizaciones fáciles de usar para el navegador.

Desventajas

Sin embargo, un inconveniente de Bokeh es que está limitado en el grado de interactividad que puede tener una visualización. Bokeh le permite "trazar" en el sentido más convencional: ofrece un lienzo en 2-D similar a una cuadrícula con ejes como línea de base. Y eso está bien, porque a menudo eso es lo que el usuario necesita y quiere. Los usuarios experimentados de Bokeh pueden hacer cosas realmente hermosas (vea los ejemplos aquí).

Pero si quisiera hacer una visualización que fuera de las características convencionales de un gráfico, como simular fuerzas entre átomos y arrastrar los átomos, no sé cómo lo lograría en Bokeh.

Bokeh también está destinado al desarrollo en Python, no en JavaScript. A continuación se muestran ejemplos de gráficos de barras en Bokeh usando Python. Es súper simple y limpio.

Bokeh Barchart usando Python (a través de Jupyter Notebook)

Antes de comenzar a usar Bokeh, tomamos la decisión consciente de realizar un script en JavaScript en lugar de Python porque toda nuestra aplicación web estaba y está construida sobre un marco de JavaScript. Ninguna parte de la documentación de Bokeh está en JavaScript (está en Python, como era de esperar), e intentar dominar JavaScript resultó difícil.

Si está trabajando con glifos de bajo nivel, es cierto que todo lo posible en Python es posible en JavaScript con Bokeh. Sin embargo, si recién está comenzando a aprender ambos idiomas como yo, traducir la sintaxis entre los dos no es intuitivo.

Además, existen limitaciones para las API Bokeh.Chartsy JavaScript de alto nivel Bokeh.Plotting: algunas están en desuso, otras dificultan mucho el cambio de características del gráfico. Los ejemplos siguientes son mis intentos de crear gráficos de Bokeh en JavaScript.

Gráfico de barras de bajo nivel de Bokeh usando Javascript

Gráfico de barras de alto nivel de Bokeh usando Bokeh.Charts Javascript API

Más sobre el desarrollo en JavaScript con Bokeh aquí. Como puede ver, JavaScript con la biblioteca de Bokeh pierde las líneas de código más simples que observamos al desarrollar con Python. Creo que me tomó alrededor de una hora juguetear en la consola para agregar un contorno blanco a las barras y un título en mi gráfico de alto nivel, lo que reitera mi lucha por navegar fuera de los límites de la Bokeh.ChartsAPI de JavaScript cuando quieres cambiar los detalles visuales. del gráfico.

Finalmente, hay más documentación y uso activo de otras bibliotecas de gráficos , como D3.js o three.js, en comparación con Bokeh. Con contribuyentes y usuarios más activos de una biblioteca surge unmayor probabilidad de encontrar la solución que necesita para corregir un error específico.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -

Por qué cambiamos a D3

Así que estábamos estancados. Habíamos llegado al punto de "esta biblioteca se adapta a nuestras necesidades, pero es una molestia seguir haciendo cosas en JavaScript y tal vez lleguemos al techo un día cuando nos demos cuenta de que necesitamos algo que no está disponible en Bokeh correctamente". ahora." Frio.

Ingrese D3.

Nuestra preocupación inicial con D3 era que mostraría nuestras visualizaciones demasiado lentas, dadas las experiencias pasadas con la representación de SVG en el navegador con grandes cantidades de datos. También sabíamos que la curva de aprendizaje de D3 era significativamente más alta que la curva de aprendizaje de Bokeh.

Pero seguíamos siendo optimistas dada la popularidad de D3, la cantidad infinita de aplicaciones de D3 bellamente documentadas y nuestra actitud de "Get Sh * t Done" ... así que decidimos intentarlo de todos modos.

Sobre D3

D3.js es una biblioteca de JavaScript que enfatiza el enlace de datos. Le da el poder único de generar elementos en el DOM y vincular datos / datos a elementos simultáneamente. Con una biblioteca completamente basada en datos, puede agregar elementos dinámicamente al agregar o eliminar puntos de datos y la transición entre conjuntos de datos. D3 también brinda más control sobre la estética y la interactividad del resultado final, lo que significa que puede salirse con la suya creando las visualizaciones más extrañas / maravillosas.

Ventajas

Para nuestra sorpresa, las visualizaciones D3 que creamos con nuestros conjuntos de datos fueron muy mantecosas. Rápidamente nos dimos cuenta de que D3 está estructurado específicamente para una representación rápida, a pesar de las matrices masivas que estábamos pasando a la biblioteca.

En lugar de pasar puntos de datos uno por uno y generar el SVG respectivo, lo que puede ser bastante tedioso, D3 le permite vincular todo su conjunto de datos a sus SVG antes de que existan. Luego, los SVG se generan rápidamente y se asocian con sus respectivos puntos de datos de una sola vez.

Es como un chef en la cocina que recibe una lista de pedidos a la vez y puede preparar la comida en un pedido que omite tiempos de espera innecesarios, en lugar de esperar siempre para recibir el siguiente pedido después de preparar un plato.

La mejor parte de D3 es que ofrece una amplia oportunidad para interacciones y transiciones fluidas entre conjuntos de datos. Debido a que nuestro objetivo final era y es empoderar al usuario, queríamos crear una visualización que invitara a una persona a interactuar con ella.

D3 también está destinado al desarrollo de JavaScript. No habría más "excavación bajo el capó" de la API de JavaScript como lo estábamos haciendo con Bokeh. El ejemplo de gráfico de barras que creé usando BokehJS anteriormente en este artículo se muestra a continuación usando la biblioteca D3.

Gráfico de barras D3

Sí, hay líneas de código más complejas en comparación con el código requerido para un gráfico Bokeh. Tomó más tiempo y energía recuperarlo. Pero tienes un control completo sobre cada pequeño detalle de tu gráfico, y todo está documentado en algún lugar en línea (probablemente a través del creador, Mike Bostock). Eso es bastante bueno.

Por último, ha habido un uso extensivo de D3 en los últimos años para visualizar las elecciones estadounidenses de 2017, el movimiento de las poblaciones de refugiados, las tasas de vacunación infantil de la OMS e innumerables otras tendencias e historias. Como resultado, D3 ha ganado una cantidad significativa de exposición y atención, lo que lleva a usuarios más activos y nuevas formas de usar la biblioteca todos los días.

Al elegir una biblioteca a largo plazo y tener en cuenta que sus compañeros de equipo también necesitarán aprenderla eventualmente, es absolutamente crucial considerar la comunidad actual y futura de contribuyentes de la biblioteca. Una biblioteca con una comunidad en continuo crecimiento es ideal, y D3 parece fomentar ese tipo de comunidad.

Desventajas

La curva de aprendizaje inicial es mayor para D3 en comparación con Bokeh, asumiendo que está desarrollando en Python con Bokeh. JavaScript es más detallado que Python. Sin embargo, si, como nosotros, estaba planeando desarrollar en JavaScript, vale la pena recorrer los tutoriales de D3.

Es difícil entender cómo funcionan las selecciones, qué significan .enter () y .exit (), y la magia que ocurre con una simple línea de código (.transition () ¿alguien?). PERO, una vez que hayas comprendido la estructura única de D3 de asumir que las cosas existen antes de que existan, las posibilidades son infinitas.

En última instancia, los beneficios de D3 superaron el esfuerzo y el tiempo de aprenderlo, y teníamos el presentimiento de que cambiar a D3 sería una buena inversión a largo plazo.

Conclusión

¡Ahí lo tienes! Todavía estamos usando y aprendiendo activamente D3 mientras integramos la biblioteca en nuestra aplicación y nuestro equipo. Aunque solo porque estemos avanzando con D3 no significa que no usaremos Bokeh para una aplicación diferente en el futuro. Hay ventajas y desventajas en cada biblioteca de gráficos, y es importante reflexionar constantemente para determinar si debe continuar con su biblioteca actual o comenzar a explorar otras opciones.

Antes de elegir una biblioteca de gráficos, conozca sus necesidades específicas y no tenga miedo de sumergirse de lleno en las aguas inexploradas de las bibliotecas de gráficos con esas necesidades en mente. Si algo no funciona la primera vez, pruebe algo nuevo que parezca prometedor.

Se trata de explorar, documentar y volver a ponerse en contacto con usted y sus compañeros de equipo para seguir evolucionando el proyecto de manera productiva.

¡Adelante!

Si tiene algún comentario, corrección, sugerencia o simplemente quiere hablar, no dude en enviarme un correo electrónico a [email protected] Puedes encontrar algunos de mis trabajos en //mandilicai.com/.