C

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

Vintage bubble chart visualization of the “Value of the Foreign Commerce of the Principal Countries of the World, 1890”

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. 

Adobe Color’s automatically generated color theme from the imported bubble chart.

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. 

Manually repositioning the five color sensors to build a color theme.

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. 

Saving VintageFiz as a Color Theme in Adobe Color.

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.

Selecting Pink #D9898F, Green #A4BF8A, and Yellow #F2CB57 as a color scheme and naming it VintageFizPGY.

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:

My five-step process for colorizing a data visualization.
  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. 

Comparison of VintageFizPGY with Qualitative Color Schemes found in ColorBrewer.

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.

Detail of the three colors that compose the VintageFizPGY color scheme. 

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.

Using Adobe Color’s Accessibility Tools for Deuteranopia, Protanopia, and Tritanopia Color Deficiency Checks for VintageFiz. VintageFiz passes the checks with no conflicts.

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.

Data Visualization of the percentage of peanuts, cashews and walnuts in my pantry with the VintageFizPGY color scheme applied.

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. 

Color deficiency tests of the VintageFizPGY donut visualization using the Color Blindness Simulator (Coblis). Individuals with color deficiencies can distinguish three different colors for each of the checks.

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. 

Comparison of a composite image of walnuts, peanuts, and cashews with the Deuteranopia color deficiency check of the VintageFizPGY donut visualization. I define the resulting color scheme as “NuttyScheme”.

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

Using Adobe Color to extract the NuttyScheme colors from the Deuteranopia color deficiency check of the VintageFizPGY donut visualization.

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

Detail of the three colors that compose the NuttyScheme.

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.

Data visualization of the percentage of peanuts, cashews, and walnuts in my pantry with the NuttyScheme applied.

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. 

Color deficiency tests of the NuttyScheme donut visualization using the Color Blindness Simulator (Coblis). Individuals with color deficiencies can distinguish three different colors for each of the checks.

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.

Flow chart of process of creating two color schemes from a vintage visualization. 

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.

Theresa-Marie Rhyne is a Visualization Consultant with extensive experience in producing and colorizing digital media and visualizations. She has consulted with the Stanford University Visualization Group on a Color Suggestion Prototype System, the Center for Visualization at the University of California at Davis and the Scientific Computing and Imaging Institute at the University of Utah on applying color theory to Ensemble Data Visualization. Prior to her consulting work, she founded two visualization centers: (a) the United States Environmental Protection Agency’s Scientific Visualization Center and (b) the Center for Visualization and Analytics at North Carolina State University.

CategoriesHow To Use Tools