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";

d3plus-color can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-color@1"></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. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. 🍻

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.

Name	Default	Description
dark	"#555555"	Used in the contrast function when the color given is very light.
light	"#f7f7f7"	Used in the contrast function when the color given is very dark.
missing	"#cccccc"	Used in the assign function when the value passed is null or undefined.
off	"#C44536"	Used in the assign function when the value passed is false.
on	"#6A994E"	Used in the assign function when the value passed is true.
scale	"#4281A4", "#F6AE2D", "#C44536", "#2A9D8F", "#6A994E", "#CEB54A", "#5E548E", "#C08497", "#99582A", "#8C8C99", "#1D3557", "#D08C60", "#6D2E46", "#8BB19C", "#52796F", "#5E60CE", "#985277", "#5C374C"	An ordinal scale used in the assign function for non-valid color strings and numbers.

---

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

Adds two colors together.

This is a global function.

Param	Type	Default	Description
c1	String		The first color, a valid CSS color string.
c2	String		The second color, also a valid CSS color string.
[o1]	String	1	Value from 0 to 1 of the first color's opacity.
[o2]	String	1	Value from 0 to 1 of the first color's opacity.

---

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

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

This is a global function.

Param	Type	Default	Description
c	String		A valid CSS color string.
[u]	Object	defaults	An object containing overrides of the default colors.

---

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

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

This is a global function.

Param	Type	Default	Description
c	String		A valid CSS color string.
[u]	Object	defaults	An object containing overrides of the default colors.

---

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.

Param	Type	Default	Description
c	String		A valid CSS color string.
[i]	String	0.5	A value from 0 to 1 dictating the strength of the function.

---

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

Subtracts one color from another.

This is a global function.

Param	Type	Default	Description
c1	String		The base color, a valid CSS color string.
c2	String		The color to remove from the base color, also a valid CSS color string.
[o1]	String	1	Value from 0 to 1 of the first color's opacity.
[o2]	String	1	Value from 0 to 1 of the first color's opacity.

---

colorDefaults <>

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

Name	Default	Description
dark	"#555555"	Used in the contrast function when the color given is very light.
light	"#f7f7f7"	Used in the contrast function when the color given is very dark.
missing	"#cccccc"	Used in the assign function when the value passed is null or undefined.
off	"#C44536"	Used in the assign function when the value passed is false.
on	"#6A994E"	Used in the assign function when the value passed is true.
scale	"#4281A4", "#F6AE2D", "#C44536", "#2A9D8F", "#6A994E", "#CEB54A", "#5E548E", "#C08497", "#99582A", "#8C8C99", "#1D3557", "#D08C60", "#6D2E46", "#8BB19C", "#52796F", "#5E60CE", "#985277", "#5C374C"	An ordinal scale used in the assign function for non-valid color strings and numbers.

This is a global namespace.

---

_{Documentation generated on Wed, 25 Jan 2023 00:09:27 GMT}