Visualizando presupuestos con D3.js sobre el API de OpenSpending

D3.js PBS D3.js OpenSpending

Desde OpenKratio seguimos colaborando con OKFN. El trabajo realizado para la Visualización de los Presupuestos de la Universidad de Granada ha resultado de interés para la comunidad de OpenSpending: pone de relieve lo sencillo que es montar sitios-satélite utilizando OpenSpending como almacén de los datos presupuestariosNeil Ashton y Anders Pedersen, miembros de OpenSpending, se interesaron desde el principio y me han animado mucho a escribir sobre ello. Como resultado, me han ayudado ha publicar un artículo que ha tenido hoy su aparición tanto en el Blog de OpenSpending como en el Idea Labs de la PBS (la cadena estadounidense de televisión pública).

Para nuestros seguidores en castellano, ofrecemos a continuación la versión traducida. ¡Disfruten! y si quieren colaborar con nosotros y nuestros proyectos pasen por la web de OpenKratio, ¡os esperamos!.

 

Visualizando presupuestos con D3.js sobre el API de OpenSpending

OpenSpending cuenta con una serie de visualizaciones de serie – gráficos de burbujas, exploración tipo árbol y tablas – muy útiles para explorar cómo están estructurados los datos presupuestarios en niveles. Sin embargo ninguno está realmente orientado a representar cómo fluye el dinero.

Afortunadamente, los usuarios de la librería de visualizaciones D3.js nos ofrecen muchos ejemplos de visualizaciones a este propósito. El objetivo de este tutorial es mostrar lo sencillo que puede userse D3.js para visualizar flujos de dinero utilizando datos en OpenSpending.

D3.js y los diagramas de Sankey

D3.js es una librería javascript para crear documentos soportados por datos (D3 significa data-driven documents, en inglés). Las visualizaciones son construidas especificando las relaciones significativas entre los datos y los elementos gráficos. D3.js tiene una gran comunidad activa de usuarios que nos ofrecen de forma preparada todo un catálogo de ejemplos de visualizaciones. Algunos de estos son increíblemente útiles para captar nuestra atención sobre cómo fluye el dinero: diagramas de Sankey, de cuerdas (o redes circulares) y redes en mapas.

OS & D3: Sankey diagram OS & D3: Chord diagram OS & D3: Network map
Energía y consumos
Diagrama de Sankey
Paseos por el barrio Uber
Red circular
Flujo de refugiados
Red en Mapa

 

Todos estos ejemplos son totalmente reutilizables: todo lo que debe hacerse es reemplazar los datos subyacentes con los tuyos propios. En el siguiente ejemplo pondremos el foco en Diagramas de Sankey, dado que son capaces de reemplazar más de dos niveles de flujo.

Los diagramas de Sankey son típicamente usados para visualizar flujos energéticos, de materiales o costes entre diferentes procesos. [...] Son útiles para localizar rápidamente las contribuciones dominantes en un flujo general.

Entrada sobre los diagramas de Sankey en Wikipedia.

El API de agregación de OpenSpending

Para volcar datos presupuestarios en D3.js podemos usar el API de OpenSpending, que nos los ofrece en un formato que puede ser traducido fácilmente a algo que D3.js entiende. Concretamente, el API de Agregación de OpenSpending es capaz de devolvernos un conjunto de datos agregados, con sus cuantías sumadas, y en formato JSON.

Una llamada al API de agregación se ve tal que así, donde <dataset> es el identificador del dataset en OpenSpending:

GET /api/2/aggregate?dataset=<dataset>

Si no se incluye ningún parámetro más, todas las entradas en el dataset se devuelven en un único grupo, y los valores de cada entrada se suman. Las cosas se empiezan a poner más interesantes cuando añadimos el parámetro `drilldown` (desglose), con el cual podemos especificar una dimensión del dataset para desglosar el dataset en entradas. Cada posible valor de la dimensión especificada se convertiría en un grupo de entradas con su propio subtotal.

Veamos como desglosar el dataset `ugr-spending` (presupuesto de gastos 2013 de la Universidad de Granada) por la dimensión `programa` (refiere a la clasificación funcional del presupuesto). Veamos qué forma tiene:

