Las 3 elecciones de la ciudad

Este año, en la Ciudad de Buenos Aires tuvimos 3 elecciones: las elecciones primarias (PASO), realizadas el 26 de abril; las elecciones generales del 5 de julio y el ballottage porteño realizado el domingo pasado, el 19 de julio. En el equipo de visualizaciones de LA NACION trabajamos intensamente para poder brindarle a la audiencia los resultados de manera clara y rápida a través de nuestras dos plataformas, la edición impresa del diario y la edición digital.

Trabajar para ambas plataformas a la vez implicó un continuo trabajo de coordinación, en el que se focalizó en las necesidades específicas de cada soporte. Pensar un mapa de resultados que luego sería impreso en nuestro tradicional formato sábana no es lo mismo que pensar una aplicación electoral para ser navegada en tiempo real desde una computadora de escritorio y, mucho más diferente aún, si se piensa en quienes lo harían desde un celular. Sin embargo, la información sería la misma, sólo había que maquillarla de la manera correcta, según el soporte en el que se publicara.

Armé un pequeño interactivo en donde incluí algunas de las piezas visuales publicadas. Deslizando el mouse sobre las imágenes pueden acceder a las aplicaciones interactivas en su tamaño real.

Una vez comenzado el recuento de votos oficiales, durante los tres domingos de votación, las aplicaciones electorales interactivas que publicamos en nuestra edición digital fueron reflejando los resultados en tiempo real. Esos mismo datos fueron desplegados para el formato impreso al día siguiente a través de distintas páginas, brindando al lector una selección informativa y visual.

PRINCIPALES OBJETIVOS

Nuestras metas confluyeron en dos grandes focos: por un lado, lograr una coherencia visual y de contenidos en ambas plataformas y, por el otro lado, hacer frente a un gran desafío técnico: las visualizaciones debían verse y navegarse de manera clara y sencilla independientemente del tipo de dispositivo que elija la audiencia, el tipo de conexión y/o el navegador seleccionado. Les cuento brevemente en qué consistió cada uno.

. Coherencia visual y de contenidos. «¿Para qué sirve la coherencia en este caso?», se preguntarán. Para entender que el interlocutor no cambia y que el mensaje sigue siendo el mismo, sólo que adopta características propias según el soporte en donde se muestra. La edición papel tiene un blanco limitado, y aunque existen niveles de lectura dentro de una misma visualización, la información es la que está impresa, ni más ni menos. En cambio, en las visualizaciones interactivas la información se presenta en forma dosificada y cada usuario puede realizar una experiencia propia en función de sus intereses.

Pero ambas plataformas no sólo estuvieron hermanadas por la coherencia visual sino que también estuvieron conectadas a través de un código QR impreso en cada edición papel. El lector podía escanearlo con su celular y acceder a la aplicación digital correspondiente en apenas unos pocos segundos, sin necesidad de ir a buscarla en su computadora de escritorio. Allí encontraría más detalles de las producciones electorales.

. Desafío técnico. Los principales pilares de este desafío fueron lograr visualizar en una aplicación amigable para el lector los resultados electorales en tiempo real y aplicar un diseño responsive a todas las piezas interactivas a desarrollar, teniendo en cuenta el crecimiento del público mobile.

Datos en tiempo real. Una vez que la Dirección Electoral comienza a publicar los datos, el mayor trabajo es conectarlos a una visualización entendible para la audiencia y, como si todo esto fuera poco, hacer que todo funcione correctamente en vivo. Para una aplicación de resultados electorales como esta, se trabaja con varias semanas de anticipación, imposible hacerlo de un día para el otro. Se necesita planificación y coordinación entre los distintos profesionales que forman parte del equipo interdisciplinario: los programadores que se encarguen de obtener y procesar los datos (Back-end), los programadores que logran conectar esos datos con la aplicación web (Front-end), los diseñadores web y periodistas especializados en el tema.

