Contrapedal: #Dataviz para impulsar el ciclismo

Realizamos una plataforma con visualizaciones D3 para demostrar que el análisis y la visualización de datos pueden impulsar la movilidad ciclista.

Resumen

Desarrollamos un proyecto de visualización de datos enfocado en la comunidad ciclista con el objetivo de brindarles un espacio de consulta único en donde encuentren toda la información necesaria para rodar seguro en la Ciudad de México. Convencidos de que la tecnología y los datos también pueden atender problemáticas sociales, nos dimos a la tarea de explorar una de las herramientas más potentes para la visualización de datos y no utilizada en el país: D3.JS

Te invitamos a leer cómo desarrollamos este proyecto, por qué seleccionamos D3.JS y las razones por las cuales deberías de considerar incluir la herramienta en tus próximas visualizaciones.

¿El análisis y la visualización de datos son capaces de impulsar la movilidad ciclista?

Nosotros creemos que sí y decidimos probarlo en la Ciudad de México, capital de nuestro país, en donde circulan más de 55 mil ciclistas por avenidas como Patriotismo, Revolución y el Paseo de la Reforma. (Laboratorio para la ciudad, 2018)

La apuesta era realizar una visualización que orquestara el diseño, la interactividad, la usabilidad y el estilo urbano para nuestro usuario ideal: el ciclista capitalino. Así surgió Contrapedal, un proyecto destinado a ser el aliado de los ciclistas novatos que buscan introducirse al mundo de las bicicletas y ayudarlos a rodar seguros por la ciudad.

Para lograrlo se conformó un equipo multidisciplinario que pudiera aportar expertise en diversas áreas como el análisis de datos, el diseño y la visualización, así como el músculo tecnológico en la programación y la implementación de frameworks como ‘D3’.

Fue así como nuestro laboratorio de visualización hizo posible Contrapedal y queremos contarte nuestro proceso, con especial énfasis en su componente D3.

El Paso a Paso

Contrapedal fue pensado para dar respuesta a cuatro temas importantes para los ciclistas novatos y no tan novatos: ¿cómo está conformada una bicicleta?, ¿cuál es la mejor opción de bicicleta para mí?, ¿cuáles son las principales vías ciclistas en la CDMX? y ¿qué se necesita para viajar seguro?

Tener reunida mucha información sobre bicicletas nos llevó a generar un discurso flexible para que los usuarios pudieran navegar en el sitio en el orden que lo decidieran. Por ejemplo, podrían llegar a la sección donde se explica cómo parchar la cámara sin pasar por el resto del sitio y así resolver su problema rápidamente.

El reto del análisis de datos

Una de las visualizaciones más retadoras a desarrollar fue la que integra tiendas, marcas, tipos y precios de bicicletas en la CDMX. Hasta el momento, sólo habíamos trabajado en crear visualizaciones estáticas, pero el deseo de añadir interactividad abrió la puerta a incrementar significativamente la cantidad de datos que era posible cruzar en una sola pieza. Así, planeamos y diseñamos la visualización central de esta manera, dejando de lado los límites técnicos a vencer.

El elemento D3 en la visualización

Concebir un proyecto con propósito y que atendiera la necesidad de un usuario fue sólo el principio. El reto ahora sería desarrollar una plataforma interactiva que permitiera interconectar grandes cantidades de data desde diferentes ángulos y dar al usuario el control de la información que quiere ver.

Con esto en mente, apostamos por aprovechar la mejor tecnología para generar visualizaciones integrales, de fácil comprensión y estéticamente atractivas para el usuario. Fue así que decidimos utilizar el framework D3 de JavaScript por ser una poderosa herramienta para la creación de gráficos dinámicos completamente personalizables y actualizables en tiempo real, alimentados por bases de datos.

Si bien D3 es la herramienta más apropiada y especializada para dataviz, las visualizaciones realizadas con este framework son poco exploradas en México a pesar de sus múltiples ventajas.

Al ser una librería de JavaScript de código abierto, es compatible con cualquier otro framework de JS y estándar web como HTML, CSS y SVG, por lo que no presentan problemas de visualización o carga.

Otra de sus grandes ventajas es su casi ilimitado nivel de personalización, puesto que D3 no provee de características predeterminadas, nos permitió tener un control total sobre todas y cada una de las visualizaciones para la plataforma.

Finalmente, quizás la característica más importante para este proyecto en particular, es la capacidad del framework de actualizar en tiempo real los gráficos a partir de grandes cantidades de datos de manera muy rápida tal como mencionamos anteriormente.

Para más información sobre las múltiples funcionalidades de la librería, pueden visitar la página oficial de d3.js que cuenta con códigos y explicaciones de su funcionamiento.

Tampoco duden en mandarnos un correo a marketing@x-data.mx con dudas en particular respecto a cómo integrar D3.JS a sus proyectos, haremos todo lo posible por resolverlas.

Conclusión

Como equipo y parte de este nuevo laboratorio de visualización, apostamos por que Contrapedal se convierta en una referencia de consulta con toda la información necesaria para la comunidad ciclista.

Por medio de este proyecto demostramos la manera en que los datos pueden ayudar a solucionar problemáticas cotidianas, así como que en México existe la capacidad y el talento para trabajar con las tecnologías más avanzadas en análisis y visualización de datos como lo es D3. Contrapedal no sólo nos destaca como grandes visualizadores, sino también como uno de los estudios de análisis de datos más potentes e innovadores en México.