Visualizations for Navigation : Experiments on my blog

This is a meta post describing two features on this blog that I don’t think I’ve documented before. Apologies for the navel-gazing, I hope there’s enough useful information here to make it worth reading

Most folks read my blog through the RSS feed, but those who peruse the web version get to see many different forms of navigational aids to help the user around the website. Since the blog runs on Drupal , I get to deploy all sorts of fun stuff. One example is the Similar Entries module, that uses MySQL’s FULLTEXT similarity to show possibly related posts1. This allows you to jump around on the website reading posts similar to each other, which is especially useful for readers who come in from a search engine result page. For example, they may come in looking for Magic Bus for the iPhone , but given that they’re probable iPhone users, they may be interested in the amusing DIY iPhone Speakers post.

The Timeline Footer

However, given that this blog has amassed about a thousand posts over seven years now, it becomes hard to expose an “overview” of that much information to the reader in a concise manner. Serendipitous browsing can only go so far. Since this is a personal blog, it is interesting to appreciate the chronological aspect of posts. Many blogs have a “calendar archive” to do this, but somehow I find them unappealing; they occupy too much screen space for the amount of information they deliver. My answer to this is a chronological histogram, which shows the frequency of posts over time:

Each bar represents the number of blog posts I posted that month, starting from August 2002 until now2. Moving your mouse over each bar tells you which month it is. This visualization presents many interesting bits of information. On a personal note, it clearly represents many stages of my life. June of 2005 was a great month for my blog — it had the highest number of posts, possibly related to the fact that I had just moved to Bangalore, a city with and active Blogging community. There are noticeable dips that reflect extended periods of travel and bigger projects.

In the background, this is all done by a simple SELECT COUNT(*) FROM nodes GROUP BY month type query. Some smoothing is applied to the counts due to the high variance, for my usage, Height = Log base 4 (frequency) gave me pretty good results. This goes into a PHP block, which is then displayed at the footer of every blog page. The Drupal PHP snippets section is a great place to start to do things like this. Note that the chart is pure HTML / CSS; there is no Javascript involved3.

The Dot Header

Many of my posts are manually categorized using Drupal’s excellent taxonomy system. A traditional solution to this is to create sections, so that the user can easily browse through all my Poems or my nerdy posts. The problem is that this blog contains notes and links to things that I think are “interesting”, a classification that has constantly evolved as my interests have changed over the past decade. Not only is it hard for me to box myself into a fixed set of categories, maintaining the evolution of these categories across 7+ years is not something I want to deal with every day.

This is where tags and automatic term extraction come in. As you can see in the top footer of the blog mainpage , each dot is a topic, automatically extracted from all posts on the website. I list the top 60 topics in alphabetical order, where each topic is also a valid taxonomy term. The aesthetics are inspired by the RaphaelJS dots demo, but just like the previous visualization, it is done using pure CSS + HTML. The size and color of the dot is based on the number of items that contain that term. Hovering over each dot gives you the label and count for that dot, clicking them takes you to an index of posts with that term. This gives me a concise and maintainable way to tell the user what kinds of things I write about. It also addresses a problem that a lot of my readers have — they either care only about the tech-related posts (click on the biggest purple dot!), or only about the non-tech posts (look for the “poetry” dot in the last row!).

This visualization works by first automatically extracting terms from each post. This is done using the OpenCalais module (I used to previously use Yahoo’s Term Extractor, but switched since it seems Yahoo!‘s extractor is scheduled to be decommissioned soon). The visualization is updated constantly using a cached GROUP BY block similar to the previous visualization, this time grouped on the taxnomy term. This lets me add new posts as often as I like, tags are automatically generated and are reflected in the visualization without me having to do anything.

So that’s it, two simple graphical ways to represent content. I know that the two visualizations aren’t the best thing since sliced bread and probably wont solve World Peace, but it’s an attempt to encourage discoverability of content on the site. Comments are welcome!


