Visualizando un presupuesto municipal. Recuperando el paso.

Después de revisar un par de proyectos en D3 de diagramas sankey, y bucear en las dificultades de que los códigos de diagramas que conseguí están para la versión v3, pero las visualizaciones con más ejemplos son las de v5,  encontré que Sankeymatic tiene un excelente manual para poder personalizar todavía más los gráficos.

Gracias a unas pequeñas modificaciones, he conseguido generar un gráfico que tiene los flujos coloreados según el destino.  Después de sopesarlo, he decidido eliminar la cantidad de dinero (que se sigue reflejando en la proporción vertical del flujo). En la imagen interactiva generada con D3 aparece al pasar el cursor por encima.  Quizá se pueda añadir en otra visualización.  Sankeymatic me vuelve a dar esperanza.

sankeymatic_4800x6600

Lo que todavía no he conseguido es que ordene las partidas sin mezclar partidas, y esto obliga a pasar algo de tiempo reordenando los orígenes para hacerlas máslegibles.

Pero esto vuelve a tener buena pinta.

 

Anuncios

Visualizando un presupuesto municipal. Tropezando con D3

En el proceso de intentar visualizar de una forma más clara el diagrama de flujo, y dado que la web Sankeymatic no es todo lo flexible que necesito, he intentado conocer más de cerca el lenguaje de programación del motor visual que se usa (el dichoso D3) para intentar personalizarlo.

Gracias a repositiorios como wikitoki he encontrado un tutorial para hacer gráficos (Scatter)  con D3, pero me temo que todavía soy muy novato y la programación lleva su tiempo.

Mientras busco ejemplos de Sankey, he generado una visualización en SVG sin texto general. Los colores son los que asigna el motor por defecto.

Creo que es importante marcar una jerarquía de colores desde el inicio.

El problema son los cruces en los desgloses que salen automáticamente usando Sankeymatic por más que intento evitarlos.

Seguiremos.

sankeymatic_6000x6000

Visualizando un presupuesto municipal. Usando el color.

El siguiente paso a la segmentación de imágenes ha sido generar unos gráficos donde el color sirva para identificar orígenes de los ingresos.

He usado la paleta de colores por defecto que usa Sankeymatic (no muy indicadora, pero estamos probando). El motor deja colorear dependiendo del nodo de origen, y podemos usar la primera selección del destino como guía, porque sólo tiene dos niveles de nodo.  Además he reducido la anchura de los nodos para que la imagen quede más limpia.

El resultado quedaría tal que así.

Desglose inicial_800x800

El principal problema es no poder elegir los colores a desarrollar en las siguientes imágenes de desgloses, pero sobre todo, no poder elegir los colores de la imagen que muestra todo el gasto en conjunto, y que explicaría de un vistazo la proporción de dinero que viene de cada partida.

Trabajando en las partidas con más desgloses descubro que el motor de Sankeymatic dibuja los desgloses en un orden no controlable por el usuario.  Es necesario reposicionarlos luego.

Esto unido a que posiciona los textos a veces antes y a veces después del nodo, plantea mucho trabajo posterior a la generación de la imagen.  Como ejemplo, el desglose de transferencias corrientes una vez trabajado.

Transferencias Corrientes_1900x1000(3)

Parece que para avanzar más rápido la clave será investigar d3 para hacer los gráficos más personalizados, y además @numeroteca me pasa un ejemplo de diagrama de flujo con código abierto que puede ayudarme para generar más facilmente lo que se necesita.

Seguimos

Visualizando un presupuesto municipal. Segmentando la imagen.

La imagen generada a partir de una visión global de todo el presupuesto, aunque sea en el lado más simple (los ingresos) es harto complicada de entender.

Para descomponer las partidas, se me ocurrió ir detallando el origen de los ingresos, haciendo segmentaciones de la imagen generada, y componiendo imágenes más pequeñas más fáciles de enteder.

Así pues, los ingresos analizados vienen fundamentalmente de 8 orígenes diferentes, que se desglosan de forma diferente. Unos mucho, pero otros poco.  Desglose inicial_600x600

Esta imagen debería ser la parte final del presupuesto de ingresos, pero para facilitar la comprensión, ordené los orígenes por cantidades.  Es un principio. El problema es que los nombres no son muy explicativos, pero podía valer.

Cuando comencé a generar las imágenes que explican cada uno de los diferentes orígenes, comenzó el desbarajuste.

La primera rama (Impuestos directos) , al desglosarla según los epígrafes del ayuntaminto, puede entenderse más o menos, a una resolución admisible.

Impuestos directos_1000x600

Al llegar a la segunda, se hace evidente el problema. Al subir los detalles de las partidas, es necesario subir la resolución de la imagen, con lo cual los textos se hacen ilegibles.

Transferencias corrientes

Además, empezar a segmentar la imagen ayuda a la dispersión, y hace más dificil la comprensión de un vistazo que se quería conseguir.  Ayudado por profesionales de la imagen como @iskaskun, nos marcamos dos propósitos:

  1. -Generar la imagen del flujo de dinero independientemente del texto ( y este añadirlo luego)
  2. Usar un color diferente para cada “rama” principal, para ayudar a la comprensión. Deberemos repetir la imagen general para visualizar las ramas, y que puedan ser reconocidas al llamar al detalle.

 

 

 

 

Visualizando un presupuesto municipal. Arrancamos.

¿Y si una persona vecina de cualquier ayuntamiento se propusiera entender las cuentas del presupuesto municipal?. Mientras sigo haciendo labor de agitador por la transparencia, y empiezo a sumergirme en el mundo de D3 gracias a @numeroteca, voy a intentar relatar en el blog mis peripecias en el árduo camino para comunicar lo que vamos descubriendo desde el OCM con el que colaboro.

En su día recopilamos los presupuestos ejecutados municipales desde 2006 que publica el Ayuntamiento y los utilizamos para hacer las visualizaciones del OCM de Zaragoza

El motor gráfico del OCM genera los gráficos de tarta de forma automática, y aunque es muy potente, se nos quedaba corto para poder transmitir de forma más sencilla “el flujo del dinero”. Descrubir y describir de dónde viene y a dónde va. Siempre siguiendo la inspiración de Kulturometer

Partimos de que no tenemos una imagen mental de las proporciones de partidas.  Ahí es donde un gráfico tipo “río” es muy util. Para ello, contamos con Sankeymatic y su motor gráfico configurable, que a partir de los datos de partidas económicas en el formato adecuado, nos genera gráficos a la carta, que luego podemos exportar, en formato .png o en .svg.

En su día generamos un hilo de tuiter explicando la previsión de flujo de dinero desde los diferentes orígenes, hasta su reparto por programas de gasto, la clasificación más funcional. Pero ahora tenemos los datos de la liquidación, los datos estables.

El problema que tienen los gráficos generados con esta herramienta es que a medida que se añaden desgloses y detalles, nos vemos obligados a subir la resolucion, lo que hace que la imagen generada sea dificilmente compartida en web.

Como ejemplo, la imagen generada para la totalidad de ingresos en 2018.

Y con el enlace de Aquí te lo puedes descargar en formato vectorial, para poder hacer Zoom infinito

sankeymatic_5200x5000(2)