Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ignaciopardo/vd_s1_tp2_mazzarello_pardo

Trabajo Práctico - Visualización de Datos - LTD - UTDT
https://github.com/ignaciopardo/vd_s1_tp2_mazzarello_pardo

Last synced: 20 days ago
JSON representation

Trabajo Práctico - Visualización de Datos - LTD - UTDT

Awesome Lists containing this project

README 

        
# 🚀 Trabajo Práctico Astronautas - [Link al repo](https://github.com/IgnacioPardo/vd_s1_tp2_mazzarello_pardo)



## [Visualización de Datos - Licenciatura Tecnología Digital - UTDT](https://www.utdt.edu/ver_contenido.php?id_contenido=19866&id_item_menu=31534)



## 🧠 **Integrantes**



- [Luca Mazzarello](https://github.com/Luquish)

- [Ignacio Pardo](https://github.com/IgnacioPardo)



## 👨🏻‍🏫 **Profesores**



- Alejandro Tumas Uffelmann

- [Carlos Araujo](https://github.com/araujo-carlos)

- Julieta Romero

- Delfina Arambillet



## 📑 Objetivo



### 08/03 | Marcas y Canales



Reconocer las tipologías del conjunto de datos, de los datos y de sus atributos.  

Exploración visual en Plot. Elegir un atributo del conjunto de datos y representarlo visualmente eligiendo una marca y un canal de codificación. ¿En el mismo gráfico, se puede visualizar otro atributo con la misma marca y otro canal? ¿Se puede visualizar otro atributo agregando una nueva marca?

¿Es eficaz la visualización? Probar de visualizar el mismo atributo con otra marca.

Crear un nuevo proyecto y repetir los puntos B y C cambiando de atributo.



Les proponemos reutilizar los códigos del apunte de Marcas y Canales visto en clase, a los cuales pueden acceder desde acá.



### 15/03 | Diseño y edición



Del total de visualizaciones creadas seleccionar las cuatro más efectivas. Ajustar el diseño de cada uno de los gráficos: definir el formato, mejorar los elementos textuales (ticks, leyendas, etc.). Destacar datos importantes del gráfico con color y texto. Agregar leyendas que expliquen la codificación del color si es necesario.



### 22/03 | Diseño web



Aplicación de nuevos elementos en HTML. Cambio de apariencia y aplicación de estilos en CSS. Para cada visualización definir el tema, redactar y maquetar un título que cumpla la función de identificar el mensaje. Ampliar con una bajada de segunda jerarquía que se complemente con el enunciado del título principal. En un tercer nivel, complementar el gráfico con la  información de la fuente de datos y de los autores. Diseño tipográfico y cromático de los elementos.



## 🗃 **Estructura del repositorio**



- `README.md`: Este archivo.

- `index.html`: Página web con las visualizaciones.

- `assets/`: Carpeta con archivos de recursos.

- `dataviz_1/`: Carpeta con los archivos de la primera visualización (Histograma).

- `dataviz_2/`: Carpeta con los archivos de la segunda visualización (Heatmap).

- `dataviz_3/`: Carpeta con los archivos de la tercera visualización (Stacked Bar Chart).

- `dataviz_4/`: Carpeta con los archivos de la cuarta visualización (Line Chart).

- `dataviz_5/`: Carpeta con los archivos de la quinta visualización (Tree)

- `dataviz_6/`: Carpeta con los archivos de la sexta visualización (Histograma, no incluido)

- `dataviz_7/`: Carpeta con los archivos de la séptima visualización (Histograma, no incluido)

- `vd_astronautas/`: Sub-modulo con el dataset de los astronautas.



En el archivo `assets/tooltip.js` se encuentra el código para mostrar tooltips en las visualizaciones. Este código fue tomado de [este Notebook](https://observablehq.com/@mkfreeman/plot-tooltip).



## 📋 **Dataset**



El dataset utilizado es el de los astronautas de la NASA. Pueden encontrarlo en el sub-modulo `vd_astronautas` o en [este link](https://github.com/visualizacion-de-datos-utdt/vd_astronautas/tree/20763419f7b0d62c6bae8fb17d92cbb8e3c79674).



## 📉 **Visualizaciones**



### 1. Histograma: Cantidad de Misiones por Año



Buscamos representar la progresión de `cantidad de misiones` a lo largo de los `años`, por lo que, a partir del dataset que nos provee un listado de misiones, hicimos un conteo de ocurrencias de cada uno de los años. Con está información, consideramos que el histograma es una opción muy buena para ver cómo se distribuyen los datos de manera continua, como en este caso, los años de misión de los astronautas. El histograma entonces representa en el `eje X` los años, y en el `eje Y` el conteo de misiones para dichos años.



### 2. Heatmap: Horas de Misiones por año por país



Para representar las horas de misiones por año por país evaluamos utilizar un gráfico de lineas porque permite graficar múltiples valores categóricos a lo largo del tiempo, pero optamos por un Heatmap porque expone grandes cantidades de datos en una matriz contenida. En este caso, se pueden representar los datos de `horas de misiones` como valores de intensidad de color en una matriz, donde el `eje X` representa el `año` y el `eje Y` representa el `país`. Los valores de `horas de misiones` se asignan a una escala de colores, donde los valores más altos corresponden a colores más cercanos al amarillo mientras que los valores más bajos corresponden a colores más cercanos al azul.



Esta visualización es útil para identificar tendencias en los datos, así como para comparar las `horas de misiones` por `país` y por `año`. Por ejemplo, se pueden identificar países que hayan tenido más misiones durante ciertos años o períodos de tiempo. Los tipos de datos en el Heatmap que decidimos son valores numéricos para las `horas de misiones` y variables categóricas para el `país` y el `año`.



### 3. Stacked Bar Chart: Genero por Nacionalidad



Para visualizar la frecuencia de astronautas por género y nacionalidad planteamos utilizar un gráfico de barras apiladas. Esto se debe a que este tipo de gráfico nos permite representar dos variables categóricas al mismo tiempo y de manera clara, mostrando las frecuencias de cada categoría en cada uno de los grupos.



Al utilizar un gráfico de barras apiladas, podríamos ver fácilmente la distribución de astronautas por `género` y `nacionalidad`, permitiéndonos comparar las cantidades de una manera clara y sencilla. Además, este tipo de gráfico es comúnmente utilizado en el ámbito académico y científico, por lo que sería una elección adecuada para representar datos en una presentación o informe universitario.



### 4. Line Chart: Cantidad de astronautas por ocupación por año



Consideramos utilizar un gráfico de líneas para visualizar la cantidad de astronautas por por año debido a que es un tipo de gráfico que permite mostrar la evolución o tendencia de los datos a lo largo del tiempo. En este caso, elegimos representar la cantidad de astronautas por ocupación como la variable en el eje y y el tiempo (representado por el año) en el eje x.



Los tipos de datos involucrados son principalmente numéricos, ya que se trata de una `cantidad de astronautas`, pero también se incluyen variables categóricas como la `ocupación`, lo que permite clasificar los datos en diferentes categorías. Las categorías se pueden representar en un gráfico de líneas mediante el uso de diferentes líneas con colores para cada una de ellas. Por ejemplo, se puede usar un color distinto para cada categoría de ocupación de astronautas (por ejemplo, amarillo para pilotos, turquesa para ingenieros, etc.) para que sea fácilmente distinguible en la visualización.



## Extras



### World Tour y Tree



Cómo introducción a la página generamos una vista previa de algunos de los datos del dataset. En ella, se puede ir viendo por astronauta: su nombre; nacionalidad; y horas y año de misión; mientras un globo terráqueo va sobrevolando la nacionalidad. El código del World Tour es una modificación del siguiente [ejemplo](https://observablehq.com/@d3/world-tour).



Cómo pie de página, agregamos una visualización de tipo árbol jerárquico cómo otra manera de visualizar los astronautas del dataset junto a sus horas de misión.



## Referencias



- [D3.js](https://d3js.org/)

- [Plot](https://observablehq.com/@d3/plot)

- [Plot - Tooltip](https://observablehq.com/@mkfreeman/plot-tooltip)

- [World Tour](https://observablehq.com/@d3/world-tour)

- [Tree](https://observablehq.com/@d3/tree)



## Licencia



[MIT](https://choosealicense.com/licenses/mit/)



## 📅 **Fecha**: Abril 2023













### 🎓 Visualización de Datos - Licenciatura Tecnología Digital - UTDT