Color palettes

Color palettes are part of the core arguments to each chart type. Doodl uses Seaborn to specify how to color your charts. Consider, for example, the following Sankey diagram:

<skey
  width=600
  height=225
  path="data/energy.json"
>
</skey>

which looks like this:

Seaborn

The default color palette, as above, is the Seaborn pastel palette. This palette has 10 colors, which are used in rotation to color the 16 nodes and links in the chart, e.g. the light blue used for both the "Solar" and "Residential" nodes. Here are all of the colors in this palette:

You may use any of the Seaborn discrete palettes in your charts. Each chart makes use of its color palette in a manner particular to the chart. It is well worth studying color_palette API documentation. One palette of particular interest is husl, which returns "a specified number of evenly spaced hues in the HUSL system" like the following palette of (for example) nine colors:

Colorcet

From the documentation:

Colorcet is a collection of perceptually accurate 256-color colormaps for use with Python plotting programs like Bokeh, Matplotlib, HoloViews, and Datashader.

You can use any Colorcet palette using the palette name prefixed by "cc." in your chart, like this:

<skey ...
  colors="cc.glasbey"
></skey>

to use the glasbey color palette. Here is the same Sankey diagram as above, using "cc.glasbey" as the colors argument:

Color Brewer

You can also use categorical Color Brewer palettes, designed using the Color Brewer tool, in your charts. Here is the Color Brewer Set2 palette:

Manual color palettes

Finally, you can define the color palette yourself and provide it as a list of colors, using either standard color names (["DarkOrange"]) or standard hexadecimal color notation (['#A1C9F4', '#FFB482', '#8DE5A1']) or both.

You can use such a technique with any of a large number of Web tools to generate a palette from an image, like this palette:

["#A82D42", "#66894D", "#B0A669", "#D5C4B4", "#C4B1A3"]

generated from this picture:

using the Coolors app, just to pick an example utility.

Color maps

While most charts are rendered by categorical color maps - i.e. lists of colors that are used to render particular graphical elements - some (notably the heatmap) map a range of values to a range of colors. This is called color interpolation and is described in the documentation for the d3-interpolate module. The syntax for specifying color maps has a few extra parameters, compared to color palettes.

Parameter	Default	Description
colors	None	A list of two colors, for the simplest case
interp	None	The interpolation method
gamma	1.0	Governs the transition speed
intensity	0.5	How bright the colors appear

The following:

<heatmap
  colors='["purple", "orange"]'
  interp="rgb">
  ...

produces this color map:

The set of color interpolators includes:

Name	Description
rgb	Transitions between two colors
rgb-basis	Transitions between any number of colors
rgb-closed	Transitions between any number of colors, ending at the beginning
hsl	Two color interpolation in the HSL color space
hsl-long	Like hsl but does not use the shortest path between colors
lab	CIELAB color space interpolator between the two colors
hcl	CIELChab color space interpolator between the two colors
hcl-long	Like hcl but does not use the shortest path between colors
cube-helix	Cubehelix color space interpolator between the two colors
cube-helix-long	Like cube-helix but does not use the shortest path between colors

Given the wealth of possibilities for specifying color maps in d3, doodl does not extend support to Python-based color maps like those in Seaborn and matplotlib. We do, however, support interpolation of categorical color maps from Seaborn or elsewhere, as follows:

<heatmap
  colors="flare"
  interp="rgb-basis"
  ...

This is equivalent to giving the list of colors in the flare color palette to the interpolator:

<heatmap
  colors="[
    '#EA9972', '#E88265', '#E36C5D', '#DA555C', '#CB4563',
    '#B73D6A', '#A1376F', '#8B3170', '#752C6E', '#5F2868'
  ]"
  interp="rgb-basis"
  ...