A Personal Data Portrait

A coding project aimed to document and visualize a piece of my personally tracked data

a short gif of my project moving, gray and stacked circles growing and distorting as the two sliders in the bottom left are used and with data for each of seven days appearing as the mouse is moved around the center circles

Project Details

I was tasked with personally collecting a week of personal data about myself and representing it however I liked using p5.js, the JavaScript library for creative coding. I took inspiration from peers and other projects online and decided to attempt to visualize my anxious habit of playing with my hair. I tallied how many times each day I played with my hair out of nervous habit and drew it out physically until I had a result I was interested in turning into code. The data points can be seen as the user interacts with space around the center blob. The center blob can be changed using sliders at the bottom and is meant to further visualize how anxiety fluctuates and changes for me throughout the week.

You can find the active project online HERE and the editor's view, including code used, HERE.

Image Gallery

three gray-toned blobby shapes stacked on one another with a thin vertical line coming from underneath the center to the top

Data points can be spotted across the line extending from the center bubbles. They are uneven to represent the randomness of my anxiety's random spikes.

a closeup of the stacked circles to show the shade opacity fading behind them as it gets further from the center

Shading around the center is used to create a dark tone for the viewer and highlight the difference between the outer lines of data and the center bubbles.