¿Qué software usamos para hacer las visualizaciones de datos en Civio?

Nuestro socio Stefan Drews nos ha escrito contándonos que quería aprender sobre visualización de datos y sobre las herramientas o software que utilizamos para crear visualizaciones como las que muestran la evolución de los trasvases del Tajo al Segura o los pasajeros de los vuelos oficiales. Hemos pensado que mi respuesta podría ser interesante, así que aquí va:

Te cuento un poquito. En Civio realizamos todas nuestras visualizaciones con una librería open-source de JavaScript muy popular y potente llamada d3.js. Los pros que tiene es que podemos hacer literalmente cualquier cosa que queramos. Es completamente flexible. Los contras , que esto tiene un coste… no monetario, sino de tiempo. Tiene una curva de aprendizaje bastante ardua, y cada pieza requiere bastante tiempo, porque digamos que se programa todo desde cero. No hay plantillas de gráficos etc.

Como en Civio no hacemos cosas rápidas para salir del paso, sino que nos gusta realizar investigaciones periodísticas con tiempo y cariño, para los gráficos que las acompañan d3.js es el software perfecto. Es decir, si te interesa hacer piezas interactivas custom donde tengas control total de todas la interacciones y del diseño, te animo muchísimo a ir a por ella.

Como recomendaciones para aprender, me parece muy importante tener primero una base en programación web, concretamente en HTML, CSS y JavaScript vanilla. Cuanto más base tengas, más fácil te será dar el salto a d3.js. Empezar por d3.js sin ningún fundamento web puede ser bastante frustrante, no te lo recomiendo.

En cuanto a cosas más concretas, te recomendaría:

  • Este libro de Scott Murray es un clásico estupendo. La versión de d3 que usa no está actualizada, pero aún así sigue siendo el mejor de todos los materiales que he visto por ahí para aproximarse a d3.js, es un gran referente a nivel didáctico.
  • Animarte a empezar tu andadura con d3.js usando Observable , una plataforma online maravillosa donde programar y aprender. Te animaría a que te crearas una cuenta gratuita y empezases a bichear con calma estos recursos didácticos. Nosotros en Civio lo usamos intensivamente desde hace un año y medio. Aquí puedes ver nuestros gráficos con su código, y la verdad es que nos encanta como entorno.
  • Animarte a participar en el canal de Slack de la comunidad d3.js, un espacio donde preguntar y responder dudas, compartir recursos, etc. Hay canales específicos por temáticas, idiomas, etc. La comunidad es muy muy maja. Ya verás.
  • También te animaría a acudir a todos los Meetups de la comunidad que puedas, se aprende muchísimo. En el grupo de d3.js suele estar activa la comunidad en español que lleva un profesor de Colombia, John Alexis Guerra (que por cierto tiene un montón de recursos docentes en Youtube de d3.js estupendos tanto en español como en inglés), haciendo un evento mensual online para compartir cosas de visualización. Yo suelo participar. En el grupo de Observable hay bastante movimiento también. Verás que hay encuentros casi semanalmente. El equipo que hay detrás es muy muy majo.

Lo dicho, si lo que te interesa es aprender el tipo de gráficos que nos has referenciado, d3.js es la manera. Si por el contrario prefieres aproximarte al campo de la visualización de una forma más rápida y directa, en ese caso te recomendaría tantear otros softwares tipo Datawrapper, Flourish, Tableau, etc. No te puedo concretar mucho sobre ellos porque no los he usado nunca, pero seguramente encontrarás información fácilmente. Los pros de estos softwares es que son más sencillos de usar, creo que no tienes ni que programar para usarlos. Los contras , que solo podrás hacer lo que cada programa te permita hacer, es decir, elegir entre el catálogo de gráficos disponibles, etc.

:slightly_smiling_face: Os recordamos que las socias y socios de Civio, como Stefan, disfrutan de acceso prioritario al equipo para resolver cualquier duda. Así que si nos apoyas puedes escribirnos con con dudas y sugerencias, que estaremos encantadas de responderte.

1 me gusta