1 I actually created that module (and the CAPTCHA module) over four years ago; they’ve been maintained and overhauled by other good folks since.

2 Arnab’s World is older than that (possibly 1997 — hence the childish name!), but that’s the oldest blog post I could recover.

3 I have nothing against Javascript, it’s just that CSS tends to be easier to manage and usually more responsive. Also, the HTML generated is probably not valid and is SUPER inefficient + ugly. Hopefully I will have time to clean this up sometime in the future.

Getting middle-click to work for tab browsing in Mac OS X

If you’re a recent convert to Mac OS X (Tiger / Leopard / Snow Leopard / etc) or someone who uses multiple operating systems at the same time, the differences in mouse and keyword shortcuts get confusing, even irritating sometimes. One of the most irritating ones for me is the difference in what happens when you middle-click on the mouse.

In Windows / Linux, middle clicking in browsers is used to open and close tabs. In OS X, this doesn’t work because middle click is used to trigger the Dashboard. Every time I would want to open or close a tab, the dashboard would show up! To disable this, all you have to do is go to System Preferences > Exposé & Spaces and set the mouse shortcut to “-”.

For the newbies, here’s a screenshot guide. First select “System Preferences”:

Then click on the “Exposé & Spaces” button:

Set the “Dashboard” mouse shortcut to “—” :

So that it looks like this:

And that’s it! You will now be able to middle click to open and close tabs in Mozilla Firefox and Google Chrome. For Safari, you can open tabs, but closing tabs don’t work.

And there you have it, middle click tabs on Mac OS X!


He sat there staring at a blank terminal screen. He tried to remember exactly what it was that he was going to do next.

“Wow, this Twitter and Facebook habit has totally eliminated my ability to concentrate,” he thought.

Instinctively looking at the clock, he was alarmed at what time it was.

“2:31am… Wow, It’s tomorrow now… November 28th. Hmm.”

He smiled at the embarrassing memories. He remembered looking at the lone curled lock of hair that used to hang from the side of her forehead; the ill-fitting skirt; the smile. He remembered having conversations with her and getting distracted by the cuteness of her ever so slightly snubbed nose. He remembered being the new boy.

1997 was a confusing year. A new city, a new school, a new set of friends. The itinerant lifestyle had made it easier to compartmentalize relationships with people. It wasn’t something he preferred. Someone once had quipped that children of IAS officers were successful in life because of their ability to make friends quickly, and he had accepted that as a commiseration.

“A quick log in into the social networks I guess…”.

It had become a habit — any empty moment was occupied by “socializing” with a website. At least he had an excuse this time.

“Dear Julie, wish you a very Happy Birthday! Hope “ he wrote.


“Dear Julie, wish you a very Happy Birthday!”

It was 4 years since he’d broken up with her. It was painful but amicable; and they’d both moved on since. They had been great friends once, and they stayed friends since. The breakup left him in a strange place where he wasn’t quite sure exactly how much affection is too much. Especially on a Facebook wall. Better safe than sorry, he guessed.

He met Julie at a party in the first year of college. Common t-shirt colors led to a conversation about what else was in common. Not a lot, just states where they grew up, Zodiac signs and an uncanny interest in Lucky Ali. He liked her from the first time he met her, but he remembered her because of the irony in her birthdate. It was exactly the same as Divya’s.

“…Sharma. Divya Sharma. Roll Number 32” he remembered, revisiting a seldom-visited corner of his memories. Those memories were forgotten for good reason. Unlike college, which was a blast, he didn’t quite liked it when he joined Crescent Public.

The new high school was an absurdity. He had never met a bunch of more cacophonous kids before. Maybe this is a culture thing, but he’d much rather go back to his well-behaved alma-mater back in Bokaro. And somehow it seemed she knew exactly what he was thinking.

“You’ll get used to it. We’re not all that bad.”

“Well, I…”

“I’m Divya, by the way.”

