d3 / d3-color

Color spaces! RGB, HSL, Cubehelix, CIELAB, and more.
https://d3js.org/d3-color
ISC License
398 stars 91 forks source link

HUSL/hsluv space #35

Closed petulla closed 6 years ago

petulla commented 6 years ago

This is just a naive question I wasn't able to get an answer from Google about, but wondering why HUSL space isn't included. It claims to offer a uniform lightness color space like HCL/LAB.

There's an interpolator for V3. Is there a reason not to use on one's own in colorizing maps?

http://www.hsluv.org/comparison/ https://npm.hotlibs.com/d3-interpolate-husl/package/0.1.0

@mbostock Note the updated repo is below.

mbostock commented 6 years ago

See d3-hsv, d3-hcg and d3-cam02 for examples of how to define a new color space in D3. I’d be in favor of a new d3/d3-husl package that implements the HUSL color space, say, ported from the reference Haxe implementation or from the earlier d3-interpolate-husl. Though, I’d ask for a vanilla JavaScript implementation rather than CoffeeScript if you want to host it in the d3 organization.

petulla commented 6 years ago

👍 Will try to get this up. Do you have a preference for how a PR is made since everything's broken into repos?

mbostock commented 6 years ago

I would start by creating a new personal repo named d3-husl d3-hsluv, then send me a note say it’s ready, and then you can transfer it over to the d3 organization and I will contribute any finishing touches.

MalcolmDwyer commented 6 years ago

Just a note for anyone doing the work on adapting this color space to d3... I believe the preferred name is now HSLuv: http://www.hsluv.org/ (I've been reading a bunch about HSLuv lately and came across this issue and wondered at first if it was referring to the same thing). Anyway, I'm looking forward to seeing it in D3.

petulla commented 6 years ago

@mbostock

I've setup a ported version in this repo that follows the guidelines you set forward. I have work still to do but wanted to send this over to get your eyes on it.

A few questions I have.

--I have some precision issues to work out in the conversion process. I saw some use of Math.round in d3-color. I have converted some floats to 32 byte (7 decimals). Still, in the tests, I'm getting values at 1.9e-12 instead of 0. I can coerce to a rounded value but wanted to see if you had specific guidance. I can provide more context if needed.

-- I use l,u,v as the returned values and the test values rather than h,s,l. I like that it distinguishes from h,s,l but perhaps it is too cute.

--I will finish the Readme. I think some additional documentation should be written. Because this creates a perceptually uniform space, I expect some interest in it.

--I need to review Brighter/Darker

--I did not create the interpolation method like in the HSV repo. Can do so if you like.

I will add that I think we should add hpluv as well (which has uniform, non-distorted Chroma, uniform lightness, and approximate HSL hue). Once a path forward for hsluv is chosen, I'll create this next.