Les cuento un poco la cocina de las PASO. En ese caso, se trabajó con una posible estructura de datos, similar a la que la Dirección Electoral nos enviaría el domingo de votación para poder empezar a hacer las pruebas necesarias e ir chequeando el buen funcionamiento del mapa. El jueves anterior nos enviaron la documentación final que usarían ese día y recién ahí pudimos comenzar con los ajustes necesarios. El domingo 26 de abril, luego de algunos imprevistos (de los que siempre hay), nuestra aplicación tomó vida y logró alimentarse de los resultados oficiales en forma automática. No fue magia, fue el resultado de mucho trabajo y de una buena previsión de posibles problemas. 

Nuestra aplicación electoral se convirtió en la fuente de información principal debido a que teníamos el detalle de todos los resultados en tiempo real, mientras que la página oficial estaba inaccesible, durante las primeras horas del escrutinio.

Diseño responsive. Otro gran tema, fue, es y seguirá siendo, la necesidad de hacer que todas las aplicaciones se vean correctamente en cualquier dispositivo (desktop, tabletas y celulares), a eso se lo llama “diseño responsive“. Hasta hace un tiempo, bastaba con pensar el diseño para una computadora de escritorio, el avance tecnológico nos obliga a diseñar pensando en los distintos dispositivos.

TECNOLOGÍA UTILIZADA

. Mapas de resultados por comunas: el mapa de las PASO fue desarrollado en HTML5, CSS3 y Javascript, y a los de las elecciones generales y de ballottage se le sumó el uso de D3.js
. Hemiciclo de la Legislatura porteña:
se utilizó HTML5, CSS3, Javascript y D3.js
. Mapas de resultados por centros de votación:
en este caso se utilizó CartoDB como base de datos, Mapbox, HTML5, CSS3, D3.js y Javascript.

EQUIPO DE TRABAJO

Pablo Loscri estuvo a cargo de los equipos de visualizaciones interactivas e impresas en coordinación con Florencia Fernández Blancoencargada de la parte periodística, junto con el equipo de Política. El grupo interactivo estuvo compuesto por Gastón de la Llana, Cristian Bertelegni, Juan Elousa (becario del programa Knight-Mozilla Opennews), Marta Alonso y Mariana Trigo Viera; y el grupo de visualizaciones impresas, por Alejandro Bogado, Giselle Ferro, Marcelo Regalado, Gabriel Podestá, Josefina Pagani y Gustavo Olaizola.

Sin comentarios

Muertes por accidentes de tránsito

Si bien siempre me dedico a escribir sobre visualizaciones, hoy quería contarles como trabajamos con Gabriela Bouret, los datos sobre muertes por accidentes de tránsito en la República Argentina.

Luchemos por la Vida es una asociación civil sin fines de lucro que se dedica a la prevención de accidentes de tránsito en nuestro país. Como desde hace ya varios años, los primeros días de enero publica un mapa en formato de imagen (jpg) con el total de muertes en accidentes de tránsito durante todo el año anterior. El mapa de la Argentina publicado este año detalla el número absoluto de víctimas en 2014 discriminado por provincia.

Seguir leyendo

El mundial de los datos

AFP

Un tsunami de datos, eso es el mundial de fútbol. Hay datos por todos lados y de todos los colores. Esta vez el problema no fue conseguirlos ni pulirlos, el problema fue la cantidad. El desafío era no abrumar con numeritos al lector y contarle a través de los datos nuevas realidades mundialistas buscando el momento exacto en los que esos datos fueran realmente útiles.

La solución fue sencilla, había que dosificar y esperar

Seguir leyendo

Mirar los precios para cuidar el bolsillo

El sitio web de la Subsecretaría de Defensa del Consumidor, dependiente de la Secretaría de Comercio Interior, publicó el viernes pasado 7 pdfs correspondientes a diferentes cadenas de supermercados e hipermercados del país (Walmart, Carrefour, Coto, Cooperativa Obrera, La Anónima, Libertad y Cencosud -Jumbo, Disco y Plaza Vea-). Cada pdf contenía el listado de los 500 productos que seleccionó el gobierno para hacer efectivo el congelamiento de precios.

