new icn messageflickr-free-ic3d pan white
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:

www.trendmapper.com/wp/wordlist-her-eller/

"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)."

www.baekdal.com/web2dna/

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

    

The few valid pages are mostly clustered around news.google.com

 

Created with

Peter's Validation Grapher

Descending without limit, but not following external links.

 

Created with

Peter's Validation Grapher

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.

 

After.

 

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.

 

Before.

 

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

La cosa più bella è vedere l'evoluzione mentre viene generata

Provate anche voi qui

my unfinished portfolio index as graph. funky

 

via: www.aharef.info/static/htmlgraph/

via: drawn.ca

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.

 

see: www.aharef.info/static/htmlgraph/

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

  

Google is the clear winner.

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.

This is a graph of the HTML of my blog generated via Webpages as Graphs.

blogged. Due to flickr's policy please see my profile/blog for the link.

my last commute with dear meg - and a very appropriate

tune listen julie london's cry me a river...but the bob sinclair number should get played

'hold-on'

michelle beatles

it's all over now baby blue richie havens

more info about web sites as graphs ..a RIP and a picture mosaic

 

blogged

Check out openconcept.ca to browse what this looks like in "real life". See example from 2008.

My English blog's ( blog.salehoffline.com ) graph, made with: www.aharef.info/static/htmlgraph

 

I run my English blog with help of wordpress.

Sorry, I couldn't help myself. I'm an addict.

 

Original is here.

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

 

1 3 4 5 6 7 ••• 42 43