Color Scheming from a Vintage Visualization

In this writing, I discuss how to build fresh color schemes from a vintage visualization.  I use a bubble chart created in the 1890s as my source and Adobe Color to help me revitalize the color palette. I then apply the revitalized color scheme to data by using my five-stage process for colorizing a data visualization. During the colorizing process, I discover an alternative color scheme that more closely matches the theme of the data sets.  Let’s get started by looking at the vintage visualization and analyzing its color scheme with Adobe Color.

The vintage visualization

The bubble chart visualization shown above depicts the “Value of the Foreign Commerce of the Principal Countries of the World, 1890” and appeared in Rand, McNally & Co.’s 1892 publication of an indexed atlas of the world.  I discovered this visualization while browsing  through the Stanford Libraries’ online collection and followed a link to Princeton University’s brief discussion of the “Rand, McNally & Co.’s Indexed atlas of the world map of the world on Mercator’s projection”. Unfortunately, I was not able to find a discussion on the details of the design and creator of this wonderful visualization. 

Importing the visualization into Adobe Color

Adobe Color is a free online color suggestion and analysis tool for building color schemes. I can use its “Extract Theme” function to import an image of the vintage bubble chart. Adobe Color automatically extracts a five color Pink, Green, Yellow, Cream and vintage White “theme”. Adobe Color uses the terminology of “Color Theme” to indicate a Color Scheme. Below, I show the results of the initial analysis Adobe Color performed. 

I next reposition the five color sensors that Adobe Color provides for building its color theme. My repositioning includes the Black text color and the vintage White background color with the Pink, Green and Yellow elements of the bubble chart. These results are shown below. 

I save the color theme as “VintageFiz” in Adobe Color and click on the Color Wheel option to examine the color elements in more detail. These results are shown below. 

I decide to apply the Pink #D9898F, Green #A4BF8A, and Yellow #F2CB57 color elements to data visualization and call the resulting color scheme VintageFizPGY. I show these results below.

My five-stage process for colorizing a data visualization

In a previous Nightingale writing, I defined and diagrammed a “Process of Colorizing a Data Visualization”. These steps, with my ring diagram are noted below:

1. Establish data classes for visualization and key color for visualization;
2. Select color rule, color harmony per criteria of your data;
3. Build color scheme. A color suggestion tool might be helpful;
4. Check and revise due to color deficiency, contrasts, or any pre-existing conditions;
5. Apply color theme to data visualization. Some modifications might result.

The concept was inspired by a technical discussion that I wrote with Georges Hattab and Dominik Heider on “Ten simple rules to colorize biological data visualization”. 

Let’s proceed with applying my VintageFizPGY color theme to data visualization according to these five steps. 

1) Establish data classes for visualization and key color for visualization:

VIntageFizPGY has three color elements to support three data classes for data visualization. For now, let’s not define a specific key color. I will explain this further in Step #2.

2) Select color rule, color harmony per criteria of your data:

VIntageFizPGY is an example of a three-class qualitative color scheme for data visualization. Each color receives equal perceptual weight so there are three key colors.  Below, I show how VIntageFizPGY compares to similar qualitative color schemes found in the ColorBrewer color suggestion system. 

3) Build color scheme. A color suggestion tool might be helpful:Previously, I used Adobe Color to help me extract the colors of VIntageFiz from an historic visualization. Let’s continue to use this tool and look again in more detail at the three colors that compose VIntageFizPGY. I show these results below.

In step #4, I will use the “Accessibility Tools” function in Adobe Color to perform preliminary color deficiency checks of the VintageFiz and VintageFizPGY color scheme. With this transition to step #4, let’s first define color deficiencies.

4) Check and revise due to color deficiency, contrasts, or any pre-existing conditions:

As highlighted in my previous writings on color in data visualization, in human eyes there are three types of cone cells where each is sensitive to different parts of the visual spectrum of light. These three different cone cells combine to facilitate rich color vision. If one or more of the set of cones does not perform properly, a color deficiency results. A Red cone deficiency is classified as Protanopia. A Green cone deficiency is classified as Deuteranopia. A Blue cone deficiency is classified as Tritanopia.

Adobe Color provides “Accessibility Tools” to evaluate if its color themes are “Color Blind” safe for Deuteranopia, Protanopia, and Tritanopia.  If the color theme fails these color deficiency checks, Adobe Color provides suggestions for repositioning its color sensors to pass these accessibility tests. Below, I show the results from Adobe Color’s color deficiency tests for VintageFiz.

5) Apply color theme to data visualization. Some modifications might result:

My data set is a categorical one of the percentage of peanuts, cashews and walnuts in my pantry. I select  a donut visualization, using the VintageFizPGY color scheme, to depict the quantities. These results are shown below.

To be sure of color deficiency, I perform a final check of my donut visualization using the freely available Color Blindness Simulator (Coblis) tool.  The checks for the donut chart with the VintageFizPGY color scheme indicate that individuals with color deficiencies can distinguish three distinct colors.  These results are shown below. I have successfully applied the VintageFizPGY color scheme to a data visualization. 

An alternative visualization

Upon review of the color deficiency tests, I notice that the Deuteranopia check provides a color scheme in the multi hue Brown range. This color scheme is an appropriate match for a categorical visualization of peanuts, walnuts, and cashews in my pantry. Below, I show a more detailed view of what I call the “NuttyScheme” with a color comparison of images of actual walnuts, peanuts and cashews. 

I then determine the colors of my “NuttyScheme” by using the “Extract Theme” function in Adobe Color.  I show these results below. 

Now, I can work with the actual Hex codes of the color in the NuttyScheme. I show a detail of this color scheme below.

I can now apply NuttyScheme to the donut visualization of the percentage of peanuts, cashews, and walnuts in my pantry. These results are shown below.

To be thorough in regard to color deficiency, I perform final Coblis checks of my donut visualization with the NuttyScheme applied.  Happily, the visualization passes color deficiency checks and NuttyScheme is successfully applied to the donut chart. These results are shown below. 

Concluding remarks

In this writing, I have shown how to extract colors from vintage visualizations and apply the resulting color schemes to your data visualization work. My source was a bubble chart created in the 1890s. I used Adobe Color to extract Pink #D9898F, Green #A4BF8A, and Yellow #F2CB57 color elements and named the color scheme VintageFizPGY. Using my five-stage process for colorizing a data visualization, I successfully applied VintageFizPGY to a donut chart of the percentage of Peanuts, Cashews and Walnuts in my pantry. During the colorization process, I discovered that the Deuteranopia color deficiency check of VintageFizPG produced a color scheme that more closely matched the theme of categorizing different types of nuts. I decided to explore this color scheme possibility further. Using Adobe Color, I was able to establish Hex codes associated with the three colors in the Deuteranopia color deficiency check. I named this new color combination NuttyScheme and applied it to my donut chart. The NuttyScheme visualization passed color deficiency checks. As a result, my vintage visualization helped me to discover  two fresh color scheme alternatives for my categorical data visualization. I show a simplified flow chart of my efforts below.

There are many ways to approach building color schemes for data visualization. I have shown a specific method here. For further discussion on my approaches with other color suggestion tools, please see my prior Nightingale articles as well as my 2016 book on Applying Color Theory to Digital Media and Visualization published by CRC Press.