Inspired by Marcel Salathé's processing applet, here's four svg/javascript sketches that visualize the HTML DOM in various ways. Each sketch walks the HTML document loaded in the browser and draws the structure in the patch window using the svg external's api.
Randomized, force-directed layout based on same traer physics example that seems to have been the basis for Marcel Salathé's work. Painfully slow and unstable (it seems to fly off the canvas almost as often as it produces a visible result), though the misfires are sometimes more interesting than the intended result. JS/SVG performance issues limit the usefulness of the script for larger sites- as more objects are added to the SVG DOM, the script slows until it grinds to a halt. Screenshot above generated from www.google.com.
Completely random layout inspired by the "network" illustration in Design By Numbers. Generated from sfbay.craigslist.org.
Examples of visualizing the DOM hierarchy as nested/stacked boxes. The outer/top box is the root node- child nodes are nested/stacked. Screenshots generated from www.google.com.
Drawing the DOM from Bill Orcutt on Vimeo.