He quickly found out that she was right. It was loud, but most of the kids were alright. More importantly, he had his first interaction with someone at school, and it was Divya. Amidst all the newness, he desperately needed some sense of familiarity, some sense of closeness. And when he found none, Divya became an easy substitute, even if she was that girl who sat in front of him and sometimes said Hi during break, even if he couldn’t come up with a single word to respond with. Weeks go by quickly when you have a pile of unfamiliar homework and a cute little puppy crush. And then one day Dad walks into the study room.

“Son, we have some good news. Mom mentioned how you were having trouble fitting in at your current school. We talked to the folks at this other school we think you’ll really like. I know it’s 3 weeks into the school year, but they’re willing to let you join.”

Lather Rinse Repeat. New uniform, new school bus, new school anthem that he would have to mumble through pretending to know the words.

The new school turned out to be yet another experience. It was still different from the Jesuit education imparted to him over the last 10 years and 4 schools, but he quickly found himself making a connection with the place. New interests were kindled, new friends were made, life went on.

And yet, the ponderous doodle on his notebook still said “Divya”. With a dot repeatedly penciled in so many times that it made a hole into the next page. It had been 3 months. He had new friends now! November 28th came by, he had astronomy camp at school that night. While everyone laid there on the school ground looking at the stars, he lay there thinking about parallel universes.

“#[Share]#” “Your wall message has been posted.”

“Hmm. I wonder where she is now….” he murmured as he typed in “Divya Sharma” into the search box. “There’s probably a million of them, hope I don’t have to wade through this for hours.”

Five minutes later, he was staring at the profile picture of the Divya Sharma he knew, with the same nose and the very same dangling lock of hair. In her wedding dress, with her new husband.

He smiled and stared at the browser window for a while. He clicked the “Request as friend” button, and began writing an introductory message. For some reason, the words after “Hey! Is this the Divya Sharma from Crescent Public School? Oh, btw, Happy Birthday!”

“Hey! Is this the Divya Sharma from Crescent Public School?”


He smiled again, canceled the request and closed the browser window.

Some memories were best left untouched.

| |

Chasing Money

Philip Greenspun’s article on money has an interesting opening parable:

“There are three ways to make money. You can inherit it. You can marry it. You can steal it.”
— conventional wisdom in Italy

A young man asked an old rich man how he made his money. The old guy fingered his worsted wool vest and said, “Well, son, it was 1932. The depth of the Great Depression. I was down to my last nickel. I invested that nickel in an apple. I spent the entire day polishing the apple and, at the end of the day, I sold the apple for ten cents. The next morning, I invested those ten cents in two apples. I spent the entire day polishing them and sold them at 5 pm for 20 cents. I continued this system for a month, by the end of which I’d accumulated a fortune of $1.37. Then my wife’s father died and left us two million dollars.”

| |

new ones

From veedot, via the amazing loveyourchaos .


Jon Stewart vs The Archivists

Oh, the SAA is going to love this! The Daily Show featured the Grateful Dead Archivist position that was noticed by BoingBoing last Monday. Some choice quotes from the episode about the job:

“UC Santa Cruz is looking for a Grateful Dead Archivist. They’re looking for someone who loves the Grateful Dead, and yet somehow has exceptional organizational skills. So basically what they’re saying… is that they need a miracle”

And then it gets better (or worse, depending on whether you have a Masters in Archives.) Here’s what Jon Stewart has to say about Archivists:

“By the way, a masters degree in Archives Management? What does that mean? “Oh I can archive things alphabetically or numerically”. What?! Alphanumerically? Slow down, I don’t have a doctorate! There you have it, 4 years of undergrad, 2 years of graduate school and now you can spend your days picking blotter acid coming out of Phil Lesh’s underwear from the Blues for Allah tour.”

(video clip of the comment:)

| |

Barack Obama Nobel Prize Sound Bites

From the Wikipedia :

