Introduction to P5

For the remainder of the course we will be creating our own visualization according to our research questions. To do so we will be using P5 - a javascript interpretation of processing. Why? Because P5 gives us a lot of freedom for creative design while offering a low entry barrier for those of you who don't have a strong coding background. P5 has been designed to make coding accessible for artists, designers, educators, and beginners.

Today we will be setting up P5 and doing a simple exercise.

Download the slides for the tutorial here

Lets get started - Setup

Set up P5 with an editor of your choice by downloading the complete p5.js: https://p5js.org/get-started/ (under "Environment")

In class I am going to use Notepad++ but really any text editor will do.

Learn P5

The most important reference for you throughout the remainder of the course will be the reference https://p5js.org/reference/, the tutorials http://p5js.org/tutorials/ and the examples https://p5js.org/examples/

In-class exercise

Create a Website that loads your tutorial sketch (we will do this on a copy of the empty example that comes with the complete p5.js so you don't really need to do anything). The tutorial sketch should be loading the Vispubdata csv data file. By the end of the tutorial you should be able to display a line for each paper in the data file and modify some properties of this line.

Assignment

  • Download the cleaned paper-to-author dataset which includes gender, a gender certainty, a rank in the author list per paper and a general position per paper (F = first author, M = somewhere in the middle, L = last author).
  • Familiarize yourself with this dataset.
  • For each author in the dataset:
    • choose a visual mark to display the data items.
    • choose a minimum of two visual variables to display at minimum two different pieces of information for each data item (e.g. in your tutorial example above this could be the year of each paper and the number of authors - or many other things).
    • load any data files that contain the data you need to display - if you don't have the data file that contains your information, create it using R or OpenRefine
    • implement a P5 sketch that draws your data items and their two values
    • create a .html file that I can open to run your sketch. On this website add additional text to tell me what data items you encoded and which mark and visual variables you used to encode which information. On this website also cite sources if you copied code from external sites or examples (this is fine to do - as long as the sources are acknowledged).

Look up the lecture slides for the introduction to visualization lecture if you do not understand the terms visual mark and visual variable.

Submitting the Assignment

WHAT - You should submit a single ZIP file called "YOUR_LASTNAME-Assignment6.zip" via email. It should contain:

  1. Your sketch and the website as described above.
  2. Your .zip file should contain no directories apart from the ones that are part of your sketch. There should be a data folder containing all datasets that you load. You can link to the p5.js libraries as is currently done in the empty example that comes with P5 or you can add them to a libraries folder in your sketch folder (but then make sure to adapt the .html code to point to the right place).

Make sure that your code runs. I will be using Firefox or Chrome to look at the visual result of your exercise.

WHERE - You should email the file to petra.isenberg@inria.fr with the subject VA-Assignment6.

WHEN - Assignment 6 is due before "23:00 on November 29th.'''