Aesthetics, as talked about in the FAQ of the Aesthetics fandom wiki, started as a discussion in philosophy about beauty, but in more recent generations has become to mean a collection of items that bring out a certain mood and community. Aesthetics are now becoming increasingly tied with personal identity. I have personally adopted some of the aesthetics talked about in the wiki in my personal life and I have seen a number of online communities, especially Animal Crossing during the course of the pandemic, use these terms to describe themselves and/or their creations.
In the last few months, I came across the Aesthetics fandom wiki, a wiki that is dedicated to documenting aesthetic movements from all time periods, but focuses on aesthetics arisen from internet communities and the historical aesthetic movements which inspired them. I fell in love with this wiki instantly because it helped me explore some of the terms I have seen online and discover new aesthetics I did not know existed.
One of the big questions surrounding this wiki in all corners (and other aesthetic communities online) is “How do I find my aesthetic?” While I think it is a difficult question, as finding a personal aesthetic is different for everyone, I think a visual representation of how these aesthetics relate to each other (and differ possibly) could give great insight onto what aesthetic is right for you. I want to explore the idea of making a network graph as a means of exploring aesthetics. By starting with an aesthetic you already feel an affinity towards and exploring related nodes, you can find aesthetic that may be more honed towards your personal tastes.
1. Data Collection
For this project, I decided to use Python in PyCharm and the package BeautifulSoup to scrape the aesthetic fandom wiki as I have used a similar set up to scrape wikis in the past. I used a RealPython tutorial as a loose guide and the BeautifulSoup4 documentation for troubleshooting. Using Google Chrome‘s built-in inspect tool (right-click and press “Inspect”) to find what parts of the website’s HTML I needed to isolate, I was able to write a script to scrape the aesthetic names and related aesthetics into a CSV file with some minor manual clean-ups. For a more detailed look into how I scrapped the data, look at my GitHub repository for the entire code with comments and the resulting data.
Each aesthetic is a node. I then scrapped the list of related aesthetics from every page’s info box to get a list of edges/connections. Using the Retro-Futurism info box as an example, Retro-Futurism is a node and a connection to it would be Art Deco as it is listed as a “Related aesthetic”. These edges are directed as aesthetics are not always cross listed in each other’s “Related aesthetics”.
After completing the scraping process and making the adjacency list, I had 516 distinct aesthetics or nodes and 3716 relationships or edges between them.
I had wanted to get more attributes for each aesthetic, but the wiki is still working on becoming more consistent across all of its pages. This left very little information I could get reliably for each aesthetic. While there are index pages categorizing various aesthetics based on adjectives, historical influences, color, and prefixes/suffixes, these indexes are not mutually exclusive and not every aesthetic is categorized.
2. Graph Inspiration
While I was unable to find any other network graphs that studied aesthetics, I did find a couple of similar graphs in other realms of study.
I thought a similar field of study that could be helpful is music genre as they’re both overarching categories to organize art and artists. I found a medium article by Manasa Hariharan where she makes a network graph of music genres using the Spotify API to get tag information. The edges represent that the two genres were tagged together on the same artist.
I love this graph because it is a visual representation of how closely tied genres are and indicates possible cross influences between genres. I especially love the interactive version as it gave me an opportunity to see in more detail which genres are connected. However, I wish the node sizes varied more as I want to see which genres as more popular as a starting point to explore.
Since I scrapped a wiki to get the data, I also looked into network graphs of Wikipedia. I found WikiLinks, an app which allows users to explore Wikipedia as a network graph.
I immediately loved this graph because it uses a network graph as a means of exploring. It provides a totally different look and experience of navigating the Wikipedia we all know. I see great potential in exploring the aesthetics wiki in a similar fashion where all the thumbnails are representative of the aesthetic (such as a moodboard). With a similar implementation, people can visually see the common denominators as a means of seeing related aesthetics compared to the list view we see on the wiki currently.
3. Making the graph
To make my graphs, I used Gephi, a free and popular tool to visualize network data.
For all my graphs, I made the size of the nodes represent the degree and the colors represent the modularity class (though, I do play with the resolution affecting the number of modularity classes).
This was my first attempt. I had a hard time getting clusters of groups that seemed meaningful. I played around the resolutions a little and found that I was getting a lot of groups, so I set the resolution 1.5 to get less overall groups. I used Force Atlas 2 with no overlapping nodes option checked for better visual clarity. I then applied the expansion function because the nodes were bundled too tightly to see any of the connections.
I was disappointed with this graph because it looked messy and visually there were no thematic groups. I decided to play around with the modularity more and layouts due to the problems I was having with this graph.
After iterating through a bunch of graphs, I landed on this graph because I liked the groupings best. I lowered the resolution to 0.7 in order to get even more clusters. I applied the Fruchterman Reingold layout first based on the recommendation of Martin Grandjean and then applied Force Atlas 2 with the scaling set to 25. I filtered out nodes with degrees 15 or lower to clear out noise and finally applied the rotate function so the graph would not be so long.
While I think this graph is not perfect, I landed on this one because most of the groups were really well defined. For example, the tealish green at the bottom left of the graph represents the Academia groups of aesthetics and the orange group on the left is fantasy/forest aesthetics. The only group I had trouble picking out a theme was the pale yellow group. While I can see maybe some European influences to tie the group together, it was grouped with other aesthetics that did not make sense such as minimalism, chic modernist, etc.
5. Final Graph: Discord Feedback
After I had gotten the last graph, I was so pleased with the results I posted the graph into the aesthetics wiki discord server. While many were interested in the graph, people told me that the text was difficult to read and were surprised by some of the groupings and positioning of nodes.
I made some important changes:
- Modularity class coloring converted to a gradient: I had discovered the modularity classes were extremely volatile even when all the settings were the same. This meant that if I ran the modularity function twice, I could get different number of classes and different nodes within those groups. Some nodes in particular, like Vintage, kept changing groupings every time I ran the settings. Since these classes had no concrete interpretable meaning, I decided to keep the class colorings, but I went into photoshop to convert the node colorings into a gradient. I wanted to suggest the groupings, but also make it clear to viewers that these groupings are not concrete.
- Label Adjust function: I had originally kept the overlapping nodes because I thought it would convey the relationships more accurately. However, after getting feedback that the text was difficult to read, I decided to use the label adjust function so nodes and labels would be easier to see and read.
- Node Size: I increased the minimum node size so that some text would be easier to read.
5. Reflection
Gephi as a tool I found a little difficult to work with. Most modern software has undo and better file save systems. As a result, I found myself losing work due to small mistakes. However, I was pleased with the large number of plugins and seeing my network shape up as I learned to work with it. With time, I learned to work with Gephi’s quirks and I ended up with a result that I liked.
Limitations
In my discord feedback, someone pointed out that they were surprised Foodie was so close to Vaporwave. Upon closer inspection, Foodie is not related to Vaporwave at all, but is pulled on a variety of different aesthetics as to pull it right next to Vaporwave. I got similar statements about this for other aesthetics. Unfortunately, I believe this is just a drawback of network graphs trying to convey extremely complex relationships in a 2D space. The only way I can imagine to fix this is to make the visualization interactive so that people can examine the relationships in more detail, but that is just out of the time frame for this project.
Efforts That Did Not Make The Cut
As my inspiration for this graph implied, I had higher hopes for my visualization.
- Interactive: I wanted to make this visualization interactive. I used a tutorial for SigmaExporter to make an interactive visualization, but found that making a visualization I could share would require me to host it. I got the visualization working, but did not find any easy quick way to share and host the visualization. I decided to not continue with the route. While it is something I would like to do in the future as a side project, I think it was just out of the scope for this lab report.
- Pictures as Nodes: I wanted each node to have a picture that represented the aesthetic. I used Python and BeautifulSoup to scrape the thumbnail pictures into a CSV file using two GeeksForGeeks tutorials on how to scrape images and how to download images. I then used the Image Preview plugin on Gephi to try to show each node as picture. Unfortunately, I found that loading 500+ images into Gephi made it crash. In the future, I will have to find a better computer to run it on or try modifying the picture size so the load is less intensive on Gephi.
Future Direction
- Finish my efforts that did not make the cut. As talked about above, I tried to give each node a picture and make the visualization interactive. If I were to continue this project, I would work on those two aspects first.
- Add a temporal aspect. The aesthetics wiki has grown so much in just the short time I have been acquainted with it. I would love to come back to this project in a couple of months or maybe a year to see how the aesthetics wiki has changed over time. Even possibly make it a series once the wiki is more established as a way of visualizing new aesthetic trends popping up.
- More like WikiLinks. I would also love to make a WikiLinks version of the site. Since aesthetics is a visual topic, it only makes sense to me that a great way to explore the wiki would be in a visual manner. I would love for each node to link to its wiki page and offer extra information when hovering like the “Key motifs” section.
- Social media’s opinion on aesthetics. While the aesthetic wiki is a great way to learn about these aesthetics from a general perspective, I would love to scrape social media sites to see a first hand perspective of these aesthetic trends. Possibly using hashtags as a way to create a network graph of how people use these aesthetics in conjunction with one another out in the wild.