HERRAMIENTAS PARA Visualización de Datos Pág. 1
MATERIAL COMPLEMENTARIO: DATACAMP Versión 1.0 2015 Este documento ha sido elaborado por AGESIC (Agencia para el Desarrollo del Gobierno de Gestión Electrónica y la Sociedad de la Información y el Conocimiento). Usted es libre de copiar, distribuir, comunicar y difundir públicamente este documento así como hacer obras derivadas, siempre y cuando tengan en cuenta citar la obra de forma específica y no utilizar esta obra para fines comerciales. Toda obra derivada de esta deberá ser generada con estas mismas condiciones. Pág. 2
Introducción El uso de herramientas para el tratamiento de datos se ha difundido entre colectivos de periodistas, activistas y organizaciones sociales. Las mismas permiten facilitar la interpretación de los datos que publican los organismos del Estado. El objetivo de este documento es mostrar algunas de ellas y las funcionalidades básicas utilizadas actualmente para la realización de visualizaciones. Se debe tener en cuenta que estas herramientas no son las únicas. Herramientas para visualización de datos A los efectos de esta guía agruparemos las diferentes herramientas para la visualización de datos en tres categorías: contar historias datos en gráficas datos en mapas Las herramientas que se citan y utilizan en esta guía permiten en parte o en su totalidad hacer uso de sus funcionalidades de forma gratuita y en la mayoría de los casos requieren de registro previo. Se incluye un ejemplo de visualización interactiva con A dónde van nuestros impuestos? Por lo general para este tipo de visualizaciones es necesario desarrollos específicos o adaptar desarrollos existentes como es el del ejemplo. Existen también bibliotecas de software como D3.js, HighCharts o FusionCharts que permiten visualizar datos pero exigen conocimientos de programación para poder utilizarlas Pág. 3
Contar historias Cuando decimos que vamos a contar historias visualmente a partir de datos, entendemos que esos datos son fechas o hitos que se pueden mostrar cronológicamente o en secuencia. Las historias pueden ser contadas de diferentes formas las herramientas que presentamos en esta guía permiten contar historias interactivas o estáticas. Las interactivas permiten a los usuarios navegar a través de la historia mientras que las estáticas simplemente permiten ver gráficamente los datos. Prezi Para el desarrollo de interactivos una herramienta que permite crearlos de forma sencilla e intuitiva es Prezi. Esta herramienta está disponible online y posee una interfaz amigable e intuitiva para el desarrollo de interactivos o presentaciones. Posee diferentes plantillas que el usuario podrá seleccionar, también es posible incrustar objetos como imágenes, formas y texto que como resultado permiten navegar siguiendo una secuencia lógica por la historia. Fig. 1. Prezi. Página de inicio. Pág. 4
ThingLink Otra herramienta es ThingLink que permite agregar enlaces a imágenes para luego compartirlas. El procedimiento es bastante sencillo y consta de tres pasos: 1. El primero es cargar la imagen a la que se le desea agregar contenido, 2. luego agregar enlaces desde cualquier lugar en la imagen 3. y el tercer paso es compartir la imagen a través de las redes sociales o incrustarla en el sitio web o blog. Fig. 2. Enlaces en una visualización con ThingLink Dipity Permite la creación de interactivos de línea de tiempo, es posible agregar fotos, videos y texto como hitos en la línea de tiempo. Se puede acceder a más información en cada uno de los hitos con un clic en cada burbuja. Es posible avanzar o retroceder mediante una navegación del tipo diapositivas o simplemente recorriendo la línea de tiempo. Pág. 5
Fig. 3. Línea de tiempo con Dipity. La herramienta cuenta con un panel de control donde se puede crear una nueva línea de tiempo, para lo cual es necesario completar información acerca del gráfico a crear. El resultado se puede compartir en redes sociales y embeber en sitios web en su versión gratuita; con algunas limitantes. Easel.ly Es una herramienta sencilla que permite mediante un asistente desarrollar una infografía en línea; la que se puede descargar como imagen luego de finalizada. Un ejemplo sencillo es la realizada para describir lo que sería el proceso de apertura de datos en una organización. Esta herramienta permite seleccionar múltiples plantillas prediseñadas para realizar las infografías. También cuenta con un menú de objetos a incrustar con solo seleccionarlos y arrastrarlos. Se selecciona el tipo de infografía de la colección disponible, se asigna un título y subtítulo a la infografía y a partir de ese momento se van agregando algunos de los objetos disponibles o bien se cargan imágenes desde archivos propios. Fig. 4. El camino hacia la apertura de datos Pág. 6
Una vez finalizada la infografía se puede descargar como imagen en baja y alta calidad o bien como archivo en formato PDF. Fig. 5. Descarga de la infografía Otra opción es compartirlo, ya sea mediante un enlace o código HTML para insertar en nuestras páginas web. Opciones intermedias son el poder guardar el gráfico y abrirlo más tarde para poder terminarlo. Es una herramienta recomendable para hacer infografías sencillas y rápidas. Otros recursos https://storify.com/home http://timeline.knightlab.com/ Pág. 7
Gráficos con datos En el caso de representación gráfica de datos se pueden utilizar varias herramientas online como por ejemplo infogr.am Esta herramienta tiene funcionalidades que permiten representar datos gráficamente de una manera sencilla además de compartirlos públicamente. Infogram Es una herramienta online con posibilidad de realizar rápidamente gráficas en línea y compartirlos. En su versión gratis permite seleccionar gráficas de los siguientes tipos. Barras Columnas Tortas Líneas Áreas Puntos Burbujas Pictórico Jerárquico Tabular Progreso Nube de palabras Treemap Financiero Fig. 6. Diferentes tipos de gráficas con Infogram Para utilizar la herramienta es necesario registrarse o ser usuario de alguna de las redes sociales con las que se integra. Siempre es necesario iniciar sesión para hacer una visualización de datos; esto lo puede hacer con el usuario que ha registrado o con el usuario de redes sociales que ya tiene. Cómo crear una gráfica Para crear una nueva gráfica se selecciona el tipo de gráfica, luego haciendo dobleclic en los espacios disponibles se agrega título (1), se cargan los datos (2), se agrega una descripción (3) y se publica (4). Pág. 8
2 1 Fig. 7. Agregar título y datos 4 3 Fig. 8. Agregar descripción y publicar Pág. 9
La publicación de la visualización en la versión gratis se puede hacer en dos modalidades: Compartirla mediante un enlace público Sin compartir La versión profesional tiene otras opciones adicionales que permite compartirla con contraseña o enlace privado. Para realizar la publicación es necesario completar los campos de título (title) y descripción de la visualización (description); hecho esto se hace clic en el botón publicar (publish). La versión paga permite también descargar el gráfico cómo archivo. Fig. 9. Opciones de publicación La publicación finaliza con una lista de redes sociales donde se puede compartir el gráfico o con un código generado para incluir en cualquier página web. Este código se debe copiar y pegar en un documento HTML. Cómo destacable es que si seleccionamos el texto en la opción responsiva permite que el gráfico se adapte a diferentes tamaños de pantalla automáticamente. Fig. 10. Código HTML para incluir en páginas web Pág. 10
Raw Es una herramienta basada en la biblioteca D3.js que permite a través de una interfaz sencilla realizar gráficos a medida, además es posible seleccionar gráficos de una colección de 16 diferentes tipos. Si bien el procedimiento para la creación del gráfico es sencillo, las opciones de visualización de esta herramienta no son estándares por lo que se recomienda para visualizaciones de alto impacto visual y con volúmenes no muy grandes de datos. Raw no requiere registro ni inicio de sesión para realizar los gráficos y también incluye opciones de compartir en redes sociales y generación de código HTML. Creación del gráfico Carga de datos. Esto se hace copiando los datos directamente al espacio destinado para ello en la página o arrastrando un archivo. Los datos pueden estar en formato CSV, una planilla u hoja de cálculo. Si se ingresan los datos como texto (CSV) o como planilla se puede cambiar el formato de vista para verificar que estén en las columnas correctas. En el ejemplo seleccionamos un conjunto de datos sobre medios de distribución de música y cuotas de mercado por año; pre-cargado en la aplicación. Fig. 11. Carga de datos Pág. 11
Selección del tipo de gráfico Fig. 12. Selección del tipo de gráfico La figura 12 muestra algunos de las opciones disponibles de gráficas a crear, estas gráficas están basados en visualizaciones realizadas por otros usuarios como por ejemplo el New York Times. Selección de dimensiones Fig. 13. Especificar dimensiones a graficar Pág. 12
En este caso agrupamos la cuota de mercado por tipo de medio y por año. Fig. 14. Adaptar la visualización La gráfica resultante es el siguiente, el cual se pude adaptar al tamaño, colores, curvas, etc. de acuerdo a las necesidades de la publicación. Fig. 15. Gráfico resultante Pág. 13
Por último tenemos las opciones de descargar la gráfica o copiar el código para compartir. Fig. 16. Opciones para compartir el gráfico En el caso de la descarga nos pide el tipo de archivo y nombre del archivo con el que se va a generar la gráfica; luego con el botón de descarga se obtiene el archivo. Otros recursos para gráficas en línea http://www.jonwinstanley.com/charts/ http://chartpart.com/ Ambos sitios son herramientas para la realización de gráficos basados en Google. Completando los campos que presenta esta interface se logran gráficos realizados a través de la API de google charts. Son herramientas sencillas para gráficos sencillos. Pág. 14
Visualización de datos en mapas En cuanto a herramientas para visualización de puntos georreferenciados en mapas podemos identificar a CartoDb o lo que se conoce actualmente como My Maps de Google. Ambas herramientas dan la posibilidad de ubicar geográficamente puntos en mapas y compartir estas visualizaciones. Para poder realizar los ejemplos de visualización de esta guía se utilizaron datos de algunos centros de salud de la ciudad de Montevideo. My Maps Es una herramienta que se ha integrado al servicio de google drive, esto significa para los usuarios de drive pueden crear mapas de la misma forma que lo hacen con documentos u hojas de cálculo. Para los que no son usuario de drive, es una solución basada en la nube que requiere registrarse como usuario de google y se puede acceder con cualquier navegador de internet. La ubicación de puntos puede hacerse localizando manualmente cada uno o con una carga masiva de datos a partir de una archivo. Este archivo puede ser una hoja de cálculo con columnas que contengan las coordenadas geográficas de los puntos, un archivo de texto separado por comas o en formato KML (Keyhole Markup Language). Pág. 15
Carga masiva de datos Para mostrar gráficamente las ubicaciones de puntos georreferenciados en un mapa de google es necesario contar con los datos en el sistema de coordenadas correcto. Una vez que tenemos los datos en el formato correcto para ser cargados, iniciamos sesión en google para crear el mapa y luego en la opción crear nuevo mapa. 3 1 4 2 Fig.17. Pantalla inicial de My maps Pasos para construir un mapa Los pasos a seguir son los siguientes: 1. Dar nombre al mapa 2. Seleccionar el tipo de mapa base 3. Importar capa de datos y darle nombre a la capa 4. Compartir Pág. 16
Editar nombre y descripción Fig.18. Pantalla de edición del nombre del mapa. Mapa base Una vez nombrado el mapa, pasamos a seleccionar el mapa base a mostrar en la visualización. Se pueden seleccionar nueve tipos diferentes de mapas, en este caso seleccionamos la opción satelital. Fig.19. Selección del mapa base. Pág. 17
Importar datos Importamos la capa de datos a partir de un archivo, en este caso una hoja de cálculo que arrastramos a la zona indicada. También podemos importar los datos con el botón seleccionar navegando hasta el archivo que queremos importar. Los formatos soportados son de archivos de texto separados por comas, Excel o keyhole markup language (KML). Fig.20. Subir archivo de datos Luego de importado el archivo seleccionamos en este caso las columnas geo referenciadas y luego el campo para utilizar como título de los puntos en el mapa. Pág. 18
Fig.21. Selección de campos de coordenadas Una vez seleccionadas estas columnas se visualizarán los puntos en el mapa. Fig.22. Visualización finalizada Detalle de cada punto georreferenciado a partir de los datos subidos. Si hacemos clic en el enlace de estilos individuales podemos personalizar los puntos en el mapa. Fig.23. Detalle de un punto georreferenciado Tener en cuenta que para este tipo de visualizaciones no se podrá superar las dos mil filas en el archivo de datos. Pág. 19
Fig.24. Mensaje de importación de archivo de más de 2000 filas Compartir Para finalizar podemos compartir el mapa de diferentes maneras, por correo, en google, facebook, twitter También se puede cambiar el nivel de acceso al mapa. Fig.25. Uso compartido del mapa Fig.26. Criterios para definir usuarios con acceso al mapa Y personalizar el acceso invitando a diferentes personas utilizando su cuenta de correo. Pág. 20
Fig.27. Invitación personalizada para utilizar el mapa CartoDb Es una solución en la nube para la visualización de datos en mapas. La versión gratuita es buena para quien inicia una publicación de datos sobre mapas. La herramienta da una gran facilidad en cuanto a la carga de datos contando con varias opciones para distintas fuentes de datos. También es muy sencillo a la hora de personalizar la visualización, contando con diversos recursos de fácil uso para un usuario no experimentado. La versión gratuita de CartoDb tiene una limitante en cuanto al uso de espacio de disco; por mas información al respecto puede consultar el sitio oficial. El proceso de publicación de datos en CartoDb es similar al caso anterior y es necesario contar con usuario registrado. Al iniciar sesión se accede a un panel de control desde donde podremos acceder a nuestros datos y visualizaciones. Crear una visualización Para crear una visualización es necesario comenzar por la carga de datos; esto se hace desde el menú tablas (tables), nueva tabla (new table). Para el siguiente ejemplo utilizaremos datos en coordenadas geográficas. Pág. 21
Fig.28. Carga de archivo de datos Menú vistas Fig.29. Diferentes vistas de los datos En la vista de mapas se ven los datos georreferenciados y además se cuenta con una paleta de opciones para gestionar la información a mostrar en el mapa. Fig.30. Visualización del mapa Pág. 22
En la vista de datos se ven los datos en formato de tablas. Existen opciones de configuración que permiten personalizar las vistas de los datos, las opciones varían dependiendo si está en modo de vista de datos o en modo de vista de mapas. Fig.31. Opciones de configuración de la vista de mapas Personalización del mapa En la vista de datos la primera opción permite establecer filtros con consultas de tipo SQL sobre los datos Fig.32. Ejemplo de consulta SQL para filtrar datos Pág. 23
Para aplicar filtros se debe seleccionar previamente el o los campos a filtrar para luego ir marcando los datos que se quieren ver, en la fig. 27 se filtraron los datos por nombre de calle. Fig.27. Opciones de filtros seleccionados excluyendo las Avenidas Garibaldi y San Martín El siguiente ítem del menú es el asistente de visualización y se utiliza para cambiar los colores a los puntos que se muestran en el mapa. Fig.28. Asistente de visualización En la siguiente opción podemos seleccionar los campos que se muestran en las etiquetas cuándo se hace clic (clic) en el punto o cuándo se pasa el ratón por encima del punto (hover). Pág. 24
Fig.29. Selección de campos y modificación de nombres Para seleccionar que información mostrar en las etiquetas, se necesita seleccionar los campos a mostrar; también es posible cambiar los nombres a los campos o modificar el código HTML. Fig.30. Opciones para cambiar título de los campos y HTML En el ejemplo de la Fig. 30 modificamos para que aparezca la palabra esquina entre el número de puerta (num_pue) y la calle transversal más próxima (y_entre). También es posible personalizar el formato de estilos, para ello es necesario cierto nivel de conocimiento en el manejo de CSS. Fig.31. Opciones para cambiar código CSS Pág. 25
Finalmente es posible modificar las leyendas para cada lugar cambiando el código HTML; para el ejemplo en la Fig. 32 modificamos la leyenda con los textos un lugar y otro lugar en lugar de las coordenadas. Fig.32. Modificación del texto de leyendas Pág. 26
Ejemplo finalizado Fig.33. Visualización de datos geo referenciados Guardar y compartir Una vez finalizado debemos guardar la visualización para poder compartirla. La visualización permite que se le continúen agregando tantas capas de datos como sea necesario y es necesario darle un nombre. Fig.34. Compartir la aplicación Pág. 27
Desde el menú principal podemos duplicar la visualización, bloquearla o eliminarla; además de la opción de compartir de tres maneras diferentes. Fig.35. Menú de opciones La primera opción mediante un enlace, la segunda con código HTML para incluir en una página web y la tercera para agregar el mapa a una aplicación. Fig.36. Opciones para compartir la aplicación Pág. 28
Georreferenciación de datos CartoDB es capaz de georreferenciar datos de diferentes formas, para hacer esto es necesario ir a la vista de tablas y hacer clic en el botón geo. La georreferenciación se puede realizar de diferentes formas, en el caso que se desee hacer por direcciones de calles, es necesario tener campos que indiquen la dirección, la localidad y el país. Fig.37. Opciones de georeferenciación La opción de georreferenciación está limitada para la cuenta gratuita en la cantidad de georreferenciaciones mensuales que se pueden hacer. Herramientas útiles El sitio http://www.mapsdata.co.uk/online-file-converter/ permite convertir archivos a diferentes formatos. Quantum GIS es un sistema de información geográfica libre y gratis. Data + Design, es una guía introductoria de cómo preparar y visualizar información. Pág. 29
A dónde van nuestros impuestos? El proyecto A dónde va mi dinero? Nació como una idea y fue ganadora en 2008 de la competencia Muéstranos una mejor forma (Show us a better way) de la Oficina de Gabinete en Reino Unido y un prototipo del proyecto fue tomado por la BBC. Posteriormente la Fundación por el Conocimiento Abierto (Open Knowledge Foundation) trabajo para crear nuevas visualizaciones que permiten a los ciudadanos conocer cómo se utiliza el dinero público. El proyecto está siendo utilizado en más de 70 países y 130 ciudades. En Uruguay; la Oficina de Planeamiento y Presupuesto a través del Área de Gestión y Evaluación del Estado (AGEV) viene utilizando esta herramienta para mostrar datos del Presupuesto Nacional de manera interactiva. En la versión actual se ofrece a cada Ministerio u organismo la posibilidad de mostrar su presupuesto clasificado en Áreas Programáticas y Programas Presupuestales, ilustrando al público sobre las funciones y objetivos a que se destina. En todos los casos se ofrece también la comparación en relación al total del Presupuesto Nacional y al PBI, así como los porcentajes dedicados a personal, otros gastos de funcionamiento e inversiones. Incrustar y visualizar A dónde van nuestros impuestos? Puede embeberse la aplicación A donde van nuestros impuestos de AGEV-OPP en cualquier página web utilizando el tag <iframe>. Para mostrar solamente el crédito y ejecución de un único organismo (y todas sus unidades ejecutoras), puede filtrar los datos utilizando el parámetro organismo en la url de la aplicación, quedando una invocación como la que sigue: <iframe src=http://agev.opp.gub.uy/advni/index.html?organismo=nro_org width="100%" height= 600px > </iframe> A continuación se describen los atributos y valores necesarios para poder incrustar en el sitio web. Pág. 30
Atributos Width Comentarios Ancho del frame. Se sugiere el valor 100% para permitir que la aplicación utilice todo el espacio disponible. Para una óptima visualización se recomienda que el mínimo ancho disponible para el frame sea de 1200px Height Altura del frame. Para evitar el uso de barras de scroll se debe especificar una altura mínima de 500px, siendo 600 la altura recomendada. src Valor nro_org URL de la aplicación utilizando parámetro organismo: http://agev.opp.gub.uy/advni/ index.html?organismo=nro_org Comentario Debe sustituirse nro_org, en la URL del atributo src por el código del inciso en el SIIF (Presidencia=2, Defensa=3, etc.). Los organismos disponibles son: del 2 al 19, 25 al 27, 29 y 31. Fig.38. Ejemplo de visualización incrustada en el recuadro rojo Pág. 31
Por consultas acerca del uso de ADVNI embebido puede contactarse por email a observatorio@agev.opp.gub.uy. La aplicación es de uso libre, por lo que no comporta obligación alguna para los organismos que decidan utilizarla. Con el fin de conocer a quienes utilizan este servicio, agradecemos nos informe a esa misma dirección en caso de utilizarlo en su sitio web. Pág. 32
Tabla de contenidos Introducción... 3 Herramientas para visualización de datos... 3 Contar historias... 4 Prezi... 4 Easel.ly... 6 Gráficos con datos... 8 Infogram... 8 Raw... 11 Otros recursos para gráficas en línea... 14 Visualización de datos en mapas... 15 My Maps... 15 CartoDb... 21 Menú vistas... 22 Herramientas útiles... 29 A dónde van nuestros impuestos?... 30 Incrustar y visualizar A dónde van nuestros impuestos?... 30 Tabla de contenidos... 33 Pág. 33