top of page

Sentiment of Romance Movies

Dataviz, IBM Watson API, D3.js, Sentiment Analysis


Award :  Kantar Information is Beautiful Awards 2017 — Longlist


Are romantic movies always composed of happiness? Feelings are hard to be measurable on screen,

but can we “watch” movie from unorthodox perspectives?  This project is to visualize the sentiment in romantic movie subtitles, types and scores of each subtitles' sentiment are calculated by the IBM sentiment analysis API.



Micro interaction
View All Projects

The Timescale and The Legend


In the first diagram, the mode tides, each vertical line represents a subtitle in the movie. In order to show the change of mood tides in the movie, sentiment data has been filtered over 0.5 over 1.



In the second diagram, the sentiments, each circle represents a total emotion stat in the movie.

The user can check the top five subtitles ranking in each emotion.


Go Deep To the Micro Interaction


I spread the subtitles along the movie timeline, so no matter how long the movie is, users can still compare the mood tide vertically.


To highlight what subtitle the user is reading, I bolded the lines when they are hovering on. I made the decision to keep them bold for two reasons:


1, users can notice what lines they already read, thus making the interaction experience like "read" a movie while watching the actors' emotion;


2, to make the feeling of happiness or sadness stronger after their read. My user tests show that this kind of small interaction design can really impact user's mood.  




I decided to show the sentence before any action:

Sentiment in the movie:


Top five sentimental subtitles:

to indicate users they could move their mouse to explore more. The subtitles show in the sentiment color to keep a consistency.


Small interaction: I used the Force layout to let the circles flow to each other as bubbles. This small detailed design reveals the complex feelings in the movies, made a natural connection with the user.  





Design Process


Sketches and layout test :​​

Users' Feedback & My Thoughts



Actually, I spend a lot of time exploring the color code on the first stage of the design. Since I divided moods into two groups: positive emotion & negative emotion. My peers gave me suggestions on my yellow/blue, red/purple, red/black....color codes, but none of them received a consistent recognition. I did a lot of second research, yes, color emotion is still a worldwide-unsolved  issue. 


But things changed when I apply PINK to the positive mood, everyone said it is the right choice. Then, to avoid pink be eaten by the white background, I have to use the dark background...which makes the keynote become sad again. The final view I make everything + pinky. I tried to persuade my users: just like the romance movie, it is always some delights in the dark side. People love my project and this idea and, 80% of them are females.




Mapping the Urban Timesheet

Interaction Design + Data Visualization

Next: Celebrating the Lunar New Year

Branding, Mobile, Visual identity

bottom of page