MARCELGEMANDER

cuprings

A cupring visualization represents the html structure of a website. Depending on the arrangement of the various elements, a characteristic cupring structure is created.

A website consists of different html elements. These html elements give the website the desired appearance. A cupring visualization is based on the arrangement of the html elements in the html source code.


transformation of the html source code into a cupring visualization

Each html element is represented by an arc segment. The indentations reflect the tree structure of the html source code. Structural html elements (html, div, span etc.) are represented as a grey arc segment. Content-bearing html elements (p, img, ul etc.) are displayed as a black arc segment.

cuprings::google


The cupring visualizations show a random selection from over 200 google websites worldwide. Despite the same appearance, there are differences in the structure. With each website reload a new random selection of cupring visualizations is displayed.


am::armenien


bt::bhutan


co::indien


com::saint lucia


gy::guyana


kg::kirgisistan


nr::nauru


se::schweden


sn::senegal

The lower cuprings visualize the website selection of The Moz Top 500. Since this selection contains different websites, the size and structure of the cupring visualizations varies greatly. The cuprings shown here also show a random selection of 500 websites.

cuprings::moz


cmu.edu


drupal.org


fb.com


huffingtonpost.com


istockphoto.com


mailchimp.com


nps.gov


tandfonline.com


wunderground.com