2f:T41b,

Column Name	Description
pnum	Participant Number
Current Fix Index	The nth fixation in the trial
Current Fix X	X-coordinate of the fixation
Current Fix Y	Y-coordinate of the fixation
Trial Index	The nth trial
Race	Image of Black- or White-identified person

30:Tcac,p5(sketch => { let cols = 8; let trialLoc = []; let data; let trials = []; let j = 0; let fr = 60; let img; sketch.preload = function() { data = sketch.loadTable(table, "csv", "header"); img = sketch.loadImage(bkgd1); } sketch.setup = function () { sketch.createCanvas(1280, 510); sketch.background(220); sketch.image(img, 0, 0); sketch.frameRate(fr); for(j = 0; j < 32; j++){ trials[j] = new TrialClass(j+1); } for (let r = 0; r < data.getRowCount(); r++) { const id = data.get(r, "id"); const trial_index = data.getNum(r, "TRIAL_INDEX"); const fix_index = data.getNum(r, "CURRENT_FIX_INDEX"); const race = data.get(r, "race"); //const fix_duration = data.getNum(r, "CURRENT_FIX_DURATION"); const posx = data.getNum(r, "CURRENT_FIX_X"); const posy = data.getNum(r, "CURRENT_FIX_Y"); trials[trial_index - 1].addFix(fix_index, race, posx, posy); } for (let i = 0; i < 32; i++){ let xLoc = i % cols; let yLoc = Math.floor(i / cols); trials[i].screenX = xLoc; trials[i].screenY = yLoc; } } sketch.draw = function() { for (let m = 0; m < trials.length; m++) { trials[m].drawTrial(); } } class TrialClass { constructor(tempIndex) { this.index = tempIndex; this.fix_index = []; this.posx = []; this.posy = []; this.race = "N/A"; this.screenX = 0; this.screenY = 0; this.k = 0; } addFix(fix_index, tempRace, posx, posy) { this.fix_index.push(fix_index); this.race = tempRace; this.posx.push(posx); this.posy.push(posy); } drawTrial() { if (this.race =="Black") { sketch.noFill(); } else if (this.race == "White") { sketch.noFill(); } sketch.rect(this.screenX * 160, this.screenY *128, 160, 128); if (this.race == "Black") { sketch.push(); if (this.k > 0 && this.k < this.fix_index.length) { sketch.translate(this.screenX * 160, this.screenY * 128); sketch.stroke(0, 0, 0, 20); sketch.strokeWeight(2); sketch.line(this.posx[this.k-1] /8, this.posy[this.k-1] /8, this.posx[this.k] / 8, this.posy[this.k] / 8 ); } if(this.k > this.fix_index.length) { this.k = this.fix_index.length; } else { this.k++; } sketch.pop(); } else if (this.race == "White") { sketch.push(); if (this.k > 0 && this.k < this.fix_index.length) { sketch.translate(this.screenX * 160, this.screenY *128); sketch.stroke(255, 0, 0, 20); //added red because the lines are a little hard to see sketch.strokeWeight(2); sketch.line(this.posx[this.k-1] /8, this.posy[this.k-1] /8, this.posx[this.k] / 8, this.posy[this.k] / 8 ); } if (this.k > this.fix_index.length) { this.k = this.fix_index.length; } else { this.k++; } sketch.pop(); } } } }) 31:Tb15,## Final Comments This has been an incredible experience learning how to use p5.js with large datasets. I cannot give enough credit to Professor Kate Hollenbach for her patience in helping me understand the concepts and techniques of using data from a csv file to create a visualizations in p5.js and Observable. Given where I am in my coding skill level, I realize that there are many more skills I can develop. However, I am excited to try creating new interactions that can be helpful in understanding datasets, particularly for my work. This is not to say that this assignment is complete. Some of the skills that I would like to learn in the future are as follows: - I would like to learn how to include a full screen option. Job van der Zwan's [Fullscreen p5js - template notebook with audio](https://observablehq.com/@jobleonard/fullscreen-p5js-template-notebook-with-audio) may be a great resource to begin conceptualizing this idea. - I would like to figure out how to scale iframes using html and css in observable. Unfortunately, I didn't have time and was unable to scale down some of the visualizations that exceeded Observable's maximum width. - I was originally hoping to create heat maps with my project to indicate the duration of fixations. Due to time, I was unable to complete this, but I hope I can make time to create this. - I now have access to the original photographs of the people in the images in addition to a morphed "White face" and a morphed "Black face". I would like to learn how to create more interactivity so that I could potentially toggle on/off either of these two types of faces in the background (currently, there is a crude overlay-version in the background). - One of the potential considerations of using this dataset is really thinking about data in the aggregate. Currently, the data is presented at the individual level. However, as an experimental study, there is a need to present the information in the aggregate so that clearer generalizations can be made. One idea that I had was to think about the duration of fixations within the 7 second interval and, perhaps use the map(); function to place the lines in its correct relative duration. Then, it is possible to create standardized intervals (e.g., 10 mili-second intervals) to see where the eye is for all participants looking at the same image. Connecting this information to the final test scores and confidence scores may provide better insight into patterns of human perception. - For the purpose of this assignment, I was able to create some sort of visualization, but I am not sure it actually helps communicate the actual message of the research study results. I would like to be able to talk to Josh a little more and think together about how we can use visualizations and interactivity to support his research hypotheses.32:T56b,### Observable Resources - Kate Hollenbach: [Building Visualizations with Observable](https://observablehq.com/d/78e2fd31e0966344) - Kate Hollenbach: [Getting Started with Observable](https://observablehq.com/d/7670e23d3e5bb071) - Observable: [Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets?collection=@observablehq/plot-cheatsheets) - Observable: [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/overview) - Observable: [Getting Started](https://observablehq.com/@observablehq/getting-started) ### Resources for p5.js with Observable - Tom MacWright: [p5](https://observablehq.com/@tmcw/p5) - Paul Fishwick: [The Snake that Ate Its Tail](https://observablehq.com/@metaphorz/the-snake-that-ate-its-tail) - Mark Webster: [Setting up P5js](https://observablehq.com/@motiondesign_01/setting-up-p5js) - Job van der Zwan: [Fullscreenp5js - template notebook with audio](https://observablehq.com/@jobleonard/fullscreen-p5js-template-notebook-with-audio) ### Resources for coding in p5.js - Scott Fitzgerald: [Select Menu with p5js](https://www.youtube.com/watch?v=couc24XbraE&ab_channel=ScottFitzgerald) ### Inspiration - MyOnlineTrainingHub. (2020, March 24). Interactive Excel project management dashboard - Free download [Video]. YouTube. [https://youtu.be/5qtSioTE2wY](https://youtu.be/5qtSioTE2wY)33:[{"id":"175cba2ded5eed5f05ef8a0e68134fbc727f9bccd6a9aa74a8c2e9f5fcdca94a252953a826fb9f4c6c673ca8df9e20359100f6f2cd956fbf918388c753c22a0f","href":"https://static.observableusercontent.com/files/175cba2ded5eed5f05ef8a0e68134fbc727f9bccd6a9aa74a8c2e9f5fcdca94a252953a826fb9f4c6c673ca8df9e20359100f6f2cd956fbf918388c753c22a0f","name":"d2.p030.csv","type":"text/csv","lastModified":1654096324389.946,"size":20468},{"id":"93a243ce3bccfb612cca1c29e1ff5b3d374e5dc1f190dcdc1c214fa4e1786050f9693374478f24b4b600369d1234b3ee252584952361d1756c66bd0dd30b2a39","href":"https://static.observableusercontent.com/files/93a243ce3bccfb612cca1c29e1ff5b3d374e5dc1f190dcdc1c214fa4e1786050f9693374478f24b4b600369d1234b3ee252584952361d1756c66bd0dd30b2a39","name":"initialsketch.png","type":"image/png","lastModified":1654628910640.448,"size":314704},{"id":"4cf67b8c9e0b8f520d954c5b9c7ffb1e1e151e9a6f4a5c651a6d822bd6e20484ae851bf7cbf17d5748870a436481844011aff82d8f0b95860bc85be1bce9f022","href":"https://static.observableusercontent.com/files/4cf67b8c9e0b8f520d954c5b9c7ffb1e1e151e9a6f4a5c651a6d822bd6e20484ae851bf7cbf17d5748870a436481844011aff82d8f0b95860bc85be1bce9f022","name":"bkgd1.png","type":"image/png","lastModified":1654098936449.099,"size":63762},{"id":"fe99e978139605dff480cb91a924662f8bdb0ea7001e900a8fac8574f27ab9e621e9a98f77566c05f739cbfd4ef7be2ccd1fae444eeb26853867984da07ca2ea","href":"https://static.observableusercontent.com/files/fe99e978139605dff480cb91a924662f8bdb0ea7001e900a8fac8574f27ab9e621e9a98f77566c05f739cbfd4ef7be2ccd1fae444eeb26853867984da07ca2ea","name":"data.csv","type":"text/csv","lastModified":1654630291723.905,"size":3376617},{"id":"a6751a02fbc192de6db93de6f2c7d0087ace21d559f8afdecd21b8d849a6677b17af2b2d70d56c2bd0c8277a8a7bf47441da330378d7267a174c18da8952ffb6","href":"https://static.observableusercontent.com/files/a6751a02fbc192de6db93de6f2c7d0087ace21d559f8afdecd21b8d849a6677b17af2b2d70d56c2bd0c8277a8a7bf47441da330378d7267a174c18da8952ffb6","name":"SecondSketch.png","type":"image/png","lastModified":1654630675368.349,"size":39883},{"id":"fda22c06dbd77cc43df540cae2181f7d69e47bcf875cde30b5aa17d9d12c7d45382a7a21ae59fdb85b6129a44555770155b5eefee5ea1e3cda107e7035996b47","href":"https://static.observableusercontent.com/files/fda22c06dbd77cc43df540cae2181f7d69e47bcf875cde30b5aa17d9d12c7d45382a7a21ae59fdb85b6129a44555770155b5eefee5ea1e3cda107e7035996b47","name":"rstudio.png","type":"image/png","lastModified":1654631849797.05,"size":533522},{"id":"919601dc148f5aba7ae0a6efa29cd985b94f02c860c1e7efcae556e4de917886243caf159332ef592bcfebfcb08b365f6062d559cf4ab0e7d618d0049a4093d5","href":"https://static.observableusercontent.com/files/919601dc148f5aba7ae0a6efa29cd985b94f02c860c1e7efcae556e4de917886243caf159332ef592bcfebfcb08b365f6062d559cf4ab0e7d618d0049a4093d5","name":"cfd.png","type":"image/png","lastModified":1654191424555.686,"size":284386}] 2d:{"title":"EDPX4200 Final Project","cells":[{"id":0,"value":"# EDPX4200 Final Project","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"## Purpose of Project\n\nThe purpose of this project was to create data visualizations using data from an eye tracking research by Correll et al. (n.d.). The primary question guiding this project was, \"When presented image of in/out group faces, do individuals demonstrate distinct patterns in the sequencing of fixations?\" While most researchers produce bar charts, scatter plots, etc. to describe their data, I was interested in exploring ways in which the eye tracking could be visualized in a more interactive format.","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"### Research Study\nThe data for this project was based on Joshua Correll's research on [face perception](http://psych.colorado.edu/~jclab/face_perception.html) to better understand the ways in which in-groups and out-groups processed faces. \n\nThe full dataset included 96 participants. Each participant was asked to view and remember the neutral faces of 32 people (16 Black self-identified and 16 White self-identified) for a duration of seven seconds for each image. These images came from the (Chicago Face Database) [https://www.chicagofaces.org/] which included meta data about each person in the photograph. The number of fixations varied, depending on the trial. ","pinned":false,"hidden":false,"mode":"md"},{"id":768,"value":"cfd1 = FileAttachment(\"cfd.png\").image()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"

Image of woman's face with different measurement areas marked with various letters of the alphabet. Key on right spanning from letters a through w indicate the correspending length on the face

\n","pinned":false,"hidden":false,"mode":"html"},{"id":96,"value":"### Relevant Eye Tracking Data\nThere were 36 variables in the eye tracking raw data. Among these, a number of variables seem relevant to this project. The name and description are outlined below.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":416,"value":"## Initial Sketches and Proposal\nThe initial sketches and proposal were nothing like the final project. Initially, my goal was to have one image and have multiple sketches placed on top of each other (see image below):","pinned":false,"hidden":false,"mode":"md"},{"id":773,"value":"initialsketch = FileAttachment(\"initialsketch.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"

Six images on a 3 by 2 grid with scanned hand-drawn sketches of the proposed interface.

\n","pinned":false,"hidden":false,"mode":"html"},{"id":519,"value":"The image above includes six sketches of the the proposed interface. At the center of the interface is a prototypical face. Lines with endpoints illustrate the eye tracking routes. Below the image of the face are three buttons: White, Black, and All. In one of the sketches (bottom middle), there are colored portions, indicating the potential use of heat map data.\n\nIn the second iteration of sketches, I thought about the location of items that I would want (see image below). I wanted to be able to view visualizations based on selections I made from a drop down menu.","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"secondsketch1 = FileAttachment(\"SecondSketch.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"

Second iteration interface design on white background that included user interaction.

\n","pinned":false,"hidden":false,"mode":"html"},{"id":632,"value":"This interface design was divided into two areas. On the left included the title, \"Face Tracking Simulator,\" four drop down menus, one slider bar, and three buttons. The drop down menu options included selections for participant, scope, race, and trial. The slider would change the draw speed. Three buttons would allow the user to add a participant's trial to the queue, clear the queue, or run the queue. Unfortunately most of this would not make it to the final product.","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"## Cleaning Up Data with R\n\nThe raw data was imported into RStudio and cleaned up, primarily, to reduce the file size. Unused columns were deleted.","pinned":false,"hidden":false,"mode":"md"},{"id":783,"value":"rstudio = FileAttachment(\"rstudio.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"

Interface of RStudio with RMarkdown code

\n","pinned":false,"hidden":false,"mode":"html"},{"id":224,"value":"## General Tools and Processes\nFor this project, I initially imported the csv files into the p5js Online Editor. However, after a few mishaps, I used both the online editor and the [offline editor](https://p5js.org/download/) with Brackets and Chrome so that I wouldn't mistakenly overwrite previous files. I made duplicates based on different milestones of the project. While I will redo the script for most iterations, I will embed the iframe and link to the p5js editor of some of the notable highlights of my process.","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"## Participant 030 Sketch\n\nFor the first pilot, I used participant p030's data to illustrate the eye tracking coordinates of the 32 trials. I wanted to know what it would look like to visualize the lines in sequential order.","pinned":false,"hidden":false,"mode":"md"},{"id":657,"value":"### All In One\nFor the first iteration, I was able to get the x and y coordinates to connect on the screen. The sketch below are the lines depicting the 32 trials for participant 30. [Link to the sketch in the p5.js editor](https://editor.p5js.org/akio.correll/sketches/cLTVhqz9C) | [View Full Screen](https://editor.p5js.org/akio.correll/full/cLTVhqz9C)\n\nNote: the embedded iframe would not work when describe(); was used in the p5.js editor. The describe(); information is commented out in the editor and was moved as an alt-text for the iframe.","pinned":false,"hidden":false,"mode":"md"},{"id":663,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":673,"value":"### Side By Side\nThe second milestone was being able to separate the data by race. In the visualization below, the lines illustrate the differences for self-identified Black faces (left) and self-identified White faces (right) [Link to the sketch in p5.js editor](https://editor.p5js.org/akio.correll/sketches/OZrWKF7qb) | [View Full Screen](https://editor.p5js.org/akio.correll/full/OZrWKF7qb)","pinned":false,"hidden":false,"mode":"md"},{"id":675,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":499,"value":"### Red and Black\nIn this visualization, I separated the eye tracking data by color (red and black). It was interesting, but without context. [Link to the sketch in the p5.js editor](https://editor.p5js.org/akio.correll/sketches/lKrI2jplS) | [View full screen](https://editor.p5js.org/akio.correll/full/lKrI2jplS)","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":697,"value":"### Black and White Gridded Background\n\nOne of the things I explored was the use of color in underscore the race of the person in the image. I wanted to learn how to use black and white lines to represent the race of the person in the image. The background would be contrasted with the opposite color (i.e., for self-identified White faces, there would be a black background. For self-identified Black faces, there would be a white background). [Link to the sketch in the p5.js editor](https://editor.p5js.org/akio.correll/sketches/m6hWOoIDo) | [View Full Screen](https://editor.p5js.org/akio.correll/full/m6hWOoIDo)","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":715,"value":"### Participant 30 Face Background\n\nBecause the lines were abstract, it was difficult to tell if there were any patterns from the ways in which people viewed images. The next image illustrates the lines atop an image of a face. A pattern was created using Photoshop in the dimensions of the p5.js sketch and used as a background. [Link to sketch in the p5.js editor](https://editor.p5js.org/akio.correll/sketches/exax58-iV) | [View full screen](https://editor.p5js.org/akio.correll/full/exax58-iV)","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":721,"value":"## Full Data Sketches\n\nAfter creating the lines for a single participant, I wanted to be able to illustrate the patterns for all of the data. I also wanted to practice learning how to code the p5.js sketches in Observable. \n\n### All 96 in One\nBelow is the same visualization as the last one, but with the entire dataset. The csv file included 64,057 fixations from 96 participants who completed 32 trials. I used the color red for White-identified faces because the lines were a little difficult to see. I also lowered the opacity to 20.","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"### Final Submission: Random Participant\nFor the final submission, I wanted to learn how to make sure I included an element of user-interaction. For the purpose of the assignment, I created a button that would select a random participant's trial data. [Link to sketch in the p5.js editor](https://editor.p5js.org/akio.correll/sketches/og8PkYZFG) | [View full screen](https://editor.p5js.org/akio.correll/full/og8PkYZFG)","pinned":false,"hidden":false,"mode":"md"},{"id":740,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":759,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"## Resources and Appendices\n","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"### Data Import","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"p030 = {\n const a = await FileAttachment(\"data.csv\");\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"### Data Parsing & Table","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"csvP030 = p030.csv();","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"//Inputs.table(csvP030);","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"table = await FileAttachment(\"data.csv\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"### Using Uploaded File Attachments from Observable in p5js Sketches\n\nIn order to call the uploaded file attachment in Observable, I needed to use the following code to create an Observable-based URL (Credit: [Paul Fishwick](https://observablehq.com/@metaphorz/the-snake-that-ate-its-tail)). I couldn't really figure out how to embed the photos, so I used html and copied the url link. I am sure there is a better way to do this.","pinned":false,"hidden":false,"mode":"md"},{"id":339,"value":"bkgd1 = await FileAttachment(\"bkgd1.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"cfd = await FileAttachment(\"cfd.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"initsketch = await FileAttachment(\"initialsketch.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"secondsketch = await FileAttachment(\"SecondSketch.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"rinterface = await FileAttachment(\"rstudio.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"### Using Observable to display p5js Code: p5 Helper Function","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"I used Tom MacWright's [p5](https://observablehq.com/@tmcw/p5) notebook as a starting point for using p5 code in Observable. A number of modifications were made to the javascript based on the documentation. This included changing the syntax for the functions and adding \"sketch.\" to many of the elements that were native to p5js.","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"import {p5, ParticleSystem} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}