@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 {*} from "@d3plus/color";

In a vanilla environment, 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

| Functions | Description | | --- | --- | | 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. |

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

| Interfaces | Description | | --- | --- | | ColorDefaults | |

Functions

colorAdd()

colorAdd(c1: string, c2: string, o1?: number, o2?: number): string

Defined in: add.ts:10

Adds two colors together.

Parameters

| Parameter | Type | Default | Description | | ------ | ------ | ------ | ------ | | c1 | string | required | The first color, a valid CSS color string. | | c2 | string | required | The second color, also a valid CSS color string. | | o1 | number | 1 | Value from 0 to 1 of the first color's opacity. | | o2 | number | 1 | Value from 0 to 1 of the first color's opacity. |

Returns

string

colorAssign()

colorAssign(c: string | boolean | null | undefined, u?: Partial<ColorDefaults>): string

Defined in: assign.ts:9

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

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | c | string | boolean | null | required | A valid CSS color string. | | u | Partial<ColorDefaults> | An object containing overrides of the default colors. |

Returns

string

colorContrast()

colorContrast(c: string, u?: Partial<ColorDefaults>): string

Defined in: contrast.ts:9

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

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | c | string | A valid CSS color string. | | u | Partial<ColorDefaults> | An object containing overrides of the default colors. |

Returns

string

colorLegible()

colorLegible(c: string): string

Defined in: legible.ts:7

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

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | c | string | A valid CSS color string. |

Returns

string

colorLighter()

colorLighter(c: string, i?: number): string

Defined in: lighter.ts:8

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

Parameters

| Parameter | Type | Default | Description | | ------ | ------ | ------ | ------ | | c | string | required | A valid CSS color string. | | i | number | 0.5 | Strength of the lightening effect, from 0 to 1. |

Returns

string

colorSubtract()

colorSubtract(c1: string, c2: string, o1?: number, o2?: number): string

Defined in: subtract.ts:10

Subtracts one color from another.

Parameters

| Parameter | Type | Default | Description | | ------ | ------ | ------ | ------ | | c1 | string | required | The base color, a valid CSS color string. | | c2 | string | required | The color to remove from the base color, also a valid CSS color string. | | o1 | number | 1 | Value from 0 to 1 of the first color's opacity. | | o2 | number | 1 | Value from 0 to 1 of the first color's opacity. |

Returns

string

Variables

colorDefaults

const colorDefaults: ColorDefaults

Defined in: defaults.ts:37

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

Default Value

{
  dark: "#495057",
  light: "#f8f9fa",
  missing: "#ced4da",
  off: "#c92a2a",
  on: "#2b8a3e",
  scale: d3.scaleOrdinal().range([
    "#364fc7", "#fab005", "#c92a2a",
    "#2b8a3e", "#fd7e14", "#862e9c",
    "#15aabf", "#e64980", "#82c91e",
    "#74c0fc", "#faa2c1", "#c0eb75",
    "#b197fc", "#c5f6fa", "#ffe8cc",
    "#d3f9d8", "#f3d9fa", "#ffe3e3"
  ])
}

Interfaces

ColorDefaults

Defined in: defaults.ts:6

Properties

| Property | Type | Defined in | | ------ | ------ | ------ | | dark | string | defaults.ts:7 | | light | string | defaults.ts:8 | | missing | string | defaults.ts:9 | | off | string | defaults.ts:10 | | on | string | defaults.ts:11 | | scale | ScaleOrdinal<string, string> | defaults.ts:12 |