Getting Started with P5

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")

Examples of editors: Notepad++ (Windows), SublimeText (Linux, Mac).

Note that there is a tutorial on how to set it up with Sublime here: https://p5js.org/get-started/

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.

Choosing a Research Questions & First Analysis

In the remainder of the course we are going to use the gender dataset.

Your task is now to think about high-level questions that you are interested in and think about how you could answer them. In order to find interesting question, you can look up online for gender-equality studies and their results and try to see how this could be applied to the dataset at hand. Reading other reports will be interesting as it will help you see what questions are usually asked, how indexes are computed and how results are presented.

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 gender equality studies online in different domains and think about high-level questions that you would like to answer. Each student is expected to provide 2 different questions.

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 "Assignment1-LASTNAME.zip" via email. It should contain:

  1. Your sketch and the website as described above.
  2. An additional Research.txt with 2 research questions. In this file, you are also asked to provide links to studies and/or reports you read about gender equality.
  3. 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. If your code only runs in a specific browser, please specify it somewhere.

WHERE - You should email the file to lonni.besancon@gmail.com with the subject Infovis-Assignment1.

WHEN - Assignment 1 is due before "23:00 on November 28th.'''

License

You can reuse this content for your class if you acknowledge us (Petra Isenberg):