On October 9, 2009, U.S. President Barack Obama was awarded the Nobel Peace Prize less than one year after his taking office (in fact, the nominations closed on February 1, about 11 days after Obama took office). While the committee praised his ambitious foreign policy agenda, it acknowledged that he had not yet actually achieved many of the goals that he had set out to accomplish. Former Polish President Lech Wałęsa, a 1983 Nobel Peace laureate, commented: “So soon? Too early. He has no contribution so far. He is still at an early stage. He is only beginning to act.”

This is pretty amazing news. My Facebook, News and IM streams are flooded with one-liners. I though I’d collect them all:

  • “I too would like a Nobel Peace Prize for the thesis I am about to write in the future.” — me
  • “it’s a pretty swell booby prize for losing out on the Olympics” – n.d.
  • “Surely preventing Sarah Palin from taking over the free world deserves a prize… even if it is a Nobel?” — v.b.
  • ““NASA bombs moon”; “Obama wins Nobel Prize” — is today Onion News Day?” — me
  • “Barack Obama linked to terrorist Yasser Arafat” — fark via a.a.
  • “The Nobel? Really? I mean, cool…but it seems like we have our cart on the wrong side of the horse. Not that it isn’t a very nice cart.” — c.m.
  • “…thinks they might as well have given him the Nobel Prize for Literature, Chemistry (we’ve all seen the shirtless photos), Physics and Economics as well. Oh and made him a Knight Commander of the Order of the Bath” — r.d.
  • “Nobel Committee Rewards Obama For Not Being Bush” — f.n.
  • “I just want to point out that the Nobel Committee made its decision BEFORE Miley Cyrus quit Twitter.” — j.h.
  • “Obama will win a second Nobel next year if he can restrain himself from reacting to the snark generated by this one.” — m.w.
  • “Pretty sure Obama will just trade in his Nobel for a Google Wave invite.” — t.b.
  • “The news of Obama’s Nobel Peace Prize spreads. Across the miles I can almost HEAR my dad’s eyes rolling.” — p.g.
  • “Obama wins Nobel Peace Prize? About time Rakhi Sawant wins an Oscar, then.” — s
  • “If you don’t think Obama deserves that Nobel, then you’ve never seen Sasha and Malia fight.” — a.e.
  • “Apparently Arizona State has a higher standard than the Nobel Committee. Good thing I never tried to apply there.” — r.m.
  • Business Insider has some more.

Larry Ellison on Cloud Computing

Oracle Man Larry Ellison gives his two cents about the new Cloud Computing hype:

“Do you think they run on Water vapor? It’s Databases, and Operating Systems, and Memory, and Microprocessors and the Internet! What are you talking about!”

Also see: the 60 Minutes episode where he pitches the Network Computer.

Tony Rosenthal, 1914 -- 2009

Michigan Today has a slideshow tribute to Tony Rosenthal, abstract artist and sculptor, who passed away this July. A Michigan alum, I know of him primarily from his Rosenthal Cubes, a pair of identical 15-foot cubes called Endover and Alamo. Endover is located near on Central Campus in Ann Arbor, while Alamo is located at Astor place in Manhattan, New York.

I think the difference between the two is that the New York cube has a platform and is a little harder to spin (yes, I’ve spun both!). I still find it amazing that the 41-year old sculptures are fully functional despite being exposed to the elements for so long.

A Quick Fix for Yahoo branding on Flickr

Techcrunch continued their usual Yahoo-bashing with this story today:

It appears that a few days ago there was a slight change to Flickr’s logo: an addition of a small Yahoo logo to the right side so it reads “Flickr from Yahoo.” In response, many Flickr users have taken to the photo-sharing site’s forums to express their horror at the Yahoo’s new branding of Flickr.

There is definitely some truth to the community backlash, but what I see as more aggravating is a great missed branding opportunity for Yahoo!.

