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.
project
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.
implementation
finally the project is implemented in javascript (P5js) and the basic validations are done.
documentation
the documentation of the project is done through a demonstration video, both of the process and the result of the project.
proyecto
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.
implementación
finalmente se implementa el proyecto en javascript (P5js) y se hacen las validaciones básicas de funcionamiento.
documentación
la documentación del proyecto se realiza a través de un video demostrativo, tanto del proceso como del resultado del mismo.