creative coding
Cup rings: abstract data visualizations from the HTML code of a webpage
Revealing characteristic web page structures and highlighting HTML tag patterns.
creative coding
I had an idea: what if I could capture the essence of a web page’s structure in a unique visual form? I wanted something abstract, something that would stand out. So, I turned to the HTML structure. I saw it in my mind’s eye, a circular shape. I decided to call it a cup ring. Imagine a cup ring as a unique fingerprint of a web page, revealing the hidden structure of HTML tags that give the page its identity.
Think of a web page as a puzzle, made up of pieces called HTML tags. Your web browser is like a master puzzle solver, interpreting these tags to display the web page as we see it. But when we create a cup ring, we’re not looking at the finished puzzle. Instead, we’re diving deep into the hidden structure of the puzzle pieces themselves. To bring this hidden structure to light, we assign an arc element to each HTML tag. Just like the tags in a webpage, these arc elements have their own special place in the cup ring.
Now, let’s visualize this. Picture a bunch of HTML elements scattered on the left side (image below), just like they would be on a web page. On the right side, we’ve got a structure of arc elements, arranged based on the placement and nesting of the HTML elements. This structure is just a slice of the cup ring. If we repeat this process for all the HTML elements on a web age, voilà! We’ve got a full cup ring, a beautiful circle that’s a unique representation of the web page’s structure.
I followed the procedure and made cup ring visualizations for some web pages. Each web page had a different content. So, the size and structure of the cup ring changed. It was like giving each web page its own unique fingerprint.
yelp.com
reuters.com
theguardian.co.uk
linkedin.com
weibo.com
digg.com