Flickr and Delicious have both been adamant opponents to Yahoo! branding. Even though Yahoo! owns it, the Delicious frontpage doesn’t contain a single mention of Yahoo. Both sites’ communities are predominantly “indie” brand lovers; and don’t want “the man” to infringe their beloved service (even if the man is running it).

What’s crazy is that Yahoo recently launched a $100 million campaign called “Y!ou and Yahoo!”. What’s also interesting is that Flickr actually had a branding that said “Flickr loves you” (in place of Flickr BETA), which reflected Flickr’s personality and branding. People got used to it, and some even thought it was cute.

The last thing you want to do is force a new logo on to the community in an ungraceful manner. Here’s a convenient solution: to morph the “loves you” logo into the “Y!ou and Yahoo!” campaign and do a “flickr loves Y!ou” logo, killing two birds with one stone. The community sees a subtle evolution of the existing logo, and the “Y!ou” campaign is placed on a huge community”.

| |

August 2002 : 9 posts September 2002 : 16 posts October 2002 : 7 posts November 2002 : 21 posts December 2002 : 25 posts January 2003 : 8 posts February 2003 : 11 posts March 2003 : 7 posts April 2003 : 21 posts May 2003 : 14 posts June 2003 : 15 posts July 2003 : 4 posts August 2003 : 16 posts September 2003 : 25 posts October 2003 : 15 posts November 2003 : 24 posts December 2003 : 17 posts January 2004 : 6 posts February 2004 : 8 posts March 2004 : 6 posts April 2004 : 5 posts May 2004 : 29 posts June 2004 : 3 posts July 2004 : 17 posts August 2004 : 19 posts September 2004 : 3 posts October 2004 : 4 posts December 2004 : 1 posts February 2005 : 15 posts March 2005 : 18 posts April 2005 : 8 posts May 2005 : 27 posts June 2005 : 73 posts July 2005 : 45 posts August 2005 : 13 posts September 2005 : 3 posts October 2005 : 9 posts November 2005 : 20 posts December 2005 : 6 posts January 2006 : 25 posts February 2006 : 24 posts March 2006 : 37 posts April 2006 : 35 posts May 2006 : 7 posts June 2006 : 22 posts July 2006 : 20 posts August 2006 : 27 posts September 2006 : 15 posts October 2006 : 6 posts November 2006 : 19 posts December 2006 : 4 posts January 2007 : 4 posts February 2007 : 1 posts March 2007 : 3 posts May 2007 : 5 posts June 2007 : 2 posts July 2007 : 1 posts August 2007 : 13 posts September 2007 : 2 posts October 2007 : 21 posts November 2007 : 7 posts December 2007 : 9 posts January 2008 : 4 posts February 2008 : 14 posts March 2008 : 14 posts April 2008 : 11 posts May 2008 : 12 posts June 2008 : 12 posts July 2008 : 5 posts August 2008 : 10 posts September 2008 : 11 posts October 2008 : 10 posts November 2008 : 8 posts December 2008 : 4 posts January 2009 : 6 posts February 2009 : 13 posts March 2009 : 7 posts April 2009 : 7 posts May 2009 : 2 posts June 2009 : 3 posts July 2009 : 4 posts August 2009 : 4 posts September 2009 : 6 posts October 2009 : 4 posts November 2009 : 7 posts December 2009 : 10 posts January 2010 : 3 posts February 2010 : 2 posts April 2010 : 5 posts May 2010 : 1 posts July 2010 : 4 posts August 2010 : 3 posts September 2010 : 4 posts October 2010 : 1 posts November 2010 : 2 posts December 2010 : 3 posts June 2011 : 1 posts August 2011 : 1 posts November 2011 : 1 posts December 2011 : 1 posts February 2012 : 1 posts May 2012 : 2 posts December 2012 : 1 posts June 2013 : 1 posts August 2013 : 1 posts October 2013 : 2 posts September 2014 : 1 posts November 2014 : 1 posts November 2015 : 2 posts January 2016 : 1 posts