Package Exports
- d3plus-color
- d3plus-color/es/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (d3plus-color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.