GET /api/2/aggregate?dataset=ugr-spending&drilldown=programa
{
 "drilldown": [
 {
 "amount": 283175993.0,
 "num_entries": 54,
 "programa": {
 "taxonomy": "programa",
 "html_url": "http://openspending.org/ugr-spending/programa/422d",
 "id": 1,
 "name": "422d",
 "label": "Ense\u00f1anzas Universitarias"
 }
 },
 {
 "amount": 64294001.0,
 "num_entries": 52,
 "programa": {
 "taxonomy": "programa",
 "html_url": "http://openspending.org/ugr-spending/programa/321b",
 "id": 2,
 "name": "321b",
 "label": "Estructura y Gesti\u00f3n Universitaria"
 }
 },
 {
 "amount": 47967613.0,
 "num_entries": 27,
 "programa": {
 "taxonomy": "programa",
 "html_url": "http://openspending.org/ugr-spending/programa/541a",
 "id": 3,
 "name": "541a",
 "label": "Investigaci\u00f3n Cient\u00edfica"
 }
 }
 ],
 "summary": {
 "num_drilldowns": 3,
 "pagesize": 10000,
 "cached": true,
 "amount": 395437607.0,
 "pages": 1,
 "currency": {
 "amount": "EUR"
 },
 "num_entries": 133,
 "cache_key": "a3b56dc06b8a869ffa49b0ff063562798b073a3a",
 "page": 1
 }
 }

El API de agregación devuelve un objeto con dos campos, `drilldown` y `summary` (desglose y resumen). Este último contiene información sobre el dataset y el primero sobre las diferentes entradas por la dimensión utilizada para el desglose, con los totales de cada grupo de entradas sumados (el valor `amount`). Podemos también desglosar un dataset por dimensiones combinadas. La siguiente llamada al API nos devuelve grupos y subtotales para cada combinación de las dimensiones `programa`y `to` (identificador de la clasificación económica del presupuesto de gastos):

GET /api/2/aggregate?dataset=ugr-spending&drilldown=programa|to

 

Usar el API de agregación para construir visualizaciones D3.js implica programar un código que convierta los objetos JSON devueltos por el API de OpenSpending al formato que D3.js espera.

Construyendo un Diagrama de Sankey

¡Es momento de un ejercicio completo! Vamos a construir un diagrama de Sankey con D3.js desde el API de OpenSpending, de la siguiente forma:

El primer paso es determinar qué queremos que se vea en el diagrama de Sankey. ¿Qué relaciones deben ser mostradas? ¿Cuántos niveles de flujo son los apropiados para una buena comprensión de los datos? ¿Qué historia es la que queremos contar?

Dado que contamos con los presupuestos de gastos e ingresos de la UGR, podemos imaginar el dinero fluyendo desde fuentes de ingreso a la Universidad, y la Universidad gastando este dinero. Atendiendo a la estructura del presupuesto, finalmente nos decidimos por un diagrama de Sankey en tres niveles:

  • Nivel 1: Desglose del presupuesto de ingresos por “Artículo” (clasificación económica) hacia “Universidad de Granada”.
  • Nivel 2: “Universidad de Granada” hacia items del presupuesto de gastos desglosado por “Programas de Gasto” (clasificación funcional).
  • Nivel 3: “Programas de Gasto” hacia items del presupuesto de gasto desglosado por “Capítulos de Gasto” (clasificación económica).

Nota: dado que el total de las sumas de los presupuestos de ingresos y gastos son iguales, ambos extremos del diagrama de Sankey tienen el mismo tamaño.

El segundo paso es la obtención de los datos. Como hemos explicado más arriba, OpenSpending dispone de un API que nos permite obtener datos agregados unidades de medida (como la cuantía económica) y desglosados por dimensiones.

Para obtener el resultado JSON de los tres niveles de nuestro diagrama de Sankey procedemos tal y como sigue:

