Beginning Experiments with Motion for Visualizing Emoji Use in Tweets

Beginning (and Messy!) Experiment
with Motion for Visually Digesting
Emoji Twitter Activity
Using Box2DWeb

Iteration 2: Using Emoji Categories
using categories from Cal Henderson's
js-emoji project

Previous "Spiral View" of Similar Activity

I have been playing with different ways to visualize emoji use in tweets, using emojitracker's streaming api (by Matthew Roth) to get the live counts for about 900 emoji.

The visualization is at It currently definitely requires a larger screen, and more cpu power than a mobile device is going to have.

One thing I did earlier was to start looking at a Box2D physics-based thing. This involves using Box2DWeb to model the physics, and then use that to move the emoji images around on the screen based on initial empirical stabs at how to translate the tweet counts to effects on the images.

For now, I simply apply a linear pulse that is roughly vertical (with slight random offset), and I am (sometimes) getting near 40-50 fps. I tried adding drawing a background rectangle when the impulse occurs as well, but this dragged the fps way way down, and besides that it mainly added to the confusion.

I also have the size of the emojis scale linearly as they climb up the screen. This is intended to bring the more active ones to the forefront, but it is also somewhat amazing to me how the corresponding decreasing sizes takes them out of your focus as they go back down.

The first version of Box2DWeb thing kind of looked like a bit of a mildly interesting mess.

Later, I incorporated the "category" for each emoji, using the categories as defined in Cal Henderson's js-emoji project:

  • People
  • Symbols
  • Nature
  • Objects
  • Activity
  • Foods
  • Places
  • Flags
  • Other

Each category gets a a slice of the screen to bounce around in. The more frequently used emojis are given a larger region, but I am still tweaking on that.

While watching the images pop around, I realized that I wanted to (try to) preattentively highlight:

  • which emoji are being tweeted the most
  • which emoji are getting a lot of activity
  • some indication of the activity for the more rarely used emoji

The spiral already somewhat shows this, of course.

What can addition of movement be used to convey?

Evidence of Prior Activity

One thing a motion effect helps do is provide some visual/preattentive info for emoji that recently had some tweets but haven't in a few seconds. These float down gently, shrinking in size, after getting a burst of activity.

Eager Twitter Storms
Typical Twitter Storm from Fan
Trying to Get their Artist to Win
in the MTVStars Contest

Emoji that are being used in twitter storms in the current MTVStars contest dance around in a very noticeable way out of the blue. In this contest, fans are trying to get their favorite artists to win by tweeting about the artists, and these tweets contribute to the vote count. The fans also tend to use lots of the more rarely used emoji, which actually helps in my own testing. The contest continues until Dec 15, so you can expect to continue to see these for the next month. I have seen more than 200 tweets/sec occur as part of these storms, certainly driven by bots that hyper eager fans are using.

Staying at the Top
The Typically Most Popular Emojis
Tread Water at the Top

Independent of twitter storms, some emoji are always being used a lot (mostly the face ones), and these seem to have a more "treading water" behavior.

Moving On...

I now need to explore more with the use of motion here, moving on from the implementation task of getting the emojis to move in some stream-based way to reach a more effective and enlightening plateau; in the words of Poe below, to see other mountains.

No sooner had I examined one region than I was possessed with an irresistible desire to push forward and explore another.... I could not help being aware that some civilized footsteps ... had preceded me in my journey - that some eyes before mine own had been enraptured with the scenes around me.... I was anxious to go on - to get, if possible, beyond the extreme bounds of civilization - to gaze, if I could, upon those gigantic mountains...

Edgar Allan Poe, The Journal of Julius Rodman

Popular Posts