Comments (5)
I’ve added color.copy which uses Object.assign internally:
function color_copy(channels) {
return Object.assign(new this.constructor, this, channels);
}
It’s not quite as fancy as the above examples, but you can easily derive a copy of a color with a different opacity as color.copy({opacity: 0.2})
.
from d3-color.
Very cool idea! I've come across a need for such a thing when desiring the fill and stroke colors both to be data-driven, but having the fill more opaque than the stroke for a nice "popping" effect.
FWIW, I have been using the following CSS technique to accomplish this:
.mark {
fill: currentColor;
stroke: currentColor;
fill-opacity: 0.3;
}
I learned only recently about the currentColor
CSS keyword (HT @seemantk), which will use the value of the color
attribute, so you can compute the colors only once with selection.attr("color", ...)
.
Here's an example: Popping Effect.
from d3-color.
In the spirit of brighter()
/darker()
, would it make sense to also have a corresponding method that ups the opacity? (I have no idea what a good verb for "make more opaque" would be)
Alternatively, a single function that takes a factor that multiplies the current opacity:
e.g. color.opacitize(factor)
≈ color.opacity = Math.max(0, Math.min(1, color.opacity * factor))
from d3-color.
Perhaps we could have an operator that can apply generically to any channel, including opacity. For example, here’s how you might implement rgb.brighter followed by color.fade:
const blue = rgb("steelblue")
.withR(r => r / 0.7)
.withG(g => g / 0.7)
.withB(b => b / 0.7)
.withOpacity(o => o - 0.2);
The idea is that the with methods can take either a function or a constant; if a constant, the channel adopts the specified value; if a function, the function is passed the current value, and returns the new value. Here’s another example of “brighter” by converting to Lab:
const blue = lab(rgb("steelblue"))
.withL(l => l + 18)
.rgb();
Of course, that’s still quite a bit more verbose than color.brighter. And I wonder if you’d want an operation to modify multiple channels simultaneously. Like, I dunno…
const blue = rgb("steelblue")
.call(c => rgb(c.r / 0.7, c.g / 0.7, c.b / 0.7, c.opacity - 0.2));
If there were also a generic d3.brighter function that takes a color and returns a brighter color, you could say:
const blue = rgb("steelblue")
.call(brighter);
You could also easily convert between color spaces while chaining:
const blue = rgb("steelblue")
.call(lab)
.call(c => lab(c.l + 20, c.a, c.b, c.opacity))
.call(rgb);
from d3-color.
d3.saturate() / desaturate() would be a useful complement.
there is a version of saturate in https://observablehq.com/@mbostock/working-with-color#saturate
Re: withR/withL, I like the idea, but not much a fan of the syntax.
from d3-color.
Related Issues (20)
- d3.rgb doesn't parse HSL hues with `deg` units HOT 1
- Changing color.s changes luminosity and color.l saturation.
- Security vulnerability fix for d3-color required in version 2.x HOT 7
- Security vulnerability fix for d3-color nice-to-have in version 1.x HOT 4
- Unexpected token 'export' while update from 2.x.x to 3.x.x HOT 2
- Why d3 uses illuminant D50 instead of D65? HOT 1
- d3.hsl doesnt seem to work with grey scale values HOT 2
- Alpha value of 0 breaks rgb HOT 1
- Add formatHex8() to include opacity HOT 7
- Brightening black in RGB HOT 3
- bug: hue is NaN when convert hsl HOT 2
- Unexpected conversion to HSL
- Incorrect conversion from HCL / LCH to hex or rgb HOT 2
- oklab / oklch? HOT 8
- More exports. HOT 9
- Doesn't work - color is not defined HOT 1
- Does the Common JS version of the module work? HOT 1
- Supporting CSS color level 4 HOT 3
- Avoid catastrophic backtracking when parsing HOT 11
- formatHex with alpha channel HOT 1
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 d3-color.