The Width and Length Comparison in NPG
The visualization project explores 150 portraits which are on the physical exhibit from the National Portrait Gallery. It compares the length, width and the area size of each painting separately as well as a whole.
Year
2021
Category
Data Visualization / Website
Design Preview
Introduction
When we visit the painting exhibition online instead of in the museum, although we will see pictures and some descriptions about its size, such as "Frame: 57.2 x 46.7 x 5.4cm (22 1/2 x 18 3/8 x 2 1/8")", it is still difficult for the audience to imagine how big a painting is.
The dataset includes 150 portrait paintings which are on the physical exhibit with CC0 media access. By comparing the length, width and the area size of each painting, we can know the size relationship between each painting, and I also have some questions, such as which is the largest painting? The smallest one? What is the ratio between them? What is the most common portrait painting size? ...
Live Website (Desktop Version)
Github repo
Timeline
4 weeks
Typeface
I used the same typeface that I found at the official NPG website for the visualization project.
Direction 2
In this direction, I plan to design an online gallery to view all the paintings at once. Each rectangle represents one painting, and the ratio of the length and width of the rectangle is the ratio of the painting in real life. Darker the rectangle, bigger the size. After the main graph, there are also some painting size comparisons.
Design
I start with two different directions for the main graph and the structure of the whole website. I want to compare the size of these paintings in the main graph and let my audience have a more direct feelings of the real size since they will only view them online.
Direction 1
To design a plot graph with the width of the paintings on the x-axis, and length of the paintings on the y-axis, plus some painting size comparisons after the main graph.
Colors
I also used the same blue I found at the official NPG website as the primary color. I picked a yellow as the frame color and a light yellow as the background color that works well with both the primary color and frame color.
The Dataset
The dataset that's been used in this project is provided by Smithsonian Institution, and I requested data through the API Key, and then wrote it into a json file.
Final Design
I continued working with direction 2, and here's some screenshots of the final application:
Live Website (Desktop Version)
