Processing

First Functional Demo

A first try-out for the concept in processing:

ezgif.com-video-to-gif (8)

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.

Bildschirmfoto 2016-05-04 um 14.41.05.pngBildschirmfoto 2016-05-09 um 13.56.07.png

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)

ezgif.com-video-to-gif (9).gif
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.

 

ezgif.com-video-to-gif (10).gif
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 ☟

Bildschirmfoto 2016-05-09 um 13.23.21.png

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.

Bildschirmfoto 2016-05-09 um 14.55.20.png

Current State

color variations in the actual processing environment ☟

030405

Current state of the visualization:

Startezgif.com-video-to-gif (12)
After clusters have formed
ezgif.com-video-to-gif (11)

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

ezgif.com-video-to-gif (13).gif

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s