Processing

First Functional Demo

A first try-out for the concept in processing:

The comments stream in from the sides according to the time they are posted on the song itself and are attracted to the center of the screen.

First Improvements

Visual Encoding

In this test the size of the bubbles was random, we decided that we wanted the size to represent the length of the comments. We noticed that real comments tended to be pretty short, while spams were generally much longer, in a way cluttering up the comment space. The visualization should represent that.
To choose good breakpoints/sizes/ratios for the circle sizes, we looked at the distribution of the comment lengths and afterwards refined the results we got from that manually.

Movement

We were also not quite happy with the bubbles concentrating in the center, so we tried out different movements:
(the bubbles are already roughly color-coded according to their category)

Here spams (blue and green) comes in from the outside, like a foreign body, while the real comments (red) are generated inside the screen. The spams seem to bombard the real comments and disturb their formation. We felt however that it was difficult to follow the appearance of bubbles from two different locations in with different motions.

 

Here the bubbles once again center in the middle, but like in the above version, spams fly in from outside, while comments are generated in the middle. This gives the appearance of the real comments being trapped in a fog of spam.
visual mock-up ☟

This however posed the same problem as the above version, and didn’t quite result in the anticipated look and feel.

Ultimately we felt it worked best when comments/spams were coming in from opposing sides and then form clusters next to each other. This gives it a feeling of a struggle or fight and enables a quick comparison between the amount/size of both.

Layout

a couple of illustrator mock-ups ☟

 

We further added the actual comment text in the background, so it would be easier to understand what the visualization was about.

Current State

color variations in the actual processing environment ☟

Current state of the visualization:

Start
After clusters have formed

Furthermore we added additional features to allow a deeper exploration of the data:
stop/start on mouse-click
highlighting of comments from the same user on mouse-over
display of the actual comment text on mouse-over