Comments (12)
@rochoa OMG totally had it and then re-ordered the list and deleted it!
gooood catch!
update:
- rgb/rgba
- HSL/HSLa (easier notation than HSV)
- HSV/HSVa (since we have examples that utilize)
- HSLuv (if possible this is important for color-based expressions)
- HEX
- named colors
from carto-vl.
@dv343
There are a couple of things here, but to answer your first question, I would add HSL and HSLA as well as HSVA.
Also, it will be good that HSL will be "easier" for people with its notation.
Question:
- CIELab is good as an interpolation space, but do you think it is good for common styling?
Issues with HSL and HSV for color interpolation
We have seen that we can do cool things with expressions and color by manipulating HSV components. But as we've discussed, HSV and HSL aren't good choices for perceptually uniform colors which is especially important to us for thematic cartography.
Given that we support color interpolation and that anywhere you read about color for data visualization discusses why you should use a perceptually uniform color space, I think we should spend some time on this.
In a nutshell, both HSV and HSL work well for one color, but when doing more advanced operations, we can't rely on the output colors.
If we take some styling from the Barcelona example, are we actually making a category scheme using proper cartographic principles given HSV's inherent hue-dependent brightness?
width: 3
color: hsv($category, 0.7, 1.)
To demonstrate:
- here I'm using the HSV sliders to vary hue while keeping S and V constant green is perceived as much brighter than blue: http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#5100ff,c8ff00
I thought this blog did a good job of showing the issues with HSL (also inherent in HSV)
http://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/
Ideas
CARTOColors will get us through a lot of the basics but if people want to do things like choose category colors based on an attribute or interpolate between a start and end color, what should we do?
CIELab is obviously uniform, but I feel like difficult to reason and add expressions to that to do advanced visualizations, it could get even more tricky.
- In this regard, I like what d3 does where input colors are converted behind the scenes to a given color space, interpolated, and returned. For example, https://github.com/d3/d3-interpolate#interpolateLab
HSLuv a "human-friendly" alternative to HSL
- also, it looks like Seaborn (a Python visualization library based on matplotlib) implements this as an option for interpolation http://seaborn.pydata.org/tutorial/color_palettes.html#using-circular-color-systems
And there are others out there! Before going too much deeper, let's talk through!
from carto-vl.
CIELab is good as an interpolation space, but do you think it is good for common styling?
Difficult to say, I think I made something interesting with it once, and it has its advantages, but it's clearly a difficult one. I would leave for now, and if we haven't found a proper use case near the release we could deprecate it before the release.
We could make a PoC with cielab color interpolation instead of the current RGBA one, eg (making this perceptually uniform): blend(red, blue, $vote_pct)
We could make another PoC with HSLuv.
I'm gonna add all of this to the original TODO list.
from carto-vl.
Another one we could consider is Lch/HCL... which seems easier to manipulate than CIELab... for example:
http://www.hclwizard.org/r-colorspace/
from carto-vl.
@makella, if you had to decide what are the top 5 to support for an initial version, which ones would you pick?
from carto-vl.
without taking color interpolation into account, for basic, basic, I'd do:
- rgb
- rgba
- HSL (easier notation than HSV)
- HSLa
- HSV (since we have examples that utilize)
- HSVa
- named colors
from carto-vl.
Just to be sure, you mean HSL, not HSLuv, right?
If that's the case, those shouldn't be a problem at all.
from carto-vl.
ahhhh!! right
is it complicated? i do prefer HSLuv... for the reasons we talked about (thanks for the reminder)
from carto-vl.
I found a GLSL implementation: https://github.com/williammalo/hsluv-glsl/blob/master/hsluv-glsl.fsh
and a C (similar to GLSL) implementation: https://github.com/hsluv/hsluv-c/blob/master/src/hsluv.c
If those implementations are good it shouldn't be difficult to adapt it. But I would do the rest of your list first since they are even easier.
from carto-vl.
No hexadecimal (e.g. #FFF
) notation?
from carto-vl.
just to summarize, we now have:
- rgb/rgba
- HSV/HSVa
- HEX
- named colors
- cie lab
is this right?
from carto-vl.
We have also HSL/HSLa :)
from carto-vl.
Related Issues (20)
- Cannot blend animation.duration if it's a variable
- Allow animation controls for any animated property
- Allow to assign a new expression to a new viz variable when the layer has been loaded HOT 2
- MVTs with bottom-left corner as the origin of coordinates HOT 1
- GeoJSON source issues with viz updates HOT 2
- some carto expression not working in geojson HOT 2
- CVL 1.4.1 regression :: filtering with list does not work anymore HOT 1
- [WebGL]: An error occurred compiling the shaders: ERROR: Expression too complex. HOT 1
- 'Time' function inside the Viz filter seems broken
- Mobile maps are not able to load the data HOT 17
- Lower minimum MAX_VERTEX_TEXTURE_IMAGE_UNITS requirement HOT 1
- Update MAX_VERTEX_TEXTURE_IMAGE_UNITS parameter at browser support doc HOT 1
- Windshaft-carto-vl docker image is broken HOT 5
- Issue with numeric buckets when defined in descending order
- Blog map issue HOT 1
- Viewport numeric computation are somehow wrong when zoom is < 2
- Typescript support HOT 2
- this._source.requiresNewMetadata is not a function on blendToViz with an MVT Layer HOT 1
- Styling point width by variables renders incorrectly on mobile devices
- How to use clusterCount expression on GeoJson Data?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from carto-vl.