Explore Your Twitter Network with Mentionmap

Asterisq just released Mentionmap, an exciting web app for exploring your Twitter network. Discover which people interact the most and what they're talking about. It's also a great way to find relevant people to follow.

Launch Mentionmap!

The visualization runs right in your browser and displays data from the Twitter API. Click the screenshot above to launch the visualization in your browser.

How Does Mentionmap Work?

Search box and user details

Mentionmap loads each user's Twitter status updates (tweets) and finds the people and hashtags they talked about the most. The data is displayed using Constellation Framework, a graph visualization library for Actionscript.

In this data visualization, mentions become connections and discussions between multiple users emerge as clusters.

Clicking a user will display their network of mentions as well as details from their profile. You can also search for friends by typing their Twitter usernames into the search box.

The Visualization

Node mouse over

This graph visualization uses custom node renderers which display profile images, usernames, and hashtags. The appearance of each node changes depending on its distance from the select user or hashtag. Also, both nodes and edges have mouse over effects which can be used to emphasize subnetworks.

The lines drawn between nodes become thicker if the users talked about each other more often. This draws the viewer's attention to big discussions. Hovering over an edge also reveals the exact number of mentions.

Twitter API Integration

API status indicators

Mentionmap makes the most of limited access to information: Twitter allows no more than 150 requests to their server every hour. Graph visualizations can be data hungry but with careful caching and smart use of the API you can see a lot without breaking the request limit.

Even better, a bar chart shows how many calls you have left so users can explore wisely.

The data from Twitter doesn't come all at once and the visualization reflects that. As soon as new information is loaded, nodes and edges will appear and the layout will shift to accommodate them.

The Twitter server can be temperamental at times—and with good reason—so multiple fail cases are handled. Whether Twitter responds with an "over capacity" message, "server unavailable" error, or simply doesn't respond at all, the user is given appropriate feedback so they know what's going on.

Other Features

The Mentionmap interface has several features that have been used in previous graph visualization projects including dragging the canvas to pan, zooming controls, auto-centering, and search. Users can retrace their steps using the history bar which sports a careful animation without being too distracting.

Mentionmap history bar

One new feature is support for the browser's back button. Clicking the back and forward buttons in your browser will update the visualization.

With the browser back button functionality also comes the ability to link directly to a particular node. The current node is stored right in the URL so you can copy the link and send it to a friend. After they login they'll be taken directly to that node.

Feedback and Thanks

If you have any feedback, suggestions, or comments, don't hesitate to contact Asterisq or leave me a tweet at @danielgm.

Thanks to missjenny.com for help with the design and thanks to the folks at Twitter for making their API publicly available!