Improving the Baby Name Explorer Interface


By daniel - Posted on 05 February 2009

The new baby name visualization tool from Baby Name Brainstorm has been making the rounds in all the visualization blogs. It's a great platform for exploring a huge data set of first names. It's aesthetically pleasing, very responsive, and a pleasure to use.

That said, I noticed a couple things that could be improved.

The first change I'd like to see a draggable stage. When the user clicks the white background and drags, it should move the whole interface like in Google Maps. Sure this is a very small change but it's pretty useful, especially if the tree is going to get cut off like in the image below.

Baby Names Getting Cut Off

The second improvement I'd like to see is a layout algorithm which doesn't result in having the nodes swing about so much. If you try clicking around in the brainstorming app, you'll notice nodes cross over the edges connecting them and often reorder themselves in reverse. It creates a neat effect but it's extremely disorienting and visually confusing.

In the image below you can see the two problem children, Monica and Margo, crossing over the white node at the center. It looks like the ordering of the nodes is properly maintained but the blue node in the top left, Mauricio, is not included in the ordering.

Baby Names Shuffling Around

There is existing research on Animated Exploration of Radial Trees where Yee and company have solved this problem. I was experimenting with a similar interface a few weeks ago and implemented a quick (and thus ugly) prototype based on their work.

Note that this version produces unusual layouts when you explore deep enough.

Click a node in the demo above to recenter the visualization around it. When the nodes rearrange themselves, you'll notice that they don't cross over each other, making the transition much easier to follow.