bpostlethwaite/colormap

output rgb or hex colormaps

colormap's Issues

New colormaps available!

Just a heads up that I've added 4 new colormaps to cmocean that you are welcome to integrate if you're interested. docs here

3.0 API

@bpostlethwaite I am thinking about redesigning the API so that it looks like:

var colormap = require('colormap')

var jet = colormap('jet') //or cmap(options)
var colors = jet(72) //generate number of shades

That would allow for easier to remember API, less options and higher performance.
Also I am thinking on reducing the size, as it is addressed in #13. Due to clone dependency we include Buffer polyfill, which adds 70kb of completely useless code here.

What do you think about such major change?

Among other improvements, it is possible to optionally enable smoothstep, for enhanced color interpolation (as it is done in glsl-colormap).

Add Turbo Colormap, please

Turbo is an improvement over Jet: https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html
Python version here: https://gist.github.com/jlmelville/be981e2f36485d8ef9616aef60fd52ab

Where can I get the .js ?

I merely want to use this to generate a colormap with 10 divisions using the "Jet" palette.

But this isn't javascript, this is some node BS with requirements that I cannot find seperately !

I want one .js file containing what this git repo is supposed to be doing - how do I get that ?

'#aNaNaN' colors returned with small (but acceptable) nshades

> colormap({colormap: 'YIGnBu', nshades: 12})
[ '#081d58',
  '#253494',
  '#aNaNaN',
  '#225ea8',
  '#1d91c0',
  '#aNaNaN',
  '#41b6c4',
  '#7fcdbb',
  '#aNaNaN',
  '#c7e9b4',
  '#edf8d9',
  '#aNaNaN' ]

The minimum number of colors should be updated or the code altered to allow fewer shades — it is stated that the minimum for YIGnBu is 9.

Thanks.

Reduce library size

colormap is great but including arraytools and clone make the library quite large (total to ~200k not minified using webpack. Minified along with rollup would be smaller).

I created color-map which create the color range same as your inner loop without dependency.

It is (1k minified, was 10k not minified using webpack). Do you want to use it inside your library?

Duplicate keys for cool

Originally reported in plotly/plotly.js#5457

Which "cool" is the cool?

colormap/colorScale.js

Line 8 in cb22a04

"cool":[{"index":0,"rgb":[0,255,255]},{"index":1,"rgb":[255,0,255]}],

Or

colormap/colorScale.js

Line 58 in cb22a04

"cool": [{"index":0,"rgb":[125,0,179]},{"index":0.13,"rgb":[116,0,218]},{"index":0.25,"rgb":[98,74,237]},{"index":0.38,"rgb":[68,146,231]},{"index":0.5,"rgb":[0,204,197]},{"index":0.63,"rgb":[0,247,146]},{"index":0.75,"rgb":[0,255,88]},{"index":0.88,"rgb":[40,255,8]},{"index":1,"rgb":[147,255,0]}],

github heatmap

Just an idea for colormap, inspired by cal-heatmap.

glsl-colormap

We can borrow some ideas from glsl-colormap, pretty nice collection.

Guide for importing in a frond end app?

Can't seem to find the dist file ? colormap.js ? guide is pretty bare.
Any help appreciated thanks.

Alpha values are reused for color maps with the same name

The alpha value used the first time when generating a color map is reused when generating more maps with the same name, even if they specify different values. E.g.:

var blueRed = colormap({
    colormap: "bluered",
    format: "rgba",
    alpha: [0, 1]
});

var blueRed2 = colormap({
    colormap: "bluered",
    format: "rgba",
    alpha: [0, 0.5]
});

console.log(blueRed[blueRed.length - 1]); // [ 255, 0, 0, 1 ]
console.log(blueRed2[blueRed2.length - 1]); // Also [ 255, 0, 0, 1 ] but should be [ 255, 0, 0, 0.5 ]

Colorspace clarification

Hello, I've been using the colormap library in the three.js 3D renderer.

Starting with version 152, three.js applies an automatic gamma encoding on colors.

With this automatic encoding, the same scene using the viridis color ramp renders differently:

Before:

After:

My understanding is that now three.js applies gamma encoding (i.e converts from sRGB to linear) on the colormap colors because it expects them to be in the sRGB color space. Obviously this is not the case.

Does it mean that colors generated by colormap are already in linear space ?

How is the index value in the colorscale.js calculated/selected for each colormap?

I want to add a new colormap turbo to the colormap module but I don't understand how the current colorscale was choosen/calculated and how to generate same for turbo colormap. If you could explain or direct me to some document that would be really helpful. Thanks.

pointing to custom colourScales

Hi there, sorry for this if it is obvious or simple, i am a total beginner. How do I point this module to find the custom colorScales.js without editing the module as rebuilding loosing custom edits?

YlOrRd & YlGnBu colormap typo?

Hello,
I have been using this library for colormapping geospatial data in OpenLayers - with an option for the user to choose between any of the colormaps available.

In the reference image, there are colormaps 'YlOrRd' and 'YlGnBu' , which I had removed because using this string for retrieving a colormap had thrown an error that the colormap did not exist.

Looking at colorScale.js , it looks like these are actually stored as 'yiorrd' and 'yignbu' - is the 'l' actually supposed to be an 'i'? 'RdBu' is also capitalized in the image and lowercase in the code.

Either this is a typo on the implementation end, or a typo on the reference image. With no user reference other than the image for the names to use for colormaps, this had me confused.

Could you please either update the naming in the code or in the image? Thank you.

Duplicate colors

Certain Palettes generate duplicate values.
e.g. Temperature, jet etc.

Parula viridis magma plasma inferno

Hi @bpostlethwaite!

There are additional sweet color maps

• matplotlib here.
• beautiful oceanography colormaps
• cosine gradient, 2, 3
• scale-color-perceptual
• palette.js

I’m thinking to make a PR, so just leave notice here :)

Use example with browserify

Hey there
I just found your colormap repo here and I want to use it to display color tints depending on some data input. Not sure if I'm getting the right thing here, but I guess so.

Well, anyway, I just wanted to ask, if there is a way to use colormap without browserify. What does it actually require?
Can I also load the important stuff manually?

Thanks for your answer.

cheers

2.3.0 slightly changes color value

Hi, I notice the generated color in 2.3.0 is slightly different than 2.2.0.

Is this intentional?

https://travis-ci.org/unional/color-map/builds/280895167?utm_source=github_status&utm_medium=notification

Thanks. 🌷

Is there a simple way to interpolate colors?

Is it possible to interpolate the color at a specific value between 0 and 1 for a colormap?

E.g. like with this package

[0, 0.25, 0.5, 0.75, 1].map(viridis)