1 of 16

IIC2026

Visualización de Información

Alessio Bellino

2 of 16

Equipo de Acompañamiento y Orientación Estudiantil

Dirección de Pregrado, Escuela de Ingeniería UC

orientaciondipre.ing@uc.cl

3 of 16

Salud estudiantil: En Campus San Joaquín: En oficinas de Salud y Bienestar Estudiantil, ubicadas en el 3° piso del Hall Universitario. 

https://saludestudiantil.uc.cl/

4 of 16

Encuesta temprana

Es útil responderla

5 of 16

Plotly.js

6 of 16

Comencemos con los datos

Excel / Google Sheets

7 of 16

Comencemos con los datos

CSV

8 of 16

Comencemos con los datos

JSON

[

{

"Fecha": "24 de julio de 2001 (01:00)",

"Nombre": "Tarapacá de 2001",

"Lat": -19,

"Lon": -70,

"Zonas": "I y II regiones",

"Magnitud": 6.5,

"Tzunami": false,

"Muertos": 1

}, … ,

{

"Fecha": "18 de abril de 2002 (12:08)",

"Nombre": "Copiapó de 2002",

"Lat": -27.535,

"Lon": -70.586,

"Zonas": "II y III regiones",

"Magnitud": 6.8,

"Tzunami": false,

"Muertos": 0

}

]

9 of 16

Comencemos con los datos

JavaScript

[

{

"Fecha": "24 de julio de 2001 (01:00)",

"Nombre": "Tarapacá de 2001",

"Lat": -19,

"Lon": -70,

"Zonas": "I y II regiones",

"Magnitud": 6.5,

"Tzunami": false,

"Muertos": 1

}, … ,

{

"Fecha": "18 de abril de 2002 (12:08)",

"Nombre": "Copiapó de 2002",

"Lat": -27.535,

"Lon": -70.586,

"Zonas": "II y III regiones",

"Magnitud": 6.8,

"Tzunami": false,

"Muertos": 0

}

]

let terremotos =

10 of 16

¿Qué formato requiere Plotly?

[

{

"Fecha": "24 de julio de 2001 (01:00)",

"Nombre": "Tarapacá de 2001",

"Lat": -19,

"Lon": -70,

"Zonas": "I y II regiones",

"Magnitud": 6.5,

"Tzunami": false,

"Muertos": 1

}, … ,

{

"Fecha": "18 de abril de 2002 (12:08)",

"Nombre": "Copiapó de 2002",

"Lat": -27.535,

"Lon": -70.586,

"Zonas": "II y III regiones",

"Magnitud": 6.8,

"Tzunami": false,

"Muertos": 0

}

]

let magnitude = [6.5, 6.8, …]

let lat = [-19, -27.535, …]

let lon = [-70, -70.586, …]

Plotly requiere arreglos…

11 of 16

Como reorganizar los datos con map

let terremotos = [

{

"Fecha": "24 de julio de 2001 (01:00)",

"Nombre": "Tarapacá de 2001",

"Lat": -19,

"Lon": -70,

"Zonas": "I y II regiones",

"Magnitud": 6.5,

"Tzunami": false,

"Muertos": 1

}, … ,

{

"Fecha": "18 de abril de 2002 (12:08)",

"Nombre": "Copiapó de 2002",

"Lat": -27.535,

"Lon": -70.586,

"Zonas": "II y III regiones",

"Magnitud": 6.8,

"Tzunami": false,

"Muertos": 0

}

]

Plotly requiere arreglos…

let magnitude = terremotos.map(item => item.Magnitud);

//magnitude será igual a [6.5, 6.8, ...]

12 of 16

Plotly.js

13 of 16

Plotly.js

14 of 16

Proyecto: Planilla Entrega 1

15 of 16

Formulario

16 of 16

IIC2026

Visualización de Información

Alessio Bellino