Lo primero que se me ocurrió como usuaria fue querer saber dónde estaba el precio más económico de tal o cual producto, con lo cual tenía que generar una interface gráfica que le permitiera al lector navegar los productos, los supermercados y por supuesto, comparar precios.

Teníamos poco tiempo, la publicación era urgente y todavía teníamos que unificar todos los datos en una misma planilla!!!

Una vez finalizada la unificación y limpieza de datos acudimos a “San Tableau Public” para que nos saque las papas del fuego, y al final de ese mismo día teníamos terminada la interface: sencilla pero rendidora.

Prueben navegarla. Abajo les cuento algunos detalles.

El lector tiene 3 maneras de interactuar con los datos:

  1. Tipeando en el primer campo el nombre del producto o marca comercial
  2. Filtrando por categoría del producto: dulces, fiambres, etc.
  3. Seleccionando un supermercado en particular.

Más allá de esta posibilidad de navegar los datos, decidimos aportale un elemento persuasivo, ya que como todos sabemos, un listado de nombres y valores casi en crudo no es muy copado que digamos. Y ahí apareció la ilustración del carrito de supermercado lleno de productos ;)

El toque final fue incorporar los links de los pdfs originales para que cada uno pueda descargarlos desde la misma visualización.

Este trabajo lo realicé junto a Ricardo Brom y Romina Colman.

También podés ver y descargar los datos que usamos para hacer el Tableau desde Gdocs y Junar.

Animación de datos en espacio real

“Tener los datos no es suficiente, tengo que mostrarlos de manera que la gente disfrute y entienda.” Hans Rosling [1]

Este video me pareció simplemente extraordinario, una buena combinación entre la tecnología y la estadística. Hans Rosling, nos muestra la relación que existe entre la expectativa de vida y la riqueza (ingresos por persona) de un país a lo largo del tiempo. Lo más interesantes es que logra mostrarnos los datos de 200 países durante 200 años.

No se pierdan el video, está subtitulado en español.

120.000 números mostrados en una visualización animada de tan sólo 4.48 minutos. Chapeaux para Rosling.

[1] Hans Rosling es un médico sueco, estadístico académico y orador público. Es profesor de Salud Internacional del Instituto Karolinska y director de la Fundación Gapminder, que desarrolló el sistema de software Trendalyzer.

Un año récord para Messi

Lionel Messi es un ícono para todos los argentinos, por eso, en el equipo de LNdata no podíamos dejar de seguirle el paso en este gran año.

Seguir leyendo

Adelco, nuestra primera base de datos

La base de datos de Adelco fue nuestro primer gran desafío hacia la apertura de datos. Fue un recurso del que echamos mano cuando las cifras de la inflación oficial del Indec ya estaban completamente desprestigiadas.

La Asociación Acción del Consumidor (Adelco), hasta el mes pasado recorría los mismos supermercados haciendo el relevamiento de precios de los mismos 28 productos: 22 productos alimenticios y 6 productos de higiene y tocador.

Adelco no mide la inflación, y su relevamiento de precios no pretendía ser un índice como el que elabora el Indec o las consultoras privadas (a las que ya se les había prohibido difundir esos indicadores) sino como lo haría cualquier consumidor si comprara siempre los mismos productos y se guardara el ticket para verificar los cambios mes tras mes. Es decir, relevaba los datos como un consumidor.

A comienzos del año pasado, el equipo de Nación Data comenzó a almacenar sistemáticamente todos los meses dicho relevamiento de precios ya que nos pareció una excelente manera me empezar el camino hacia la apertura de datos. «¿Por qué justo con estos datos?» Porque eran productos de consumo diario y súper populares. ¡Qué mejor que poder mostrarle al lector/consumidor la variación de los productos que podía encontrar en cualquier góndola de un supermercado de la Capital Federal!

Como resultado esta recopilación de datos armamos varias visualizaciones. En la visualización que adjunto abajo, se priorizó la posibilidad de ver la variación de precios de cada producto en particular.  Prueben ustedes con el producto que deseen.  Seguir leyendo

Amor a primera vista, Tableau Public

Nos fuimos conociendo de a poco, pero reconozco que logró seducirme desde el primer día. Tableau Public es una herramienta gratuita de visualización de datos, un programa que logra combinar de manera natural el diseño y los datos. A partir de simples planillas de Excel, se puede llegar a visualizaciones interactivas de alto impacto gráfico.

«¿Cómo nos conocimos?» Me pasaron el link de unas visualizaciones hechas con este software y enseguida me gustó. Después vinieron los “Tableau Days” con Momi: nos juntábamos en el Starbucks del Shopping Dot y durante todo el día mirábamos los tutoriales del sitio web de Tableau y practicábamos con pequeñas bases de datos. Meses después fui a tomar un curso a Orlando, EE.UU. y la verdad, volví como loca de contenta!!! Era impresionante todo lo que se podía hacer con este programa.

Actualmente seguimos descubriendo su enorme capacidad de visualización. Los Tableau en la redacción de lanacion.com pasaron a ser un commodity que cotiza en bolsa. ja!

Como consecuencia de su popularidad, a fines del mes pasado, junto a Juan López dimos un workshop en el Hacks/Hackers BA Media Party; un evento que reunió a programadores, periodistas y diseñadores de medios digitales de diferentes partes del mundo.

Les comparto la presentación que usamos ese día. A partir de la diapositiva nro.10, debajo de cada imagen van a encontrar un link de las notas de lanacion.com, desde allí podrán navegar cada visualización.

Datos abiertos con impronta propia

 

Unos días antes del comienzo de los Juegos Olímpicos de Londres 2012 accedimos a una gran base de datos del portal inglés The Guardian integrada por 29.217 registros. Es un interesantísimo listado de todos los atletas que ganaron una medalla a lo largo de la historia, desde Atenas 1896 hasta Pekín 2008. The Guardian, en su Data Blog compartió una galería de visualizaciones y abrió los datos para que la audiencia pudiera hacer sus propios análisis. Y así lo hicimos, bajamos los datos en formato Excel y empezamos a procesarlos.  Seguir leyendo

Diseñar o morir

David McCandles, un especialista en visualizaciones dice que la información bien diseñada puede ayudarnos a comprender el mundo, a poder ir directamente a lo importante y revelar patrones e historias enterradas en los datos. En lo personal, estoy totalmente de acuerdo con esta idea, pero también hay una realidad: no se puede diseñar lo que no se conoce y mucho menos lo que no se entiende. Entonces, para lograr un buen resultado visual debemos entender la naturaleza de los datos que estamos manejando.

Los diseñadores nunca seremos expertos en estadísticas, porque por algo fuimos a la facultad de diseño pero… necesitamos aprender un poco de este nuevo idioma, nos guste o no. Porque tenemos que poder dominar a los datos y no dejar que ellos nos dominen a nosotros.

Las visualizaciones pueden ser bellas y el diseñador nunca debe olvidarse de esta premisa. Porque en la vorágine de los datos y la búsqueda del corazón de las historias, podemos olvidarnos del buen diseño, o del diseño directamente. ¿Por qué?  Porque los números marean y, sobre todo, a los que no están acostumbrados a convivir con ellos. No nos olvidemos que si los datos son de buena madera, la narrativa cuenta una excelente historia pero… la visualización se queda a mitad de camino, es decir que nunca podríamos cantar “¡Bingo!”.

A continuación les comparto algunas visualizaciones en donde el diseño logró una sana convivencia con los datos. La visualización seduce y el contenido atrapa. No sólo se pensó el impacto visual sino también el comportamiento de cada elemento a medida que el usuario navega la visualización. En fin, el buen diseño puede hacer de un conjunto de datos aparentemente aburridos, una genialidad.

Entonces, al menos 2 cosas son las importantes en este posteo:

  • Si querés visualizar datos, hacete amigo de los números.
  • A la hora de abordar una visualización, nunca pero nunca te olvides del diseño, porque te aseguro que los datos te van a marear

¿Tenés algún otro link de una buena visualización para compartir?