d3 / d3-scale-chromatic

Sequential, diverging and categorical color scales.
https://d3js.org/d3-scale-chromatic
Other
801 stars 106 forks source link

cmocean color interpolators? #27

Open Fil opened 4 years ago

Fil commented 4 years ago

Mike:

http://matplotlib.org/cmocean/ it would be nice to have some approximations using d3.interpolateRgbBasis as I did for ColorBrewer in d3-scale-chromatic.

(from https://github.com/d3/d3-scale/issues/71)

Fil commented 4 years ago

One can retrieve the color schemes directly from https://github.com/mikeperrins/cmocean-LUT-ImageJ:

const lut = name => d3.tsv(
      `https://raw.githubusercontent.com/mikeperrins/cmocean-LUT-ImageJ/master/${name}.lut`,
      d => d3.rgb(d["Red"], d["Green"], d["Blue"])
    )
    .then(l => t => l[(t * 256) | 0]);

const l = await lut("Ice");

l(0.5).toString(); // "rgb(66, 122, 183)"

(see https://observablehq.com/@fil/cmocean )

the next step would be to extract key colors for the spline interpolation: https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5

Fil commented 4 years ago

The monotone RGB interpolation on 11 evenly-spaced control points is almost perfect for: Algae, Amp, Delta, Dense, Gray, Ice, Matter, Solar, Speed, Tempo, Thermal, Turbid.

For Haline, Phase we might need a few more control points or adjustments.

For Balance, Curl, Deep, Oxy, however, the interpolation strategy can't reproduce the brutal transitions, and it will need a bit more work (cutting each of them in two or three parts interpolated separately then rejoined), or we could have them as a 256-color array, depending on which approach gives the smallest file size(?).

Fil commented 4 years ago

See also https://observablehq.com/@fil/cmasher for the CMasher collection (https://cmasher.readthedocs.io/)

Fil commented 2 years ago

And colorcet: https://observablehq.com/@fil/colorcet

Collection of color schemes: https://observablehq.com/collection/@fil/color-schemes