viridis

Home | Docs | GitHub | npm | Changelog | YouTube | Color gradients for data visualization

Installation

viridis can be installed from the official npm package repository. It is highly recommended to install the latest version, which is installed by default with the following command.

npm i viridis@1.1.4

Bugs and Requests

Is there a way we can make viridis better? Please report all bugs, issues, and new feature requests to the issues page in the official repository. For critical security issues, please send an email to [e-mail].

Contribute

Thank you for your interest in contributing to viridis! viridis is an open source software package maintained by Nicolas Ventura (@nicfv) and built by users like you! You are allowed to fork the repository as permitted by the MIT License terms. Contributions are welcome by submitting a pull request. Please follow the existing code styling if submitting a pull request. Thank you for your consideration!

Builtin Palettes

This list is best viewed on the official documentation, and contains all the builtin color palettes obtained by Palette.Name or Palette['Name'].

<style> div.viridis-palette { width: calc(100% - 1rem); margin: 0.5rem; padding: 0.25rem; color: black; font: bold 0.8rem sans-serif; } </style>

Viridis

Inferno

Magma

Plasma

Grayscale

Parula

Emerald

Mint

Sunset

Dusk

Chroma

Spectral

Cool

Warm

Turquoise

Purplish

Dirt

Lime

Teal

Bee

Getting Started

viridis generates color gradients for data visualization, inspired by MatPlotLib colormaps and the Viridis package for R. It exports 3 main classes: Color, Gradient, and Palette. You are able to define your own colors and gradients using the corresponding classes, or use builtin palettes using the values contained in the Palette object. Let's get started with a simple example.

Examples

Here are a few quickstart examples written in JavaScript that showcase some out-of-box features of the viridis package.

Colors

This example demonstrates using the Color class to create some basic colors. This simulates setting HTML element properties.

Instructions

1. Copy the source code
2. Paste into a new file
3. Save as Colors.mjs
4. Run this command in your terminal

   node Colors.mjs

Source

import { Color } from 'viridis';

// getContrastingColor() will always return black or
// white, depending on which one has better contrast.
const background = new Color(255, 0, 0),
    foreground = background.getContrastingColor(),
    border = Color.from('#00beef');

// Automatically calls the toString() member function
console.log('Background: ' + background);
console.log('Foreground: ' + foreground);
console.log('Border color: ' + border);

Output

Background: rgba(255,0,0,100%)
Foreground: rgba(255,255,255,100%)
Border color: rgba(0,190,239,100%)

Builtin Palettes

This example demonstrates how to interpolate a color within one of the builtin color palettes to render a temperature display panel. Builtin palettes can be accessed with Palette.Name or Palette["Name"]. To know how to interpolate a palette, look at the list of builtin color palettes. The leftmost color of the gradient is the "zero" or minimum bound of the interpolated range, and the rightmost color of the gradient is the "one" or maximum bound of the interpolated range.

For "Spectral", the color on the left is red, meaning that red is the minimum bound of the range. We want to map that to the "hot" temperature.

Instructions

1. Copy the source code
2. Paste into a new file
3. Save as Builtin-Palettes.mjs
4. Run this command in your terminal

   node Builtin-Palettes.mjs

Source

import { Palette } from 'viridis';

const T_cold = 0,
    T_hot = 100,
    T_current = 55;

// Look at the list of builtin palettes!
// The red side of "Spectral" is on the left,
// meaning that is the lower bound. We want
// to map that to the hot temperature.
const background = Palette.Spectral.getColor(T_current, T_hot, T_cold),
    foreground = background.getContrastingColor();

console.log('Background: ' + background);
console.log('Foreground: ' + foreground);

Output

Background: rgba(248,229,142,100%)
Foreground: rgba(0,0,0,100%)

Gradient

This example takes you through creating your own custom color gradient and generate valid CSS code for it. It also shows how to generate intermediate color values in between color stops. By default, getColor() will assume a normalized input value from 0 to 1, but if minimum and maximum bounds are given, it will automatically interpolate between them.

Instructions

1. Copy the source code
2. Paste into a new file
3. Save as Gradient.mjs
4. Run this command in your terminal

   node Gradient.mjs

Source

import { Color, Gradient } from 'viridis';

// Define a custom gradient using an array of colors
const RGB_Gradient = new Gradient([
    new Color(255, 0, 0), // 0.0
    new Color(0, 255, 0), // 0.5
    new Color(0, 0, 255), // 1.0
]);

// Generate valid CSS code for this color gradient
console.log('CSS code        : ' + RGB_Gradient);
console.log('CSS code [45deg]: ' + RGB_Gradient.toString(45));

// Show the internal array of color stops
console.log('Color Stops', RGB_Gradient.colors);

// Generate a short list of intermediate color values
// Gradient will automatically interpolate if given
// a minimum and maximum bound. (1, N)
const N = 5;
for (let i = 1; i <= N; i++) {
    console.log(i + ' = ' + RGB_Gradient.getColor(i, 1, N));
}

Output

CSS code        : linear-gradient(90deg,rgba(255,0,0,100%),rgba(0,255,0,100%),rgba(0,0,255,100%))
CSS code [45deg]: linear-gradient(45deg,rgba(255,0,0,100%),rgba(0,255,0,100%),rgba(0,0,255,100%))
Color Stops [
  Color { red: 255, green: 0, blue: 0, alpha: 100 },
  Color { red: 0, green: 255, blue: 0, alpha: 100 },
  Color { red: 0, green: 0, blue: 255, alpha: 100 }
]
1 = rgba(255,0,0,100%)
2 = rgba(127,127,0,100%)
3 = rgba(0,255,0,100%)
4 = rgba(0,127,127,100%)
5 = rgba(0,0,255,100%)