T w e n t y S i d e d

Fledgling %Otaku has several more website graphs like the one I put up a couple of days ago. Then there is an interesting exchange in the comments of that post about the appearances of different sites when viewed as graphs. Some sites are just a few tightly packed nodes. Some are sparse and sprawling. Some, like this site, are a bunch of different patterns all hanging together.

So I started thinking about what other pages I might feed into this thing and what they would look like.

First, if you remember from a few days ago, this is the site you are reading right now:

Now let’s look at Google:

Talk about minimalisim! Just under 60 total tags. This explains why the site loads so quickly. There are two purple tags – two images. One would have to be the Google logo itself, but I wonder what the other one is?

Now let’s look at the other end of the spectrum:

This is the printer-friendly version of my book, which has the entire novel on one page. (If you’re curious, you can see it here. It may take a bit to load for some of you, as it is well over 400k of HTML.) This represents about 330 pages of text. The orange dots are paragraphs, and the grey tendrils are areas in bold or italics. I’m rather surprised at the number of tables (red dots) spread around. Now compare that to this:

This is In the Beginning was the Command Line by Neal Stephenson, which is a very large essay (highly recommended, by the way) with no formatting or images. So now we can see that large blocks of prose tend to look like huge orange dandelions.

This is fun. Go on. Try it for yourself.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.

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’t there.) Each dot represents some aspect of the page. Let’s see if we can decode what we’re looking at. According to the page that generated this, the colors are:

So let’s try to map out these dots and see what they mean.

It’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’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.

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 – The post title permalink, the category link, and my name, which links to the “about me” page.

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:

The black dot is the root of everything else, so the grey cluster next to it must be the HTML headers, since they don’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’s easy to spot the red dots that lead to a terminating purple dot.

The only unresolved thing is that cluster of 16 links at the bottom. What the heck is that?

The rest of the dots are individual posts, which aren’t going to follow any pattern, so I’m not going to try and unravel them.

Still this is a pretty cool way to look at the data.

One last note is that lots of people are taking these pictures and uploading them to Flickr. Have a look a the gallery.

LATER: I get it. That cluster of 16 links is my post blathering about the Lexicon Plugin, which was knocked off the front page by this one.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.