Awesome
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. :beers:
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. |
<a name="colorAdd"></a>
d3plus.colorAdd(c1, c2, [o1], [o2]) <>
Adds two colors together.
This is a global function.
| Param | Type | Default | Description |
|---|---|---|---|
| c1 | <code>String</code> | The first color, a valid CSS color string. | |
| c2 | <code>String</code> | The second color, also a valid CSS color string. | |
| [o1] | <code>String</code> | <code>1</code> | Value from 0 to 1 of the first color's opacity. |
| [o2] | <code>String</code> | <code>1</code> | Value from 0 to 1 of the first color's opacity. |
<a name="colorAssign"></a>
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 | <code>String</code> | A valid CSS color string. | |
| [u] | <code>Object</code> | <code>defaults</code> | An object containing overrides of the default colors. |
<a name="colorContrast"></a>
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 | <code>String</code> | A valid CSS color string. | |
| [u] | <code>Object</code> | <code>defaults</code> | An object containing overrides of the default colors. |
<a name="colorLegible"></a>
d3plus.colorLegible(c) <>
Darkens a color so that it will appear legible on a white background.
This is a global function.
<a name="colorLighter"></a>
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 | <code>String</code> | A valid CSS color string. | |
| [i] | <code>String</code> | <code>0.5</code> | A value from 0 to 1 dictating the strength of the function. |
<a name="colorSubtract"></a>
d3plus.colorSubtract(c1, c2, [o1], [o2]) <>
Subtracts one color from another.
This is a global function.
| Param | Type | Default | Description |
|---|---|---|---|
| c1 | <code>String</code> | The base color, a valid CSS color string. | |
| c2 | <code>String</code> | The color to remove from the base color, also a valid CSS color string. | |
| [o1] | <code>String</code> | <code>1</code> | Value from 0 to 1 of the first color's opacity. |
| [o2] | <code>String</code> | <code>1</code> | Value from 0 to 1 of the first color's opacity. |
<a name="colorDefaults"></a>
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.