d3.js, puppeteer, python
Analysing Colors From Instagram
Analysing Colors From Instagram
averaging the main color in 300 posts, @chanelofficial

Color is a nice data to play with. It carries a lot of information and playing with it can give aesthetic results. I've been using colors in some of my former projects (Colors in Film and D3.js 10th Anniversary). In this project, I was interested in the way luxury brands uses colors in their own pictures. To analyse them, I have gathered some pictures from their Instagram account and set up a process to classify them.

1. Fetching pictures from the account with puppeteer and wget
2. Computing the average color of the pictures in python
3. Visualizing colors with d3.js
4. Final Words

1. Fetching pictures from the account

For this project, I'm using two different tools to extract the data from the Instagram accounts.

• I'm using puppeteer to automatically connect to my instagram account and access the account I am interested in.
• With puppeteer again, the script scrolls the page and gather image urls in a list.
• With the wget command, the images are downloaded from the created list of urls.

The shell script fetching the data gathers node, puppeteer and python in the same file to fetch the pictures by entering the account name.

2. Computing the average color

For every picture, I would like to extract the most representative color. But what should be the most representative color? There are actually many ways to think of the "most representative" one. Here, I'm computing an "averaged color" of the full picture. It is not completely accurate, as, for instance, a 50% black and 50% white picture will render an average grey colour. Still, it is the method I found the most relevant to get a sense of trends for brands on social media.

For every image, I'm using a python script (source code) to compute the average color with a k-means algorithm. Credits go to Charles Leifer for its original script.

The colors are then parsed into a JSON array, in the same script.

One average color per frame
header
from top to bottom: @chanelofficial, @kenzo, @desigual

3. Visualizing 300 images

Below are color wheels from 300 images from 3 different brands: Chanel, Kenzo & Desigual.
The were visualized with d3.js (the source code has not been updated).

@chanelofficial
header
@kenzo
header
@desigual
header

4. Final Words

The project being fully automated, such analysis could have been done for any hastag or account. I've chosen to analyse brands as each brand comes with its color identity, but it's even more relevant with photographs or artists playing with colors.

© 2020-2023 Loris Mat