HTML DOM Visualization
May 26, 2006 3:02 PM   Subscribe

 
Man, this thing gets boggy pretty fast. Interesting looking graphs, though. For example, here's, uh, example.com. Neat find.
posted by boo_radley at 3:10 PM on May 26, 2006


Now THAT is why I still read metafilter. Very cool. Nice FPP.
posted by mcstayinskool at 3:12 PM on May 26, 2006


Yes, very cool. Thanks.
posted by interrobang at 3:14 PM on May 26, 2006


beautiful.
posted by piratebowling at 3:17 PM on May 26, 2006


What a great idea. The implementation has some performance issues (the metafilter one is just dragging on and on, getting slower and slower) but that certainly doesn't detract from the sheer coolness of being able to give a visual fingerprint of a whole site at once.
posted by Rhomboid at 3:22 PM on May 26, 2006


Yay!
posted by beerbajay at 3:24 PM on May 26, 2006


it freaks out and does something different every time when supplied with my domain.
posted by wzcx at 3:29 PM on May 26, 2006


it freaks out and does something different every time when supplied with my domain.

whoa dude, I think you broke it.
posted by puke & cry at 3:31 PM on May 26, 2006 [1 favorite]


ah, you have some broken body tags in there.
posted by puke & cry at 3:33 PM on May 26, 2006 [1 favorite]


Excellent (thanks, puke & cry)! Actually, it produces graphs of single web pages rather than an entire site - only one html tag involved - but I think it's very useful for exactly that purpose and that level of granularity.
posted by carter at 3:44 PM on May 26, 2006


hm. more like web *page* as graph.

here's web site as 3-D interacitve graph (from this recent fpp).
posted by 3.2.3 at 3:46 PM on May 26, 2006


load:htmlgraph can't be instantiated
posted by mr_crash_davis at 3:51 PM on May 26, 2006


I agree, it looks nicey-nicey and Processing (previously discussed here) is a great tool which people have used to amazing effect, but is there also any actual usefulness for this? I don't want to sound snarky here, I'd just like to know if and how this (or some variety of this) might be useful to web designers, HTML coders or whoever.
posted by Herr Fahrstuhl at 3:59 PM on May 26, 2006


is there also any actual usefulness for this?

Immediately, I think about representing page bloat. How much of msnbc.com, for instance, actually gets read? How much does it cost to generate this content? How long does this stuff take to load? And so on.

It would also be nice to figure out if, when you had hundreds of graphs, you could cluster them and see if the clusters corresponded with particular site functions.
posted by carter at 4:05 PM on May 26, 2006


is there also any actual usefulness for this?

It's pretty. That's about it.
posted by puke & cry at 4:12 PM on May 26, 2006 [1 favorite]


I'd like to see one that's not a tree.
posted by Wolfdog at 4:14 PM on May 26, 2006


Very cool! Cheers.
posted by afx237vi at 4:19 PM on May 26, 2006


Well, it's a beautiful visualization of data, and that's always useful in illustrating concepts - that web sites are organic and not static by nature. If there was a way to make it a bit more functional (i.e. when you mouse over a particular dot it names it) it would completely blow my mind. As for usefulness, if it reveals too much kind of content it can remind you how important it is to balance a web site with a variety of content, if possible. Great FPP!
posted by rmm at 4:58 PM on May 26, 2006


I wish I was on acid.
posted by Pock Suppet at 5:39 PM on May 26, 2006


rmm: Well, it's a beautiful visualization of data, and that's always useful in illustrating concepts

Ehh, I think this is okay but not great. The author's discussion of other sites is a real gem, but the visualization itself is poorly designed which makes it hard to do your own interpretation. The real problem here is that it's visualizing something that very few of us ever look at, and so it's critical that the visualization describe it more completely and provide for exploration.

I'm sort of opinionated on these kinds of things, but here's what I would change to make it more useful:
  • Legend - This is the viz's greatest sin. What the tags are is really the story here, and having to page back to the original blog post is incredibly aggravating.
  • Interactivity - This would compensate for the lack of a legend, too. For links, it could show where the link goes to. For images, it could load the image. For spans or divs around text, it could show the actual content or a snippet of the content.
  • Pre-rendering - The just-in-time rendering and layout is sort of pretty, but it mis-represents what's going on here. This isn't a time-based system. If you want to show the ordering on the page, do it using size or color or x-position or something that's not animation. It's also a major slow-down because it's having to do iterative graph layout constantly. Much better to hide that process and just throw up a loading screen until the graph is ready.
posted by heresiarch at 7:29 PM on May 26, 2006


Interesting, but slow and not as useful as webtracer, which 3.2.3 helpfully linked earlier. Web visualization should be a hot new area, as people get tired of seeing trees and IP addresses.
posted by BlackLeotardFront at 8:50 PM on May 26, 2006


Thank you. Very neat little script. I must say I've not thought about viewing my site that way. Turns out I have a very colourful and symetric pattern... Pretty ....
posted by pezdacanuck at 6:02 AM on May 27, 2006


Wolfdog, given that it actually only does one page, I don't think it's possible to have a cycle. Most of the coloured dots aren't links, either, recall.
posted by louigi at 10:40 AM on May 27, 2006


I don't think it's possible to have a cycle.
To get past the screening door I had to have tea and no tea simultaneously. I don't think a couple of tags with a mutual containment relation is too much to ask for.
posted by Wolfdog at 11:05 AM on May 27, 2006


« Older Calvin and Hobbes   |   For the low-roller in all of us. Newer »


This thread has been archived and is closed to new comments