Wednesday, October 9, 2013

Graphical Web Page Representation

Today I stumbled onto this website: It runs an applet (so you must have Java installed) that analyzes the html code of any website you submit (must start with http://) and creates a representative graphical output. The result is pretty neat. Below I'll show you some of the maps I've created using this website.

Before I show you the maps, here is what the different dots mean, according to color:

blue: for links (the <a> tag)
red: for tables (<table>, <tr>, and <td> tags)
green: for the <div> tag
violet: for images (the <img> tag)
yellow: for forms (<form>, <input>, <textarea>, <select>, and <option> tags)
orange: for linebreaks and blockquotes (<br>, <p>, and <blockquote> tags)
black: the <html> tag, the root node
gray: all other tags

Okay. Now for the maps. First up is the home page of my blog before I posted this today:

And now my most recent post [1]:

The Star Wars homepage [2]:

The website for the Geek Test (which you should take) [3]:

And last, but not necessarily least, the Pedestrian 6.0 [4]:

Pretty cool, huh? If you do it yourself you can actually watch an animation of the graph being made.[5]


[1] See Unexpected Delivery II.

[2] See

[3] See

[4] See

[5] You can see more examples at this Flickr feed.

No comments:

Post a Comment