{"id":423,"date":"2006-05-30T12:31:24","date_gmt":"2006-05-30T17:31:24","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=423"},"modified":"2006-05-31T08:01:35","modified_gmt":"2006-05-31T13:01:35","slug":"graph-of-twenty-sided","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=423","title":{"rendered":"Graph of Twenty-Sided"},"content":{"rendered":"<p>Only because <a href=\"http:\/\/tancos2.pmachinehosting.com\/animelog_comments.php?id=2565_0_2_0_C\">everyone<\/a> <a href=\"http:\/\/ai.mu.nu\/archives\/2006\/05\/work_in_progres.php\">else<\/a> is <a href=\"http:\/\/www.aharef.info\/static\/htmlgraph\/\">doing it<\/a>.<\/p>\n<p><center><img decoding=\"async\" src=\"images\/websitesasgraphs.gif\"\/><\/center><\/p>\n<p>This is a visualization of this site.  (The only difference is that when this graph was built, the post you are reading wasn&#8217;t there.)  Each dot represents some aspect of the page.  Let&#8217;s see if we can decode what we&#8217;re looking at.  According to the page that generated this, the colors are:<\/p>\n<table border=1 cellspacing=0 cellpadding=2>\n<tr>\n<th>Legend<\/th>\n<\/tr>\n<tr>\n<td><span style=\"color: #000099; font-weight: bold\">blue<\/span>: for links (the A tag)<br \/><span style=\"color: #ff0000; font-weight: bold\">red<\/span>: for tables (TABLE, TR and TD tags)<br \/><span style=\"color: #009900; font-weight: bold\">green<\/span>: for the DIV tag<br \/><span style=\"color: #cc00ff; font-weight: bold\">violet<\/span>: for images (the IMG tag)<br \/><span style=\"color: #ffff33; font-weight: bold\">yellow<\/span>: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)<br \/><span style=\"color: #ff9933; font-weight: bold\">orange<\/span>: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)<br \/><span style=\"color: #000000; font-weight: bold\">black<\/span>: the HTML tag, the root node<br \/><span style=\"color: #999999; font-weight: bold\">gray<\/span>: all other tags\n<\/td>\n<\/tr>\n<\/table>\n<p>So let&#8217;s try to map out these dots and see what they mean.<\/p>\n<p>It&#8217;s pretty easy to tell that the top area is the sidebar.  The sidebar is just a bullet list of links.  This means they should look like a bunch of grey dots terminating with blue dots, which is exatcly what we see at the top. Sadly, we can&#8217;t tell the categories section from the archives, since both have exactly nine nodes right now. We can see the six-link node for Anime Sites.  We see the three-link node for Geek Sites. The Read Me and Meta sections are also ambiguous, since both should have four nodes.  The Search section is easy to spot.  The input box is a form, and so the yellow dots clearly represent the Search area.  The lone purple dot in this region is the dice roller.<\/p>\n<p><center><img decoding=\"async\" src=\"images\/wsag_sidebar.gif\"\/><\/center><\/p>\n<p>At the top of every post is a little table I use to keep things lined up.  So this should look like a red dot (the table) which leads to another red dot (the row) which forks off to two other red dots (the two cells of our table, the one with the icon and the one with the post title).  One fork should lead to a blue dot (a link to the post category) and should then terminate at a purple dot (the category image).  The other red dot should lead to three links &#8211; The post title permalink, the category link, and my name, which links to the &#8220;about me&#8221; page.  <\/p>\n<p>So, these little branches that start with a red dot represent post headers.  I have the blog set to show at most ten posts, so we should see ten of these.  Sure enough:<\/p>\n<p><center><img decoding=\"async\" src=\"images\/wsag_headers.gif\"\/><\/center><\/p>\n<p>The black dot is the root of everything else, so the grey cluster next to it must be the HTML headers, since they don&#8217;t lead anywhere.   We can also spot the stuff at the top of the website.  The rotating dice image, the title of the page, and the random quote all appear within a table.  It&#8217;s easy to spot the red dots that lead to a terminating purple dot. <\/p>\n<p>The only unresolved thing is that cluster of 16 links at the bottom.  What the heck is that?<\/p>\n<p><center><img decoding=\"async\" src=\"images\/wsag_other.gif\"\/><\/center><\/p>\n<p>The rest of the dots are individual posts, which aren&#8217;t going to follow any pattern, so I&#8217;m not going to try and unravel them.<\/p>\n<p>Still this is a pretty cool way to look at the data.  <\/p>\n<p>One last note is that lots of people are taking these pictures and uploading them to Flickr.  <a href=\"http:\/\/www.flickr.com\/photos\/tags\/websitesasgraphs\/\">Have a look a the gallery<\/a>.<\/p>\n<p>LATER: I get it.  That cluster of 16 links is <a href=\"?p=413\">my post blathering about the Lexicon Plugin<\/a>, which was knocked off the front page by this one.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Only because everyone else is doing it. This is a visualization of this site. (The only difference is that when this graph was built, the post you are reading wasn&#8217;t there.) Each dot represents some aspect of the page. Let&#8217;s see if we can decode what we&#8217;re looking at. According to the page that generated [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-423","post","type-post","status-publish","format-standard","hentry","category-pictures"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=423"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/423\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}