Wonderwheel is a small data visualization project for representing images color distributions. More specifically, an image is represented as three separate hue histograms for visually black pixels, visually white pixel, and the rest (perceived color inormation). Finally, I generate the histogram at different stages of blurriness of the image (in decreasing order) to obtain an animation, displayed with pure HTML/CSS.

Download .ipynb notebook

Computing the histograms

The first step is to extract black, white and color pixels from the image. I first map the input image to the HSV (Hue Saturation Value) domain.

hue, sat, val = np.split(colors.rgb_to_hsv(image / 255.), 3, axis=-1)

I then extract black (resp. white) pixels as pixels whose value is below (resp. above) a certain threhsold

black_values = np.where(val < black_value_threshold)

hue_bins = np.linspace(0.0, 1.0, num_bins + 1, endpoint=True)
mask = sat[black_values]
black_hist, _ = np.histogram(hue, bins=hue_bins, weights=mask)
black_hist[np.isnan(black_hist)] = 0.

The remaining pixels will be used to compute the hue histograms. Each hue is additionally weighted by its saturation, so that low saturation colors, i.e. gray. get smaller weights, and an originality factor, which is defined as how far the color is from the average hue in the image.

hue[white_values] = -1
hue[black_values] = -1
weights = sat**sat_weight * np.abs(hue - np.mean(hue[hue >= 0])) 
hue_hist, _ = np.histogram(hue, bins=hue_bins, weights=weights)

And the color of the histogram bar should take into account the average saturation and value for this specific hue in the image.

data['colors'] = []
for i, bin_center in enumerate(hue_bins):
index = np.where((hue > bin_center  - bins_offset) & 
                 (hue < bin_center + bins_offset))
color = colorsys.hsv_to_rgb(bin_center,
			    np.mean(sat[index]), 
			    np.mean(val[index]))
data['colors'].append(color)

Visualization

Finally, I added a small animation component for the visualization.

First I generate a color histogram for a given image at different stage of bluriness (Gaussian filter with decreasing variance); The intuition is that the most important or salient colors will be present at a high-level while details will start appearing at fine-grained reoslution.

resolutions = np.linspace(40., 0., num_resolutions, endpoint=True)
for r in resolutions:
img = ndimage.gaussian_filter(image, sigma=r)
aux = create_equalizer(img, num_bins=num_bins)
data = np.concatenate([data, aux])

And finally, the animation is created by representing each bar as a rectangular div with transition animation.

# Define bar template
bar_template = """
#{name} {
left: {pos_left}px;
top: {pos_top}px;
background-color: rgb({r}, {g}, {b});
-webkit-animation: {name}_anim {duration}s ease-out infinite ; 
animation: {name}_anim {duration}s ease-out infinite;
-ms-transform: rotate({rot}deg); /* IE 9 */
-webkit-transform: rotate({rot}deg); /* Safari */
transform: rotate({rot}deg);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
border: {border_width}px solid {border_color};
}
"""

# Define bar animation
def write_anim(name, heights, colors=None):
assert len(times) == len(heights)
template = ""
start = 'from'
if colors is None:
    for i in range(len(times)):
        template += "%d%% {height: %dpx;}\n" % (times[i], int(heights[i]))
else:
    for i in range(len(times)):
        template += "%d%% {height: %dpx; background:rgb(%d, %d, %d)}\n" % (
            times[i], int(heights[i]), colors[i][0], colors[i][1], colors[i][2])
template =  """       
@-webkit-keyframes
{name}_anim {
    {content}
}
""".format(name=name, content=template)
return template