Benjamin
Charity

Published:

Mastering Color in Data Visualization: A Guide to Creating a Custom Color Interpolator

Reading time: 2min

In data visualization, color plays a crucial role in conveying information effectively. However, finding the right balance between automated color generation and manual control can be challenging. Let's look at how you can create a color interpolator that generates a palette of colors between two specified values.

A vivid display of colored panels in a gradient from yellow to deep blue, reminiscent of a carefully crafted color scale used in data visualization.
A vivid display of colored panels in a gradient from yellow to deep blue, reminiscent of a carefully crafted color scale used in data visualization.

The Need for a Custom Color Interpolator

While experimenting with generated color palettes for a data visualization project, we encountered a need for greater control over the color transitions. The standard methods provided either too much automation or required extensive manual input. Thus, the color interpolator was born out of necessity, providing a solution that bridges this gap.

Core Concepts of the Color Interpolator

The color interpolator generates intermediate colors from two input colors. This process involves:

  • Defining a starting and an ending color in RGB format.
  • Specifying the number of steps or intermediate colors required.
  • Utilizing an interpolation function to blend the colors.

Implementation

The implementation involves two primary functions: interpolateColor and interpolateColors. interpolateColor blends two colors based on a given factor, while interpolateColors generates an array of colors between the two specified colors. The code snippet demonstrates the process in JavaScript, applicable for web-based data visualization.

/**
 * Interpolate two colors
 *
 * @param color1 - The starting color
 * @param color2 - The end color
 * @param factor - The interpolation factor (default: 0.5)
 * @returns The interpolated color
 */
function interpolateColor(
  color1: number[],
  color2: number[],
  factor: number = 0.5
): number[] {
  if (color1.length !== color2.length) {
    throw new Error('Color arrays must have the same length');
  }
 
  return color1.map((value, index) => {
    const diff = color2[index] - value;
    return Math.round(value + factor * diff);
  });
}
 
/**
 * Create an array of color values between two colors
 *
 * @param color1 - The starting color in the format 'rgb(0, 0, 0)'
 * @param color2 - The end color in the format 'rgb(255, 255, 255)'
 * @param steps - The number of desired colors
 * @returns The array of interpolated color values
 */
function interpolateColors(color1, color2, steps) {
  const [r1, g1, b1] = color1.match(/\d+/g).map(Number);
  const [r2, g2, b2] = color2.match(/\d+/g).map(Number);
 
  const interpolatedColorArray = [];
 
  for (let i = 0; i < steps; i++) {
    const factor = i / (steps - 1);
    const [r, g, b] = interpolateColor([r1, g1, b1], [r2, g2, b2], factor);
    interpolatedColorArray.push(`rgb(${r}, ${g}, ${b})`);
  }
 
  return interpolatedColorArray;
}

Usage

The usage involves:

  • Defining the start and end colors (COLOR_ONE and COLOR_TWO).
  • Setting the number of desired color steps (STEPS).
  • Applying the generated colors to HTML elements, in this case, divs within a wrapper.

See the Pen{' '} Interpolate colors {' '} by Benjamin Charity ( @benjamincharity) on{' '} CodePen.


This color interpolator exemplifies how a simple yet powerful tool can significantly enhance the aesthetic and functional aspects of data visualization. Bridging the gap between automated color generation and manual control empowers developers to craft visually appealing and informative visualizations easily. This adaptable and straightforward tool is not just a solution to a specific problem but a valuable addition to the broader toolkit of any developer engaged in the art and science of data visualization.


🛠️ 🌟 🎯