The task was to portray quantified self using our personal data. It was meant to collectively outline who we are just by representing the data about ourself.
They are subjective renderings that mediate between the artist’s vision, the subject’s self-presentation and the audience’s interest. Designed to evocatively depict an individual, a data portrait can be a decorative object or be used as an avatar, one’s information body for an online space. Data portraits raise questions about privacy, control, aesthetics and social cognition. These questions become increasingly important as more of our interactions occur online, where we exist as data not bodies
Idea
I wanted to create something that resonates with me and my background of being a computer engineer and an aspiring information designer. And hence, I tried to portray own data as pixels and tried to depict my presence on the larger internet. The overall piece also reflects my interests in music by showing popular and frequently occuring tags in the videos watched on Youtube platform. The attempt was to build it in style much closer to my favourite aesthetic genres like Neon Noir, Cyberpunk, Outrun and Synthwave.
Process
Collected all the data that Google stores about me. I had huge collection of data which consisted of places I searched for, search terms googled by me, all the emails right from the initiation of mail account and a LOT more. For the purpose of data selfie, I took data about all the Android apps that I had installed or uninstalled between 2018 to 2022 and also the links of all the videos I had watched on Youtube. (2018, because back then I had requested Google to delete all the data it had collected about me 😅)
Unique Applications Installed
Total YouTube videos watched
Process
Using Google Colab, I scraped all the app icons and other details by using the links from the data. Out of 1349 links, 406 links were not working - meaning the name of the application was either changed or it was taken down by Google because of violations or maybe it was just a system app. From the Youtube videos links, I scraped the tags attached to those videos and recorded the frequency of all the tags. Using this two types of data, I created a quad tree (which is used for Image compression technique) structure using app icons and a word cloud using the tags. For the first attempt, p5.js was used to visualise the overall structure and D3.js to visualise the filtered data. Owing to less freedom and technical capabilities for smoother experience, the second and final attempt was made using PIXI.js for rendering the elements and D3.js to visualise the data. Work of Charis Tsevis served as a huge inspiration.
Q-Tree
A quadtree is a tree data structure in which each internal node has exactly four children. Quadtrees are the two-dimensional analog of octrees and are most often used to partition a two-dimensional space by recursively subdividing it into four quadrants or regions. The data associated with a leaf cell varies by application, but the leaf cell represents a "unit of interesting spatial information". The subdivided regions may be square or rectangular, or may have arbitrary shapes. This data structure was named a quadtree by Raphael Finkel and J.L. Bentley in 1974. A similar partitioning is also known as a Q-tree.
Step-by-step improvements
After doing the initial version on Google Colab, rest of the iterations were rendered using p5.js and I was able to achieve a significant framerate while displaying such huge amount of data. Even though having gained good enough frames while rendering the piece, I felt the need of smoother user experience and faster loading times. Fortunately, this was possible by using PIXI.js instead of going for much lower language like WEBGL and openGL.
Second Attempt
Graphics rendering libraries other than p5.js, like three.js, paper.js and two.js were considered for the second attempt to visualise my data selfie. PIXI.js proved to be a very useful and stealthy library in giving buttery smooth experience while simultaneously crunching the numbers. While the task of setting up the overall layout and interaction seemed to be easy, the task of rendering the data smoothly without any major janks, had a very steep curve and involved gettting to know how the PIXI library as overall platform work and the role of WEBGL in it.
Final render
The final visualisation of data selfie rendered using PIXI.js and D3.js can be .
