Visualizaci贸n de Informaci贸n 馃搳馃寛

PUC Chile / IIC2026 / Segundo Semestre 2020


Material de contenidos

1. Introducci贸n al curso

Bienvenida al curso

Presentaci贸n: Grabaci贸n de sesi贸n en vivo | Diapositivas | Diapositivas PDF

An谩lisis en visualizaci贸n

  1. Necesidad de un modelo de trabajo: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Modelo anidado de an谩lisis y validaci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Niveles del modelo anidado: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

2. Abstracci贸n de datos y tareas

Abstracci贸n de datos

  1. Sem谩ntica de datos y sus tipos : Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Tipos de datasets : Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Tipos de atributos : Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Abstracci贸n de datos y derivaciones de datos : Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Abstracci贸n de tareas

  1. Abstracci贸n de tareas : Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Acciones en tareas: Analizar : Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Acciones en tareas: B煤squeda y consulta: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Objetivos en tareas: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n sesi贸n de dudas | Diapositivas | Diapositivas PDF

3. Tecnolog铆as web

Introducci贸n a HTML, CSS y SVG

  1. HTML: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. CSS: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. SVG: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Desarrollo web: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Introducci贸n a JavaScript y D3.js

  1. JavaScript I: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. JavaScript II: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. DOM: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. D3.js: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

4. Introducci贸n a codificaciones visuales

Codificaciones, marcas y canales

  1. El c贸mo: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Marcas y canales: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Utilizar marcas y canales: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Selecciones y data join en D3.js

  1. Selecciones en D3.js I: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Selecciones en D3.js II: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Data join en D3.js I: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Data join en D3.js II: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Utilidades de D3.js I

  1. Cargado de datos en D3.js: Video en Loom | Transcripci贸n PDF

  2. Escalas de D3.js: Video en Loom | Transcripci贸n PDF

  3. Ejes de D3.js: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Utilidades de D3.js II

  1. Eventos en D3.js: Video en Loom | Transcripci贸n PDF

  2. Transiciones en D3.js: Video en Loom | Transcripci贸n PDF

  3. Join de datos personalizado: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

5. Percepci贸n y dise帽o

Percepci贸n

  1. Percepci贸n visual: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Atenci贸n preatentiva y organizaci贸n perceptiva: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Magnitud sensorial y juivio relativo: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Criterios de an谩lisis de canales: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Color

  1. Qu茅 es el color: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Modelos y espacios de color: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Percepci贸n de canales de color: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Colormaps: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Principios de dise帽o en visualizaci贸n

  1. Principios de expresividad: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Principios de efectividad: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Principios de IHC: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Principios de dise帽o gr谩fico: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

6. Datos tabulares

Visualizaci贸n de datos tabulares

  1. Organizaci贸n de datos tabulares: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Definici贸n de regiones categ贸ricas: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Separaci贸n matricial: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Orientaci贸n de ejes: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Layouts tabulares en D3.js

  1. Escalas para organizaci贸n tabular: Video en Loom | Transcripci贸n PDF

  2. Marcas en D3.js I: Video en Loom | Transcripci贸n PDF

  3. Marcas en D3.js II: Video en Loom | Transcripci贸n PDF

  4. Marcas en D3.js III: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Cancelada :(

7. Interacci贸n I

Manipulaci贸n de vista

  1. Cambios en el tiempo: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Selecci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Navegaci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Zooming y panning en D3.js

  1. d3-zoom: Video en Loom | Transcripci贸n PDF

  2. Zoom sobre idioms I: Video en Loom | Transcripci贸n PDF

  3. Zoom sobre idioms II: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

8. Datos espaciales

Visualizaci贸n de datos espaciales

  1. Codificaci贸n de datos geom茅tricos: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Datos geogr谩ficos: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Proyecciones: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Idioms para datos geogr谩ficos en D3.js: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

9. Interacci贸n II

Facet

  1. Facet: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Yuxtaposici贸n y coodinaci贸n de vistas: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Partici贸n en vistas: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Superposici贸n de capas: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Reducci贸n de datos

  1. Reducci贸n de datos: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Agregaci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Reducci贸n de dimensionalidad: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Brushing, agregaci贸n y vistas en D3.js

  1. d3-brush y panor谩mica-detalle: Video en Loom | Transcripci贸n PDF

  2. Agregaci贸n e histogramas en D3.js: Video en Loom | Transcripci贸n PDF

  3. Gr谩fico de dispersi贸n agregado y hexbin: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

10. Datos de red

Visualizaci贸n de redes y grafos

  1. Datasets de red: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Medidas en redes: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Idioms de enlace-nodo: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  4. Matriz de adyacencia: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Posicionamiento mediante fuerzas en D3.js

  1. d3-force: Video en Loom | Transcripci贸n PDF

  2. Fuerzas: Video en Loom | Transcripci贸n PDF

  3. Reactivaci贸n de simulaciones: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Visualizaci贸n de jerarqu铆as y 谩rboles

  1. Jerarqu铆as y 谩rboles: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Contenci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Jerarqu铆a en D3.js: Video en Loom | Transcripci贸n PDF

  4. Idioms jer谩rquicos en D3.js: Video en Loom | Transcripci贸n PDF

Ejemplos de c贸digo de todas las c谩psulas: Carpeta Google Drive

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

11. Cierre al curso

Validaci贸n en visualizaci贸n

  1. Validaci贸n y tipos de resoluci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Amenazas a la validez: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. Enfoques de validaci贸n: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

Sesi贸n de repaso: Grabaci贸n de sesi贸n de dudas | Diapositivas | Diapositivas PDF

Cierre al curso

  1. Panor谩mica del curso: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  2. Contenidos no revisados: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF

  3. C贸mo seguir aprendiendo: Video en Loom | Transcripci贸n PDF | Diapositivas | Diapositivas PDF