GET http://openspending.org/api/2/aggregate?dataset=ugr-income&drilldown=articulo
GET http://openspending.org/api/2/aggregate?dataset=ugr-spending&drilldown=programa
GET http://openspending.org/api/2/aggregate?dataset=ugr-spending&drilldown=programa|to

Presentamos el resultado parcial de la segunda llamada. Nótese que los datos necesarios para construir el diagrama de Sankey son las "labels" (etiquetas), las "amounts" (cuantías), y las relaciones entre nodos:

{
 "drilldown": [
 {
 "amount": 283175993.0,
 "num_entries": 54,
 "programa": {
 "taxonomy": "programa",
 "html_url": "http://openspending.org/ugr-spending/programa/422d",
 "id": 1,
 "name": "422d",
 "label": "Enseñanzas Universitarias"
 }
 },
 /* Two more drilldown entries here. */
 ],
 "summary": {
 "num_drilldowns": 3,
 "pagesize": 10000,
 "cached": true,
 "amount": 395437607.0,
 "pages": 1,
 "currency": {
 "amount": "EUR"
 },
 "num_entries": 133,
 "cache_key": "a3b56dc06b8a869ffa49b0ff063562798b073a3a",
 "page": 1
 }
 }

 

El tercer paso es producir el fichero de entrada JSON para diagramas de Sankey D3.js. Tiene dos componentes, enlaces y nodos: los nodos se unen con enlaces (vectores de grosor variable). En el fichero JSON los nodos son símplemente un array de etiquetas, mientras que los enlaces son un array de tuplas de tres: índice del nodo origen, índice del nodo destino y valor (en este ejemplo la cuantía). Los índices en las tuplas de enlace refieren a la posición secuencial de los nodos en el array de nodos. Echa un vistazo al fichero JSON resultante de este ejemplo para más detalles.

Así, los datos para el Nivel 1 tienen etiquetas de “artículo” (presupuesto de ingresos) como origen, la etiqueta “Universidad de Granada” como destino, y las cuantías como valor. El Nivel 2 empieza con la etiqueta “Universidad de Granada” como origen y las etiquetas de “programa de gasto” como destino y las cuantías como valor. Para el Nivel 3, tenemos las etiquetas de “programa de gasto” como origen, “capítulos de gasto” como destino, y cuantías como valor. El script en lenguaje R que se ha provisto automatiza el proceso de obtención y transformación de datos al fichero JSON de entrada para el diagrama Sankey D3.js. Espero que los comentarios en el código sean clarificadores.

El cuarto y último paso es crear un sitio web que muestre el diagrama de Sankey. Afortunadamente con un fichero de entrada JSON bien formateado, incluso el ejemplo oficial de diagrama de Sankey D3.js es reutilizable. Símplemente lo descargamos y reemplazamos el fichero JSON con el nuestro propio y a disfrutar del resultado. Se pueden ajustar algunas variables CSS y JavaScript para el control de la paleta de colores o las dimensiones de nuestro diagrama.

Conclusión

Hemos visto lo sencillo que es aprovecharse de los métodos de agregación del API de OpenSpending para extender el conjunto de visualizaciones por defecto de OpenSpending. D3.js es una herramienta muy poderosa para darnos una mejor comprensión visual sobre datos presupuestarios. Un set de visualizaciones D3.js out-of-the-box que use OpenSpending como almacén de datos daría un buen impulso al proyecto. Entre tanto, echa un vistazo a openspending-sankey de Michael Bauer, que hace mucho más sencillo crear diagramas de Sankey desde, virtualmente, cualquier dataset en OpenSpending.

Acerca de

#Adoptaunaplaya, Seville-spending, UGR-budget, o la elaboración de aportaciones para la mejora de las “sensibilidades digitales” a las próximas leyes Andaluzas sobre Transparencia (Andalucía Transparente) y Participación Ciudadana (Informe Democracia Digital Andalucía). Como amante del software libre he estado involucrado con aportaciones a la OKFN y GNOME, además de mantener propios proyectos como wiican o udev-discover. Mi lema: La Administración la quiero electrónica, abierto el Gobierno … y el Software: ¡libre!

Publicado en Noticias Etiquetado con: , , , , , ,