View allAll Photos Tagged websitesasgraphs
copyright © Mim Eisenberg/mimbrava studio. All rights reserved.
This is a graphic depiction of my bluebird photo.
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)
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
Create yours here
Thanks to Sabinche/Sabine for the link.
Flickrites, unfortunately there's little chance I'll be able to visit today. I'm posting this just in case you want to play with the applet yourself. Have fun.
Today is National Grammar Day. Mind your p's and q's, now!
See my shots on flickriver:
www.flickrriver.com/photos/mimbrava/
or
See my shots on fluidr:
www.fluidr.com/photos/mimbrava
I invite you to stroll through My Galleries.
Here is a more complicated web graph
I noticed that lorenzodom does a lot of great tagging and documenting of his photos. It leads to more complexity and a more interesting photo collection
This is a snapshot of lorenzodom flickr all tags page
www.flickr.com/photos/lorenzodom/alltags/
He has several thousand tags amongst his 16982 photos as of 22 August 2006
For a comparison of complexity, see a graph of my alltags page (~ 1/4 to 1/5 as complex)
www.flickr.com/photos/brewbooks/222876313/in/set-72157594...
see www.aharef.info/static/htmlgraph/
Try a search for the tag websitesasgraphs to see some other very interesting patterns
I learned about this from r.rosenberger websitesasgraphs
www.flickr.com/photos/rrosie/sets/72157594152137978/
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)
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
flicker_photos_lorenzodom_alltags
Explore Aug 23, 2006 #189
This is a graph of the homepage of Epicurious.com, done with the Websites As Graphs app, www.aharef.info/static/htmlgraph/
From the site:
"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)
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"
This is the graph for trendmapper.com from this site:
www.aharef.info/static/htmlgraph/
To be completely accurate. It is the graph from this page:
"WEB2DNA will take your website, analyze it, crunch it to little bits and spit it out as a graphic representation of a human DNA.
The brightness of the lines is determined by the importance of the tags in terms of structure.
* H1 is brighter than H2, which is brighter than H3.
* TABLE is brighter than TR, which is brighter than TD tags.
* Images and flash elements appear as 70% white.
* New HTML tags like STRONG and EM is brighter than older ones like B and I
* UL, OL and DL is brighter than their LI, DT, DD
* DIV layout is brighter than table layout
Basically a semantically rich site will appear brighter than one with messy old-style code.
You can also determine the richness of text on a site. A site the focuses on (text) content is one where the DNA patterns is large (filling many containers), but contains a lot of empty spaces between the lines (empty space is the individual words)."
This shows the evolution of www.boingboing.net/ website over time.
The photo in the upper left corner is from the February, 2000 archive and then proceeds by 2 month steps (except the last photo in the lower right which is a 6 month step)
1. boing_boing_02_00, 2. boingboing_04_00, 3. boing_boing_06_00, 4. boingboing_08_00, 5. boingboing_10_00, 6. boing_boing_12_00, 7. boingboing_02_01, 8. boingboing_04_01, 9. boingboing_06_01, 10. boingboing_08_01, 11. boingboing_10_01, 12. boing_boing_12_01, 13. boingboing_02_02, 14. boingboing_04_02, 15. boing_boing_2002_06, 16. boingboing_12_02
Created the plots with see www.aharef.info/static/htmlgraph/
Created mosaic with fd's Flickr Toys.
Can also be viewed as a Flickr slideshow
Try a search for the tag websitesasgraphs to see some other very interesting patterns
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)
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
Explore Sep 27, 2006 #463
I´ve seen these DNA shots for the first time on alithinks.com and they intriged me so I´ve tried it for this photoblog! Nice Result :-)
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)
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
Want to try it yourself? Go to websites as graphs
My 360° blog page viewed as a graph
www.aharef.info/static/htmlgraph/
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)
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
Grey: all other tags
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)
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
Descending 3 links deep from the root directory -- for the most part the colored circles represent external links.
Created with
blog.peter1402.de/pages/validation_graphs.html
It runs a lot faster with validation turned off, obviously.
Rodcorp, being larger and more unwieldy than the molecule-shaped Mobbu.com, is mapped as a higher-order entity, like some flowers.
Before.
Yikes. This is the download page from the pressroom section of Veer site prior to a proper dose of style sheet love. Nested table madness, that's what it is. A prime example of a simple design that grew out of control.
www.veer.com/about/pressroom/downloads/
As viewed using http://www.aharef.info/static/htmlgraph/
What do the colors mean?
blue: links (a tags)
red: tables (table, tr, td tags)
green: divs
violet: images (img tags)
yellow: forms (form, input, textarea, select, option tags)
orange: block formatting (br, p, blockquote tags)
black: root (html tag)
gray: all other tags
After.
Ahhh... that's better. This is the download page from the pressroom section of Veer site after de-tabling. It's still a heavy page, but at least the structure is a bit friendlier now.
www.veer.com/about/pressroom/downloads/
As viewed using http://www.aharef.info/static/htmlgraph/
What do the colors mean?
blue: links (a tags)
red: tables (table, tr, td tags)
green: divs
violet: images (img tags)
yellow: forms (form, input, textarea, select, option tags)
orange: block formatting (br, p, blockquote tags)
black: root (html tag)
gray: all other tags
This image was generated by the websitesasgraphs java applet and is a visual repesentation of one of the phonebook.waikato.ac.nz webpages. The thing I love about this one is the way it looks kinda like the Marburg or Ebola virus with its crazy long tail.
Image from treepie.sf.net a simple software to understand what fill your HD. [[ now 1.3 work also on vista ]]
It's a "SUNBURST DIAGRAM" quite difficult to understand at start but the really usefull.
2 link from
Stephen Few about SB diagram:
www.gvu.gatech.edu/ii/sunburst/
www.iro.umontreal.ca/~sahraouh/qaoose2005/paper3.pdf
Flickrmania: make a screenshot of your hard disk drawn by TreePie, put it on flickr and tag it HDtreepie ... or if you prefere directly treepie (but i'ts also a bird :D ).
and.. You can see how treepie work on youtube
A graph created with websites as a graph.
www.aharef.info/static/htmlgraph/
Link: klick.novaforce.org/
A graph created with websites as a graph.
www.aharef.info/static/htmlgraph/
Link: novaforce.org/blog/
For some reason the app chokes halfway through validating my blog. I guess really it's the HTML's fault :)
Centered on my photos page :)
This is a map of the Flickr site, where they grey circles represent URLs that end in a slash, and the blue circles are (I think) images.
Based on Sala's Web Sites As Graphs, this is a crawler that visualizes the validation profile of the pages in a Web site. As it traverses links, it also draws a clear image of the IA (the "site map"). It's hard to think of another free tool that gives this kind of immediate, visual insight into how a site is organized. Definitely not production-ready. And, of course (its a tree graph), it doesn't show all the links between pages.
My English blog's ( blog.salehoffline.com ) graph, made with: www.aharef.info/static/htmlgraph
I run my English blog with help of wordpress.
Netzwerk-Visualisierung mit Hilfe eines Online-Tools:
www.aharef.info/static/htmlgraph/?url=http://www.nischent...
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
A graph of my new website from a Java app on www.aharef.info/static/htmlgraph/. Pretty cool, huh? For an explanation of the color codes, see www.aharef.info/2006/05/websites_as_graphs.htm.
The website is www.tranquilitytime.com.
Netzwerk-Visualisierung mit Hilfe eines Online-Tools:
www.aharef.info/static/htmlgraph/?url=http://www.bloggerp...
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)
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
See Websites as graphs. Key [ibid]:
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