@d3plus/color

Color functions that extent the ability of d3-color.

Installing

If using npm, npm install @d3plus/color. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "@d3plus/color";

In vanilla JavaScript, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/color"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.

API Reference

• colorAdd - Adds two colors together.
• colorAssign - Assigns a color to a value using a predefined set of defaults.
• colorContrast - A set of default color values used when assigning colors based on data.
• colorLegible - Darkens a color so that it will appear legible on a white background.
• colorLighter - Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.
• colorSubtract - Subtracts one color from another.

• colorDefaults - A set of default color values used when assigning colors based on data.

d3plus.colorAdd(c1, c2, [o1], [o2]) <>

Adds two colors together.

This is a global function

d3plus.colorAssign(c, [u]) <>

Assigns a color to a value using a predefined set of defaults.

This is a global function

d3plus.colorContrast(c, [u]) <>

A set of default color values used when assigning colors based on data.

This is a global function

d3plus.colorLegible(c) <>

Darkens a color so that it will appear legible on a white background.

This is a global function

d3plus.colorLighter(c, [i]) <>

Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.

This is a global function

d3plus.colorSubtract(c1, c2, [o1], [o2]) <>

Subtracts one color from another.

This is a global function

colorDefaults <>

A set of default color values used when assigning colors based on data.

This is a global namespace