Color in Data Visualization

Data visualization is a crucial aspect of presenting information effectively. The right use of color can enhance understanding, highlight important data points, and improve overall readability. This guide will show you how to leverage color-core to create effective and accessible color schemes for your data visualizations.

Creating Color Scales with color-core

color-core provides several functions that are particularly useful for creating color scales. Let's explore some of them with interactive examples.

Sequential Color Scales

Sequential scales are ideal for representing data that ranges from low to high values. Here's how you can create a simple sequential scale using color-core:

import { Color } from 'color-core';

function createSequentialScale(startColor: Color, endColor: Color, steps: number): Color[] {
  return Array.from({ length: steps }, (_, i) => 
    startColor.mix(endColor, i / (steps - 1))
  );
}

const lightBlue = new Color('#E3F2FD');
const darkBlue = new Color('#0D47A1');
const blueScale = createSequentialScale(lightBlue, darkBlue, 5);

console.log(blueScale.map(color => color.toHex()));

Here's an interactive example of this sequential scale:

Start Color:End Color:Steps:

#e3f2fd

#aec7e6

#789dcf

#4372b8

#0d47a1

Diverging Color Scales

Diverging scales are useful for data that has a meaningful midpoint. While color-core doesn't have a built-in function for this, we can create one using the existing mix method:

import { Color } from 'color-core';

function createDivergingScale(startColor: Color, midColor: Color, endColor: Color, steps: number): Color[] {
  const halfSteps = Math.floor(steps / 2);
  const firstHalf = Array.from({ length: halfSteps }, (_, i) => 
    startColor.mix(midColor, i / (halfSteps - 1))
  );
  const secondHalf = Array.from({ length: steps - halfSteps }, (_, i) => 
    midColor.mix(endColor, i / (steps - halfSteps - 1))
  );
  return [...firstHalf, ...secondHalf.slice(1)];
}

const red = new Color('#EF5350');
const white = new Color('#FFFFFF');
const blue = new Color('#42A5F5');
const divergingScale = createDivergingScale(red, white, blue, 7);

console.log(divergingScale.map(color => color.toHex()));

Here's an interactive example of this diverging scale:

Start Color:Mid Color:End Color:Steps:

#ef5350

#f7a9a8

#ffffff

#c0e1fc

#81c3f8

#42a5f5

Ensuring Accessibility

When creating color scales for data visualization, it's crucial to ensure that your colors are distinguishable for all users, including those with color vision deficiencies. color-core provides methods to help with this:

import { Color } from 'color-core';

function getContrastRatio(color1: Color, color2: Color): number {
  const l1 = color1.getBrightness();
  const l2 = color2.getBrightness();
  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
  return Number(ratio.toFixed(2));
}

const backgroundColor = new Color('#FFFFFF');
const textColor = new Color('#777777');
const contrastRatio = getContrastRatio(backgroundColor, textColor);

console.log(`Contrast ratio: ${contrastRatio}`);

// If the contrast isn't sufficient, you can adjust the colors:
const adjustedTextColor = textColor.adjustLightness(-20);
const newContrastRatio = getContrastRatio(backgroundColor, adjustedTextColor);

console.log(`New contrast ratio: ${newContrastRatio}`);

Here's an interactive example to check color contrast:

Background Color:Text Color:

Sample Text

Contrast ratio: 2.14

Fails AA for normal text

Fails AAA for normal text

By leveraging color-core's color manipulation functions and these interactive tools, you can create sophisticated, accessible color schemes for your data visualizations. Remember to always test your color schemes with potential users and consider using tools that simulate different types of color blindness to ensure your visualizations are inclusive and effective.