prof. dr. franklin hernández-castro

javascript data visualization worshop

the course consists of five units of preparation and the development of a project on the topic of data visualization with the language javascript.

1. OOP unit

in this unit the student is introduced to the use of objects (OOP object-oriented programming) which can then be used to represent data entities, learn how these objects can be selected, dragged and identified in the form of «hover». l
ater the objects will be used to represent entities in the data, such as: countries, years, people, etc.

2. reading JSON data

in this unit you will learn how to find data on the web and how to clean it for the purposes of a data visualization project.
then we practice how to load this data into programs and how to use it to represent something in the visualization.
this unit uses JSON (javascript object notation) formatted data, which is the native data in javascript.

3. reading CSV data

in this unit we do something very similar to what we did in the previous unit, but here we use the CSV (comma-separated values) format, which is the most widespread of all data formats on the internet.
we also study how to load this type of format and how to manipulate it within the program.

4. 3D data visualization

the objective here is to introduce the student to the visualization of data in three dimensions, several exercises are done and the basics of 3D navigation in P5js and its use in data visualization are shown.

5. data in time

many important data are related to time, how trends of growth or decrease of variables such as temperatures, economy, diseases, etc. develop over the years.
in this unit you will see the basic principles of this type of visualizations that generally work as animations of the data over a period of time.

taller de visualización de datos en javascript

el curso cuenta con cinco unidades de preparación y el desarrollo de un proyecto en el tema de visualización de datos con el lenguaje javascript.

1.  unidad OOP

en esta unidad se introduce al estudiante al uso de objetos (OOP object-oriented programming) que después se pueden usar para representar entidades de los datos, se aprende cómo estos objetos se pueden seleccionar, arrastrar e identificar en forma de «hover». 
más tarde los objetos serán usados para representar entidades en los datos, tales como: países, años, personas, etc.

2. lectura de datos JSON

en esta unidad se estudia cómo encontrar datos en la red y cómo depurarlos para los objetivos de un proyecto de visualización de datos. 
después se practica cómo cargar estos datos en los programas y cómo usarlos para representar cosas en la visualización.
esta unidad utiliza los datos con formato JSON (javascript object notation), que son los datos nativos en javascript.

3. lectura de datos CSV

en esta unidad se hace algo muy similar a lo que se hizo en la unidad anterior, pero aquí se usa el formato CSV (comma-separated values) que es el más difundido de todos los formatos de datos en internet.
también se estudia cómo cargar este tipo de formato y como manipularlo al interior del programa.

4. visualización de datos en 3D

el objetivo aquí es introducir al estudiante en la visualización de datos en tres dimensiones, se hacen varios ejercicios y se muestran la bases de la navegación 3D en P5js y su uso en visualización de datos.

5. datos en el tiempo

muchos datos importantes son relativos al tiempo, cómo se desarrollan durante los años tendencias de crecimiento o decrecimiento de variables como temperaturas, economía, enfermedades, etc. 
en esta unidad se ven los principios básicos de este tipo de visualizaciones que generalmente funcionan como animaciones de los datos en el transcurso de un periodo de tiempo.


the project is intended to show information that can be extracted from the raw data that has been found. 
based on the concept of the DIKW (data, information, knowledge and wisdom) pyramid, we work with the transition from the first level to the second level of the pyramid.

project stages

selection of the topic

students can choose the specific topic they wish to work on and, based on the study of the data available on that topic, decide which information will be the emphasis of their visualization.

paradigm definition

after selecting the topic, the paradigm (or type of graphic) that best suits the type of information to be shown is defined, trying to reduce the observer’s cognitive burden to a minimum. of the many paradigms to be selected, some are more suitable than others to show a specific type of information.
this stage is developed more at the level of hand-drawn sketches and discussed in the working group.

oop design

then we move on to the design of the programming objects that will be needed to implement the chosen paradigm and the desired interactions.


finally the project is implemented in javascript (P5js) and the basic validations are done.


the documentation of the project is done through a demonstration video, both of the process and the result of the project.


el proyecto tiene como objetivo mostrar información que se pueda extraer de los datos crudos que se han encontrado.
partiendo del concepto de la pirámide DIKW (data, information, knowledge and wisdom) se trabaja con la transición del primer nivel al segundo nivel de la pirámide.


etapas del proyecto

selección del tema

los estudiantes pueden escoger el tema específico que desean trabajar y, a partir del estudio de los datos disponibles en ese tema, deciden qué información será el énfasis de su visualización.

definición del paradigma

después de la selección del tema se define el paradigma (o tipo de gráfico) que más se adecúa al tipo de información que se desea mostrar, tratando de bajar la carga cognitiva del observador al mínimo. de los muchos paradigmas a seleccionar unos son más adecuados que otros para mostrar un tipo de información en específico.
esta etapa se desarrolla más a nivel de bocetos hechos a mano y discutidos en el grupo de trabajo.

diseño oop

después se pasa al diseño de los objetos de programación que se necesitarán para implementar el paradigma escogido y las interacciones deseadas.


finalmente se implementa el proyecto en javascript (P5js) y se hacen las validaciones básicas de funcionamiento.


la documentación del proyecto se realiza a través de un video demostrativo, tanto del proceso como del resultado del mismo.