Acerca de la visualización

Puedes volver a la visualización principal aquí.

Resumen

Estas visualizaciones muestra la actividad de usuarios u organizaciones de GitHub, mostrando los commits realizados durante los últimos años. Los datos se obtienen de repositorios de Git públicos mediante un script que utiliza la API de GitHub.

El script que se utilizó para la obtención de datos y el código de la visualización se encuentran en github.com/benjavicente/infovis.

Informe

Esta sección corresponde al informe de la entrega del examen de visualización de información IIC2026 2022-2. Cada sección corresponde a un nivel del modelo anidado de Tamara Munzner (“A Nested Model for Visualization Design and Validation”, 2009).

Caracterización del dominio

Se decidió trabajar con datos de repositorios de Git públicos de GitHub, dado que se quería explorar la actividad de ciertas organizaciones en sus diferentes utilizando los commits como referencia.

Para esto, se creó un script que toma como input el usuario u organización de GitHub (el login) y entrega datos con el siguiente estructura (usando TypeScript):

interface Change {
	add: string;
	del: string;
	file: string;
}

interface Commit {
	/** Nombre del repositorio */
	repo: string;
	/** Nombre del autor */
	name: string;
	/** Fecha del commit */
	date: string;
	/** Mensaje del commit */
	commit: string;
	/** Hash del commit */
	hash: string;
	/** Cambios en el commit */
	changes: Change[];
}

Como se puede observar, los datos utilizados para este trabajo tienen un formato tabular, donde cada fila representa cada commit realizado.

Existió un pequeño pre-procesamiento de los datos, limitando la fecha de creación a los commits.

Es importante notar, que dado que el dataset requiere tiene de input el login, se puede crear multiples datasets y tener por tanto varias visualizaciones.

El objetivo de realizar una visualización de estos datos es poder entender como se ha desarrollado un proyecto u organización a lo largo del tiempo, y poder comparar la actividad de diferentes organizaciones y usuarios distintos dentro de estas.

Abstracción de datos y tareas

Para la visualización, se definieron las siguientes tareas:

Analizar la actividad que ha tenido una organización o usuario en sus repositorios a lo largo del tiempo.

Dado la cantidad de commits, y las fechas y cantidad de cambios de estos, se podrá descubrir como ha cambiado la actividad de una organización o usuario a lo largo del tiempo.

Consultar la actividad de repositorios de una organización o usuario.

Se podrá comparar la actividad entre diferentes repositorios o usuarios según cantidad de commits y cantidad de cambios.

Resumir los repositorios y su desarrollo en los últimos años.

A grandes rasgos, se podrá ver rápidamente información de repositorios, como cuales activos, cuales han sido los mantenedores de estos y cual es el lenguaje que se usa.

Abstracción de datos

Para esta visualización, solo existen datos de tipo item (los commits), que contienen los siguientes tipos de atributos:

Dentro de la visualización, se realizan procesamientos de datos, una sobre sobre commits en repositorios y otras sobre commits de usuarios.

Para la calificación de commits sobre repositorios,se realiza una suma entre add y del (usando escala con raíz cuadrada) para obtener un atributo count.

Por el otro lado, para la agregación de commits por usuario, se agrupa los commits por autor y fecha, quedando 3 atributos: name, date y count.

Codificación visual y de interacción

Para la codificación, se utilizó lo siguiente para codificar y presentar los datos:

• Idiom visual: Treemap de commits
  Para representar sus commits se utilizó este tipo de visualización, lo que permite realizar comparaciones sobre el usuario u organización, permitiendo realizar la segunda tarea de comparación de commits. Se podría considerar la agrupación que provee el treemap como un canal del repositorio.
• Marca rectangulo: Representación de un Commit
  Es la marca utilizada en treemaps como el realizado.
• Canal de matriz de colores: Color del bloque de un commit
  Dado esto, se puede observar cuales son los lenguajes más utilizados tanto por repositorio como por usuario, resumiendo parte del desarrollo de estos (tercera tarea).
• Canal de tamaño: Tamaño de un bloque de un commit
  Además de la distribución que provee el treemap, la escala de raíz cuadrada permite identificar y comparar cuales son los commits con más cambios (segunda tarea).
• Idiom de interacción: Selección de un repositorio
  Esto permite enfocarse en el resumen de un repositorio en particular y ver el desarrollo de este en el tiempo, apoyando a la primera y tercera tarea.
• Idiom de interacción: Panel de información de un commit en hover
  Para entregar más contexto del commit, se muestra a la derecha del treemap el mensaje del commit, el nombre del repositorio, el nombre del autor junto al lenguaje principal del cambio, y la lista de cambios realizados en este. Esto permite consultar con mayor detalle la información de un commit, apoyando al resumen de la información (tercera tarea).
• Decisión de diseño: Color correspondiente a cada lenguaje
  Se eligió utilizar un color comunmente asociado a cada lenguaje, para que sea más fácil identificarlos y compararlos.

---

• Idiom visual: Grilla de meses de actividad de un contribuidor
  Para la primera tarea, se decidió utiliza una grilla para mostrar la linea de actividad de los últimos años en un eje y en otro eje los usuarios correspondientes a cada cambio.
• Marca rectángulo: Representación de un grupo de contribuciones
  Al igual que la otra visualización, se utiliza un rectángulo para representar la información, que en este caso es un grupo de commits de un usuario en un mes en particular.
• Canal de luminosidad de colores: Tono de color de un mes de un contribuidor
  Se utiliza una escala de color monocromática para representar la actividad (cantidad de commits) de un usuario en un mes en particular.
• Canal de posición: Posición de un bloque de un mes de un contribuidor
  Se utiliza el eje X para representar el mes y el eje Y para representar el usuario, de esta forma se puede comparar la actividad de un usuario en un mes en particular con el resto de los usuarios (primera tarea).
• Idiom de interacción: Brush de selección de meses
  Se utiliza un brush para seleccionar un rango de meses, de esta forma se puede comparar la actividad de una organización en un rango de meses en particular con el resto de los usuarios (primera tarea).
• Idiom de interacción: Hover en el nombre de un contribuidor
  Se puede hacer hover en el nombre de un contribuidor para mostrar que commits realizó en el rango de meses seleccionado, consultando la información de un usuario en particular (segunda tarea).
• Idiom de interacción: Botón para reiniciar selección
  Para tener una opción clara de volver al estado original, se añadió un botón para reiniciar la selección de meses y repositorio.
• Decisión de diseño: Order de contribuidores de forma descendiente
  Se ordeno el eje de contribuidores de la visualización de la grilla para mostrar los usuarios con más contribuciones primero en el contexto seleccionado.