For this project, I decided to do a color analysis of one of Vincent van Gogh’s paintings, A Wheatfield With Cypresses. This data visualization shows the percentage of how much a color is used in the painting.
Finding Data
I didn’t really know what to do at first because I was struggling to find an understandable and usable data set. My case study inspired me to do something outside of the box with data, for instance something that’s not a standard line graph. I actually did a little more research for data visualization examples, and I found this one on the right.
This inspired me to do a color analysis of one artist. My initial idea was to visualize van Gogh’s color palette throughout the years, since his first paintings were drastically darker than his later paintings. However, I couldn’t find any data sets that fit my plan.
I decided to keep the color analysis idea, but simplify it. Instead of analyzing all the painting van Gogh did, or even just his most famous ones each year, I changed it to one painting. I used a color picker called Coolors, which retrieves color data from an image and it allows you to download the color palette into a text file. It provided an extended array that had the name of the color, hex code, RBG, HSL, HSB, and other color information. I edited it to match a JSON file format, so I could use it in my code.
The first draft was very minimal, but it didn’t provide enough data. I then had another idea to analyze the color proportions, i.e. how much a color was used in the painting, and make the circles correspond to the number.
This time, I used a different website called TinEye Lab, which extracted the colors and provided a percentage of each color as well as the hex code. However, the colors I picked using Coolors didn’t correspond with the colors extracted in TinEye Lab and TinEye Lab didn’t give specific color names like Coolors. I used the hex that TinEye Lab gave and put it into Coolors so I would have a name for the the specific color. I had to completely rewrite the JSON file, since the first JSON file had color information that I didn’t need. It ended up looking like the image on the left.
coding Process
The frame of the painting is a preloaded image pasted on top of the painting image. The first frame I used was actually different and a lot more bulky than the final one I decided to use.
I really liked how TinEye Lab did the layout for the proportional palette, so I tried doing that too. However, the rectangles overlapped so it didn’t match the percentages accurately. I scrapped this idea and tried something else.
Here I switched between circles and squares to represent the proportionate palette. I had to scale the size of the circles/squares because the percentages were pretty small. I felt like the squares had a more interesting look to it, and I really like having the circles as the color palette at the bottom. But I do also like how the color palette layout looks like in the left image, because you can see which name corresponds with the color.
Finally, I added more textually information for my data visualization. I also moved the circles and made them smaller so they weren’t as distracting. I wanted to add different fonts, but I struggled to figure out how to.
The final product is actually slightly different from this one. I decided to add the hex code next to the name of the color, so every property in the objects had a purpose in my data visualization. The circles were moved next to the name so it’s easier to correspond the color with the name and it’s more useful this way. Additionally, I changed the color of the background because one of the colors was hard to read. The brown looks really nice, but readability is more important.
Reflection
This project helped me get used to how to write a JSON file and how to access data from the JSON. I actually did most of the coding on Visual Studio Code instead of Glitch because for some reason my javaScript console wouldn’t display the array information; it kept saying data was undefined. I tried this with other projects on Glitch, but no variable used was defined even though the code works. I also wish I picked a more colorful piece instead. It would be cool if there were more paintings analyzed, but that could be a future exploration.
References:
-
- A Wheatfield With Cypresses
- Gold frame
- Attempt to add more fonts using HTML: Google Fonts