Skip to content

aleksati/dataset-sonification-with-web-audio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

the contents for a workshop in creative dataset sonification and visualization in a web browser using p5.js

Topics

Resources

Stars

Watchers

Forks