Alguna vez he mirando D3.js pero me dió la impresión de que había que hacer mucho buceo para dominarlo. Al final acabé usando, si no recuerdo mal, Seaborn (para Python). Por si alguien busco algo más sencillo.

1 me gusta

Hola, @iagovar!
Gracias por tu aportación, la verdad es que no conocía la librería de Seaborn que mencionas, pero parece muy interesante, gracias!

Y sí, estoy totalmente de acuerdo con que D3.js, al ser de bajo nivel, es muy extensa y requiere tiempo. De hecho hay una periodista de datos genial, Amanda Cox, que comenta que “You should use D3 if you think it’s perfectly normal to have to write a hundred lines of code to get a bar chart” y estoy muy de acuerdo jeje. Yo creo que es la mejor o la peor opción en función de las necesidades que tengas. Se la recomendaba a Stefan porque justo nos preguntaba por estos gráficos: reproducción asistida, trasvases o aviones oficiales, y los tres tienen en común que no son gráficos “tipo”, sino que están hechos ex profeso tanto a nivel de diseño como de interacciones, etc, hay control total por nuestra parte. Y para tener ese control, para mí D3.js sigue siendo la mejor opción :slight_smile:

Pero para alguien que busque algo más sencillo, como dices, y que quiera programar en vez de usar las herramientas no-code típicas como Datawrapper, etc, estoy totalmente de acuerdo contigo: lo suyo es tirar de librerías de alto nivel como la que mencionas. :raised_hands:t2:

A nosotras en concreto nos gusta mucho Plot.js, que es open-source y en JavaScript, y también es de alto nivel, rápida de aprender y muy concisa. Está hecha encima de D3.js, por los mismos desarrolladores de la plataforma de Observable que mencionaba el otro día. Sigue la línea de otras librerías como Vega-Lite o ggplot2, y por lo que veo, también de Seaborn.

Nosotras usamos Plot.js para “explorar” internamente los datos rápidamente, ver qué forma tienen, etc, y así tomar una mejor decisión a la hora de cómo enfocar los gráficos finales, más “explicativos”, que ya desarrollamos en D3.js para tener control total si los tiempos del proyecto nos lo permiten.

Es un debate muy interesante, la verdad. Cada vez hay más softwares y librerías de todo tipo y es fácil sentirse abrumada/o, sobre todo para alguien que está empezando, así que todos los recursos y consejos que podamos dar y recibir entre todos/as, seguro que ayudan bastante, gracias! :slight_smile:

Ahora que lo mencionas también me acuerdo de vega-lite. No sé, yo estuve mirando y por aquel entonces sólo manejaba Excel y acababa de aprender a usar Python, estaba trasteando con pandas y necesitaba crear gráficos.

Pensaba que sería una tarea sencilla, pero la mayoría de las librerías me parecían excesivamente complicadas.

Con el tiempo me he dado cuenta de que cualquier librería que aporte mucho control tiene mucho código legacy que lo complica todo mucho, los métodos se hacen muy farragosos, muchos hacen cosas muy similares y no se distingue a primera vista. Asi que salvo que necesite generar gráficos programáticamente, normalmente prefiero exportar los datos y usar Excel o algo tipo Tableu, o lo que encuentre.

Me gustaría hacerlo con DBeaver o algún cliente para SQL pero no he encontrado nada.

1 me gusta

La verdad es que no controlo de las tecnologías que comentas, así que no te puedo decir mucho al respecto. De momento soy monolingüe de JavaScript :upside_down_face:

En cuanto a usar Excel y Tableau, creo que depende de las necesidades que se tengan y que hay muchos escenarios posibles: si se quiere un gráfico rápido para consumo interno o algo más cuidado para publicar en un artículo, si la interacción es importante o incluso necesaria o por el contrario algo estático ya cumple su misión, de si se quiere aportar el máximo valor posible a nivel visual y narrativo o no es necesario, etc. En función de todo eso, y de los recursos de tiempo y esfuerzo que se quieran/puedan dedicar, optaría por una solución más básica o más compleja :slight_smile: