Visualizing Movie

MY ROLES

Researcher

Designer

PROCESS

Data Classification

Visual Exploration

TOOLS

Data Illustrator

D3.js

Illustrator

This visualization is based on a data set about famous movies through history, provided by the professor during a design class, including budgets, office revenue, runtime, genre, IMDB score, rotten tomatoes critique, and the audience score.

 

 

DESIGN PROCESS

STEP 1: Sorting data

 

 

 

 

 

 

 

 

 

 

 

 

The difficulty of this set of data lies in different data types: such as budget (money), year (time), score (number), etc. First of all, we should classify the information group: information can be shared, and information cannot be shared.  

 

Information can be shared: 
1. Genre: A genre will contain several or a dozen movies, all movie has a genre. 
2. Time (year): the same time can contain one or several movies, all movie has a year.

Information cannot be shared:
1. Movie: each movie has its own dataset only applies to itself.

Screen Shot 2021-03-08 at 11.50.14 PM.pn

Secondly, I want to find the types of information that can and cannot be shared in each movie. This means they can share visual representations: colors, shapes, etc.


1. Money: Box Office Revenue, Budget
2. Score: IBDM Score, Rotten Tomatoes Agg Audience Score, Rotten Tomatoes Agg Critic Score
3. Runtime

This means that I designed a six-layer information decoding process. Whenever the reader decodes one layer of information, he only needs to decode the other layers contained in that layer: if I decoding movies included "drama", I don’t need to decode information under other genres. 

STEP 2: Design

In essence, layering is to categorize information and ensure that readers decode related information without interference from other information. The scope of information interpretation at different layers is different.

 

 

 

 

 

 

 

 

 

 

The user’s task is to quickly decode my information classification, which means that I must cleverly combine these six layers of information in the design and avoid visual fatigue. Therefore, I removed the legend of the genre, because the name of each color group shelf is enough to express the category they belong to. Secondly, in terms of time, I only kept the text of the year with the movie, reducing the interference of the blank year, because the year without the movie does not contain any useful information. So far, we have removed two legends.

I added a dotted circle to replace the runtime legend. This visually gives the reader a direct visual measurement standard, without the need to go back and forth between legend and graphics. If you want to compare the length of time, the reader only needs to compare the distance between lines and the circle. Similarly, we added a mark at 100, which means that readers can deduce the range of values if they remember the classification.  At the same time, I added arrows, lines, and "1985" to tell the reader where to start, also separate 1985 and 2014.

In the final design, I removed 1985 and arrow from other circles because it is kind of repetitive. I also put reading instructions near ‘drama’ because it also works as a part of the instruction.

Screen Shot 2021-03-09 at 12.19.09 AM.pn
Screen Shot 2021-03-09 at 12.07.20 AM.pn
siyue_a1_movie.png

© Siyue Tan 

 Let's get connected :)