My Week in Google Searches - Data Visualization

Exploring my Search Habits

My primary methodology with this project was to personally kept track of my Google searches and to fill out the Google Form I created for myself whenever I did. The form gathered information like edits to search terms, whether or not I found what I was looking for, and the category of search. However, searches on my phone were not convenient for the form, so I went back when it was time to code and looked at my Google activity and search history and retroactively filled out the form for each entry, amounting to about 83 searches in total. I then used the Google Form to generate a Google Sheets spreadsheet, which I needed to edit in two major ways. Firstly, I only had space for one edited search term in my original form, so I put further edits in the “notes” section, on the spreadsheet I had to pull them out of notes and into their own edit columns. Secondly, if no first, second, or third edit to the search was made, I had to retroactively fill all of those with a “na” so that my program could more easily parse them and it would not mess up array numbering. My data, outside of the number of searches made in the week and edits to search queries, does not really contain any measures, but it does have plenty of categories. My categories (that ended up being used) were Content (the search itself), Found (whether I found what I was looking for or not), Edited (whether I edited the querie), and edit_1, 2, and 3 which were the edited queries if applicable. The type of data (the general genre of it) was my primary way of determining dimensions of the data.

My idea for how the data was to be visualized came from network diagrams, thinking of all the searches of a certain type (ie tutorials) to be linked together, and a web of searches created from editing search terms and stumbling into different places. Because of this, I conceived a sort of radial network that both would be legible as individual branches, but also visually pleasing and abstract. A key part of this for me was getting a solid visual design, because page layout, font choice, and graphic design is a struggle for me. Originally, I wanted to give each node physics so that the user could move them around and scale them up, and when they did that, be able to see each individual search query, but this was cut due to time constraints, and the physics idea being unnecessary. I also wanted to blur things if the search did not find a solution, showing the frustration and confusion that can come from that, but this was also cut for time and simplicity reasons. Each box represents a search made, and the branching boxes off it are subsequent edits to the search to narrow down what I was looking for, then the color is blue or orange depending on whether or not my search led to a solution. I think the viewer is able to pick up on each box representing a search just by looking at the title and the branches for each category, the name of which appears on screen when the user hovers their mouse over the object, and a key is added in the corner for the color coding, because I do not think that makes itself obvious without being told.

I used p5.js to create my project because that kind of interactivity and manipulation I originally planned would really only be possible in p5, but even still the basic interactivity of hovering the mouse over the object, and the slow rotation, is something a still image could not achieve to the customization I would like. The main tutorial I followed is linked in the comments of the code, and it basically describes how to code radial designs and objects in a circle. In the tutorial’s case, it is coding a book cover with numbers in a circle, but I adapted that code in my Cluster class to have it be the central framework of how I generated my radial designs. I also used a quick tutorial from a random p5 user that does mouse hover detection using dist(), which I copied and manipulated a bit to get detection on each node to display its name.