Visualizing Buffy

Asignatura: Trabajo Final de Grado

Consultor: Alberto Cairo Touriño

Introducción

El Trabajo de Final de Grado (TFG) es de temática libre, por tanto lo primero que hay que hacer es elegir cuál va a ser este trabajo. Por interés personal y formativo decidí elaborar el TFG dentro del área de visualización de información y que tratara sobre alguna serie de televisión. Pero el objetivo principal del TFG es demostrar lo que se ha aprendido durante la carrera y la capacidad del estudiante de aprender entornos nuevos y adaptarse a los retos que estos presentan, por tanto el proyecto tenía que ser algo más que un gráfico estático, así que se decidió que debería ser un sitio web interactivo programado con la ayuda de D3.js y además contendría una cantidad considerable de datos para visualizar.

De estas decisiones surgió Visualizing Buffy, un sitio web donde se puede explorar, entre otras cosas, el tiempo que pasa en pantalla cada personaje de la serie de televisión Buffy the Vampire Slayer.

Etapas y retos

Recogida de datos

La recogida de datos fue un trabajo muy minucioso que se alargó hasta dos semanas antes de finalizar la aplicación. Como los datos que quería visualizar no existían, tuve que recogerlos a mano, apuntando en una tabla cada vez que un personaje entraba o salía de plano. Mediante este proceso se recogían aproximadamente diez minutos de metraje en una hora y media, lo que para doce capítulos de alrededor de 40 minutos cada uno suman nada menos que 72 horas para la recogida de datos, o dicho de otra manera, dos semanas a jornada completa. Por esta razón el trabajo se limitó a la primera temporada ya que haberse embarcado en la visualización de las siete temporadas que tiene la serie hubiera resultado en la friolera de 864 horas de trabajo solo de recogida de datos, eso es si no añadimos las cinco temporadas de Angel, su spin-off.

Diseño e interacción

El punto más conflictivo del diseño de la aplicación fue la elección de la gama cromática para los gráficos, puesto que en alguno de ellos debían convivir hasta nueve colores diferentes y estos tenían que mantener coherencia en toda la aplicación. Visto que en algunas de las páginas iba a haber un verdadero cóctel de colores y para interferir lo menos posible con la percepción de los gráficos, opté por un diseño general lo más limpio posible basándome en negro sobre blanco.

Otro punto clave fue, evidentemente el diseño de los gráficos, en especial la interacción que tendrían los usuarios con ellos. La primera opción que añadí fue la de compactar las barras de tiempo para así poder comparar los totales de cada personaje, una vez implementado vi que era necesaria una opción de reordenar los personajes por cantidad de tiempo en pantalla, esto abrió la puerta a añadir otros tipos de ordenación y pensé sería interesante dar la opción del orden de aparición.

Finalmente, para mejorar la lectura de la barra de localizaciones se añadieron dos funciones, la primera que expande esta barra para ocupar todo el fondo del gráfico y así poder ver mejor donde se encuentra cada personaje y la segunda que cuando se pasa el cursor sobre ella resalta todas las secciones de la localización que estemos señalando.

Programación

En cuanto a la programación de la aplicación, el mayor reto fue la falta de práctica absoluta con javascript y el desconocimiento total de la librería D3.js. Así pues en paralelo a la recogida de los datos del primer capítulo fue necesario aprender la sintaxis básica de la librería mediante diversos tutoriales. Fueron especialmente útiles el libro Interactive Data Visualization for the Web de Scott Murray y la comunidad de Stack Overflow.

Conclusiones

Como he explicado, la falta de tiempo ha sido la causa de que el proyecto no abarcara la totalidad de la serie, cosa que me hubiese gustado conseguir y que de hecho no descarto que suceda con el tiempo, ya que para mí ha sido un proyecto apasionante tanto por la forma como por el tema. Aparte también me hubiese gustado crear otras visualizaciones como por ejemplo como se relacionaban los personajes entre ellos o hacer páginas para cada uno de los personajes. A pesar de ello estoy bastante satisfecho con los resultados que obtuve en el tiempo de que disponía y con lo que aprendí tanto sobre visualización de datos como del uso de D3.js.

Cita recomendada: BOIX i PLA, Esteve. Visualizing Buffy. Mosaic [en línea], enero 2014, no. 114. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n114.1401.