Women’s USOPEN – visualization

USOPEN Women’s Twitter Popularity -webGL/Three.js

vis_update3

vis_update2
Live App: http://womenstennis.fusion-sky.com/

I am a big tennis fan and decided to see if the tweets a player gets in a game reflects in the persons performance. In other words, I wanted to see if the fans were tweeting players hopes up (or down) and predicting the outcome. many interesting patterns were found, which made me very happy! 🙂

I initially tried to use Tamboo but couldn’t use it because Twitter API only allows you to get tweets that are 30 days old. Given that the USOPEN had been a couple of months back I did a parser to parse “Topsy”. After finishing my parser, I had to parse the data multiple times to get all (or almost all) the tweets one player got during the day of her game. It took a  long time…

After aggregating the data, I cleaned it up using some text analysis libraries.  (Total around ~15,000 tweets) Once everything was done, or as done as it was going to get thanks to lack of time, I started visualizing it.

I decided to use webGL and Three.JS because I really wanted to learn it.

I made a bracket time visualization with the winners in the right in shades of green, and the losers to the left in shades of red.  The size of the circle represents the amount of tweets that player got in that game.  If you hover over the player you get to see more information. The orange circle represents the amount of positive tweets and the purple the amount of negative tweets. The rest are neutral. Apart from the extra information; all the games of that player glow up for the user to see the success of that player.

You can still navigate the interactive visualization with the arrow keys and the mouse (zoom, etc.)

Capstone Proposal

Magic Mirror:

Try your outfit without having to change your cloth and share it with others for feedback!

My capstone proposal consists on creating a magic mirror that will help the user try their favorite cloth in different colors in real time. This way, you can see what shirt or sweater looks better on you.  The player will also be able to “grab” the image in the mirror and “put” it in their phone to share it with friends. The world is reactive if we let it be magical.

Mobile phones bring computing power to immobile objects. With this in mind, I decided to incorporate our phones in the experience to bring the mirror even more alive. I got inspired on the video below and really wanted to do something similar. From here I got the idea of grabbing the image in the mirror and “put” it on the phone to share it with others:

Research: 

There are some people also trying to bring mirrors to live. For example Neiman Marcus’ Digital Mirror record what you currently are wearing for later to compare it with a new outfit. Another example is Rebecca Minkoff First Interactive Store. Users can select their cloths in a giant touchscreen mirror. Then the cloth will be taken to a fitting room and when it is ready the user will get a text message. Inside the fitting room the user has access again to the touchscreen mirror. Here they can ask for other sizes etc. and share their findings through social network.

Even though these two ideas are very good, I wanted to bring a more magical experience to live. Magic mirror will use these two examples as case studies and expand on what works and what doesn’t.  It will be real-time, and it will allow the user to share it with others through the phone gesture.

The project will be broken into 4 main stages:

  • Stage 1:
    • Successfully change color of clothing in real time with the use of the kinect.
  • Stage 2:
    • Successfully “grab” the current image and send it to your phone to share it.
  • Stage 3:
    • Make the magic mirror a more interesting object by using a 3D mesh and projection mapping.
  • Stage 4:
    • Polish

 

References:

https://www.youtube.com/watch?v=eYveEdhTgBs

http://www.digitalsignagetoday.com/videos/rebecca-minkoff-debuts-first-interactive-store/

http://www.engadget.com/2015/01/13/neiman-marcus-memory-mirror/