Colorscale opacity #422
Colorscale opacity #422
Conversation
|
not sure that it matters for now, but just in case https://github.com/d3/d3-interpolate/releases/tag/v0.5.2 supports opacity interpolation |
|
Definitely good to know for when we go the modular route! |
| @@ -26,18 +26,20 @@ module.exports = function makeScaleFunction(scl, cmin, cmax) { | |||
| for(var i = 0; i < N; i++) { | |||
| si = scl[i]; | |||
| domain[i] = cmin + si[0] * (cmax - cmin); | |||
| range[i] = si[1]; | |||
| range[i] = tinycolor(si[1]).toRgb(); | |||
|
@mdtusz Moreover, should we add |
|
I could see it being useful in the future for contours laid overtop a map or geo outline, but it may not be worth it until we confirm that we will be adding support for that. |
|
Related #323 ? |
|
Yes - this is the fix for that. I discovered this affects colorbars as well so this will require more work before it's ready for a full review. |
mdtusz
force-pushed
the
colorscale-opacity
branch
from
a98cc44 to
0fe718d
Compare
| }) | ||
| .style('fill',fillcolormap(d)); | ||
| height: Math.max(d3.max(z)-d3.min(z),2), | ||
| fill: opaqueColor |
There was a problem hiding this comment.
This is a little hacky, but the alternative will require a substantial amount of work refactoring the colorbar component so it can use native svg gradients.
There was a problem hiding this comment.
I'm cool with this.
But to make sure we don't forget about this hack, could you write an issue about refactoring colorbar/draw.js , possibly using SVG gradients.
|
The small fix in the colorbar module will allow transparent colors to be used, but the colorbar will still display fully opaque. |
| @@ -10,6 +10,7 @@ | |||
| 'use strict'; | |||
|
|
|||
| var d3 = require('d3'); | |||
| var tc = require('tinycolor2'); | |||
There was a problem hiding this comment.
🐄 we've been using var tinycolor = require('tinycolor2'); in other files. Let's stay consistent.
There was a problem hiding this comment.
Ahhh whoops - there's a few places with var tc = tinycolor('rgb(1,2,3)'); that I was head-referencing.
There was a problem hiding this comment.
Yeah, you're right:
var tinycolor = require('tinycolor2'); is the winner by a big margin though:"
Wanna change the other var tc too?
There was a problem hiding this comment.
scratch that comment ⏫
those var tc refer to tinycolor output, not ref to the tinycolor module. No change require.
|
💃 after that 1 🐄 |
The d3 color interpolation only supports rgb and not rgba, but we can use d3's object interpolation, to go between channel values for colors and fairly cleanly get opacity support on colorscales.