Visualización: Usando datos publicados en un sitio web y creando una solución interactiva rápida.
Autor: Andres Rojas
Introducción
La visualización de datos nos permite facilitar el entendimiento (razones o motivos), la comprensión (toma de conciencia) y la comunicación de información a partir de grandes volúmenes de datos.
En este escenario y con asistencia de Manus AI vamos a buscar una solución rápida para visualizar datos publicados específicos de una temática, pero aplicable a cualquier área de interés.
La fuente
- URL: www.michalpaszkiewicz.co.uk /blog/busdistributions/index.html
- Publicado: 29 mayo 2019
Descripción
Michal Paszkiewicz en su blog analiza las distancias entre las paradas de autobús en Londres, UK. Para ello utiliza un conjunto de datos (data set) compuesto por:
- name: nombre de la ruta
- subName: subnombre de la ruta indicando el sentido
- min: la mínima distancia entre paradas de esa ruta
- max: la máxima distancia entre paradas de esa ruta
- average: la distancia media aritmética o promedio entre paradas de esa ruta
- lowerQuartile: el primer cuartil o cuartil inferior
- median: la mediana o valor intermedio que separa la mitad de los valores mayores y la mitad de los valores menores
- upperQuartile: el tercer cuartil o cuartil superior
Se observa en el código fuente la estructura original del conjunto de datos:
var busRouteDistances = [
{"name":"1","subName":"outbound","min":128.3630356416241,"max":544.0310124458418,"average":296.7920337675406,"lowerQuartile":202.53701583019912,"median":290.3851435541115,"upperQuartile":346.1114940274597},
{"name":"2","subName":"inbound","min":92.59789611388209,"max":441.5940646519598,"average":283.3582985450656,"lowerQuartile":225.304279809577,"median":271.55096149855683,"upperQuartile":333.69976244826194},
...
{"name":"N551","subName":"outbound","min":55.10711864642902,"max":531.2493771499051,"average":276.76557077873747,"lowerQuartile":198.593971806357,"median":265.62133558953013,"upperQuartile":350.3148003165983}
]
Prompt
Analizar el contenido. Crear un documento derivado de visualización interactiva en base a los datos de las rutas de autobús, con selector de una o más rutas y comparador de sus datos: distancia entre paradas más corta (shortest), más larga (largest), promedio (averages), medians (mediana), low consistency, high consistency. Crea la estructura de ejemplo para crear esos datos para cargar nuevas rutas. Agrega la posibilidad de seleccionar líneas del documento original a partir de los datos de var=busRouteDistances
Resultado
En un primer resultado la inteligencia nos devuelve una aplicación interactiva con la función analizador de distancia de paradas de autobuses y con un selector de rutas, permitiendo multi selección de las mismas y gráficos comparativos.
Parte de la estructura de datos generada:
// busRoutes.json
[
{
"id": "63_inbound",
"name": "63",
"description": "inbound route",
"metrics": {
"averageDistance": 41.78914005773273,
"medianDistance": 41.78914005773273,
"consistency": "very-high",
"shortestStop": 41.78914005773273,
"longestStop": 41.78914005773273,
"lowerQuartile": 41.78914005773273,
"upperQuartile": 41.78914005773273
},
"stops": []
},
{
"id": "244_outbound",
"name": "244",
"description": "outbound route",
"metrics": {
"averageDistance": 83.14057179764234,
"medianDistance": 83.14057179764234,
"consistency": "very-high",
"shortestStop": 83.14057179764234,
"longestStop": 83.14057179764234,
"lowerQuartile": 83.14057179764234,
"upperQuartile": 83.14057179764234
},
"stops": []
},
...
{
"id": "X26_outbound",
"name": "X26",
"description": "outbound route",
"metrics": {
"averageDistance": 2370.906504009908,
"medianDistance": 2025.1636771923888,
"consistency": "low",
"shortestStop": 335.90393731325537,
"longestStop": 7529.591138336195,
"lowerQuartile": 1554.117052916961,
"upperQuartile": 2709.9102896321087
},
"stops": []
}
]
Diseño
De las propuestas de diseño, Metro Brutalism resulta funcional para visualizar datos comparativos:
Repositorio con el código generado:
Sitio con la aplicación funcionando: