CC As Graph

This
is a visual amusement, courtesy of href="http://www.aharef.info/static/htmlgraph/" rel="tag">Websites
as Graphs.  The top one is Corpus Callosum.
 The bottom one is the ScienceBlogs main page.






i-70b6b3c763eb34946cb3bcd6f96b6fa6-cc-as-graph-500px.jpg



i-09014386838b55f2eb90ca6934b4467a-sb-as-graph-500px.jpg



The
key is as follows:







What do the colors mean?

  • 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)
  • style="color: rgb(255, 255, 51); font-weight: bold;">yellow:
    for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • style="color: rgb(255, 153, 51); font-weight: bold;">orange:
    for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black:
    the HTML tag, the root node
  • style="color: rgb(153, 153, 153); font-weight: bold;">gray:
    all other tags



What
is interesting is to go back and look at href="http://scienceblogs.com/pharyngula/2006/05/graphing_pharyngula.php">PZ's
early one.  I'm pretty sure the yellow dandelion in
the two above comes from the drop-down menu with all the blogs.
 PZ doesn't have one, but href="http://scienceblogs.com/grrlscientist/2006/05/web_phylogeny_of_this_blog.php">GrrlScientist
does, only a little bit later.  It was smaller then.



It would be a lot more interesting to see it in four dimensions. For
now, we'll just have to imagine it.



Tags

More like this

OK, PZ, Grrlscientist, and John have all done it. They've used a cool little applet to show their blogs as graphs. I figured I'd give it a try, too. Why not? (Click on the image to see the graph construct itself.) Basically, the applet shows the tree structure of a web page in a rather…
The "Web Phylogeny" of Living the Scientific Life (Scientist, Interrupted), 22 December 2008. Image: created by Websites as Graphics. KEY: What do these colored dots mean? 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)…
The "Phylogeny" of Scientific Life. Image: created by Websites as Graphics. KEY: What do these colored dots mean? 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…
Todays programming pathology is programs as art. Start with a really simple stack based language, add in a crazy way of encoding instructions using color, and you end up with a masterpiece of beautiful insanity. It's not too exciting from a purely computational point of view, but the programs are…