a blog by Peter Leonard
In my last post I showed some hand-built visualizations of the covers of Vogue, sampled every ten years since the 1890s. From looking at the covers closely, I knew that some interesting patterns would emerge - but the project involved a great deal of hand-aligning images to compensate for the vagaries of digitization practices. For the next visualization, I was interested in doing something more automatic!
I’ve long been inspired by the work of Lev Manovich and his Software Studies Initiative. They have produced a wonderful free tool called ImagePlot, together with copious documentation and examples. Together, these tools and resources allow nearly anyone to work with image collections in new and exciting ways by exposing some of the inherent dimensions of visual material such as hue, saturation and brightness. I’ve used ImagePlot myself to generate visualizations of magazine covers, oil paintings, and photographs from various collections. Below, ImagePlot let me visualize how “colorful” Vogue were over time — from the 1890s on the left to the present-day on the right, the more colorful covers are higher on the y-axis:
But I’ve always been curious if it would be possible to work in a more experimental, playful way. Presently, ImagePlot outputs large, high-quality images, in print-quality formats such as uncompressed TIFF. This means, however, that there’s a bit of a wait for a large visualization to be rendered — and if you change your mind and want to switch an axis from hue to saturation, you need to run the entire process again.
I’d long suspected that a web visualization framework such as d3.js might be able to handle both 1) large amounts of individual images, as well as 2) moving and rearranging those images on axes defined by a user, in real time. At THATCamp New England, I was able to get a chance to see if it would work, thanks to a collaboration with Ben Schmidt of Northeastern University. Based on my comprehensive collection of cover thumbnails, and some colormetric data previously generated with ImagePlot, Ben was able to whip up a dynamic plotting application in d3 that lets you choose which dimensions to plot against each other. As the above YouTube video shows, you can switch between seeing saturation change over time, or the relationship between hue and brightness — all by pulling down two menus to change what the y and x axes are showing. It’s a testimony to Mike Bostock’s d3 project, as well as Ben’s programming skills, that all of this is possible in a web browser!
Although the Vogue covers themselves are under copyright, the tool itself is repurposable for nearly any dataset that involves color imagery. Since the THATCamp ended, Ben has actually implemented some automatic colormetric analysis into the tool itself, so that you can run it even if you don’t currently have color measurement data from a tool such as ImagePlot. I’ll update folks when there’s a version of the code ready to download.