Skip to content

Latest commit

 

History

History
60 lines (37 loc) · 2.89 KB

File metadata and controls

60 lines (37 loc) · 2.89 KB

Data Visualization and Sonification with Web Audio

Here you will find all the necessary files and information to join our creative data visualization and sonification workshop, held in collaboration with the Digital Scholarship Days at the University of Oslo.

Contents

  1. Introduction
  2. Learning outcomes
  3. Requirements
  4. Setup
  5. p5 documentation
  6. Organizers

Introduction

The term Sonification refers to the use of non-speech audio to convey information or perceptualize data. In this workshop, you will learn how to use sonification and dynamic images to display valuable and coherent multi-dimensional data in a web browser. We will explore these concepts in a creative way using the p5.js library library. As a bonus, you will also learn how to embed web apps onto your personal UiO pages.

For location and additional information, visit the official event page.


Learning outcomes

  • Learn easy-to-use Javascript libraries for dynamic visualization and sonification.
  • Learn to creatively map pre-recorded or real-time data and to sound and visuals.
  • Learn to integrate data visualization and sonification in a web page.

Requirements

  • Familiarity with any text-based programming language (e.g., if/else statements, loops, arrays, functions, etc.). In the workshop, we will write Javascript code. The workshop is for people interested in data sonification and/or creating computing, wheter it be PhDs, postdocs, other technical personnel and/or students.

  • Laptop with a chromium browser (e.g Chrome, Firefox, Brave etc.) and programming-oriented text-editor (e.g Visual Studio Code).

Setup

You should work directly from the browser via p5's own web editor. Here is how you do it:

  1. Download this repository.

  2. Create an account on the p5.js Web Editor.

  3. Go to "My Sketches" (click on "Hello, username!" on the top right) and create a new sketch.

  4. In the web editor of your new sketch, open the sidebar (black arrow on gray backgroun) to access your files.

  5. Via the small dropdown menu "Sketch Files" in the left column of the web editor, choose to "upload file" and upload the "arabica_data_cleaned_year.csv" from the data folder.

In-depth examples, full code documentation and tutorials are avaliable on the p5 official website.

Organizers

Stefano Fasciani and Aleksander Tidemann