Recientemente, en un proyecto en el que hasta el momento habíamos estado usando la biblioteca de gráficos Charts.js, los diseñadores se vinieron un poquito demasiado arriba con la coca, y lo que se nos presentó como nuevo grafo era totalmente imposible de hacer con dicha biblioteca.
Lo que nos dijeron que querían era un grafo circular de barras, con dos datasets “apilados”, con espacio en blanco en el centro para el título, y un grafo de donut por fuera para marcar las categorías de los grupos de datos. Cuando estábamos a punto de decirle al cliente “gracias por participar pero lo que pide no se puede hacer”, dimos con los “circular barplots” de la biblioteca D3.
Sabiendo ya que “quizá” lo que pedían sí podría hacerse, intenté modificar el código a lo bestia… y fracasé estrepitósamente. D3 es una biblioteca con una potencia increíble, pero esa potencia viene de que TODO se dibuja “a mano”. No tienen plantillas, como es el caso de Charts.js, así que con las instrucciones básicas puedes llegar a la complejidad que te apetezca.
En este caso, la complejidad de un grafo de barras circular, con dos datasets, y un grafo de donut alrededor.
No ha sido fácil, pero ha sido posible. Y tras conseguirlo me veo en la obligación de compartir con el mundo el conocimiento que he adquirido. He añadido transiciones, porque en este tipo de grafos las transiciones son un poco complicadas y quería aprender a hacerlas, y un tooltip que muestre los datos al poner el ratón encima de las barras. Quería que el grafo tuviera DE TODO.
Este proyecto casi acaba con mi salud mental, pero al final salí triunfante.
El enlace a bl.ocks, donde podéis ver el grafo dibujado, es el siguiente:
https://bl.ocks.org/freaktiful/5aa20944b783a04d4d1ff3050a74138f
Y el gist es:
Es un poco largo y complicado de leer. No os recomendaría intentar entenderlo sin tener al menos una noción de D3. Pero espero que pueda ayudar a quien en el futuro tenga que hacer algo similar.
*************************************************************************************
Espero que este post os haya resultado de utilidad, y si no, aquí tenéis un gato para compensar por las molestias.
