Sociotope

Sociotope is a social media experiment made with WebGL. It visualizes the data you left in social networks in a way you possibly haven't seen before. Using motion as a metaphor for relevance, Sociotope allows you to grasp, explore and play with the data left in social networks and the reactions to that data.

Sociotope has been created as a student project by Stefan Wagner, an interaction and motion designer based in Würzburg, Germany.

What it is

Sociotope is an interactive data visualization of digital identities. By connecting the application to your favorite social network, it will build a virus-like creature whose behaviour, look and feel corresponds to the way the chosen identity is behaving in the social network.

We're being overwhelmed by the masses of information we receive in social networks and it has become pretty hard to see what is relevant and what isn't. Sociotope uses two things to visualize online activity: motion and liveliness.

Sociotope builds »data creatures« from the sum of an online identity's actions within a social network. Every tentacle relates to one post / tweet / public activity of this identity. The more reactions this activity has got (comments, likes), the stronger the movement of its tentacle will be.

How it works

After launching Sociotope, you can choose a social network you'd like to connect to.

Please note that connection to social media platforms has been disabled for now, but you can see some anonymized examples of the data visualization – no login needed.

You choose between yourself or one of your connections (friends, people you're following, or even a search term / hashtag).

Sociotope will load all the data from the chosen connection (posts, tweets) and generate a tentacle for each of those data pieces.

The resulting data creature contains all the (public) data pieces the connection has left in the social network, each one represented by a tentacle.

Each tentacle as it's own appearance and behaviour. Here's how it is decoded:

• Length represents the length of the post / tweet
• Thickness represents the relative age of the post / tweet
• Movement represents the reaction to this post / tweet: the more likes, comments, retweets, favs, the stronger and faster the movement is.
• Color represents kind: a post / tweet with a video, a text message, etc.
• The color palette is taken from your online identity's profile picture

What you can do with it

There's lots of possibilities to explore and play with the data creature you brought to life.

Basic interaction:

You can freely rotate the created object by moving your cursor in the middle of the object and dragging in any direction.
If you move your mouse over the tentacles, you will notice that they are being attracted to your cursor. Each tentacle can be clicked, by doing so it will reveal the data it is containing.

At the bottom of the window you have a lot of options to explore and play with the visualization. You can:

• go back in time via the slider and watch the "evolution" of the object throughout time.
• delete the object and add another one
• load older posts (due to performance, Sociotope will only load the latest 140 posts by default)
• sort the tentacles by clock, kind, author
• create and share screenshots.

Credits

Sociotope has been created, designed and developed as a student project by Stefan Wagner (andsynchrony) in 2014 & '15 as part of his master degree studies at University of Applied Sciences, Würzburg, faculty of design.

The following libraries and tools were used to make this happen:

• Three.js
• moment.js by Tim Wood
• getImageData by Max Novakovic
• Color Thief by Lokesh Dhakar
• jQuery
• require.js

My thanks and appreciation go to the people who helped and supported me:

• Prof. Erich Schöls from university of applied sciences Würzburg, faculty of design
• My awesome colleagues at Design and Systems
• My mom and dad

Proudly hosted on Uberspace

imprint / data protection (Datenschutzerklärung)