-
Notifications
You must be signed in to change notification settings - Fork 108
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Color ramps? #41
Comments
Questions:
|
If we combined them: var color = d3.scaleSequential(d3.interpolateRainbow);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.rampHorizontal(color).range([margin.left, width - margin.right])); |
My thoughts..
|
We can’t internalize the position scale inside the ramp component if we wish to allow non-linear scales, which coincidentally is the motivation for this request (a key for a continuous, diverging log color scale). Also if we internalized the scale, we’d have to re-expose all the standard axis properties, such as for setting the tick values and tick format. That’s not too onerous I suppose but it would be nice to avoid. I think it’s still worth considering whether we want to pare down the abstraction a little further so that it just generates the data URL; that way it can be used either to create an SVG image element or an HTML img element. On the other hand there are still quite a few tedious steps required to create the SVG image element even given this data URL, and it feels reasonable to make it SVG-specific since it’s designed to work in conjunction with an axis. So… I think my answers are: (2) yes, four orientations; (3) separate, as originally proposed; (4) no. I’m not sure the name “ramp” is right because normally I think of that as referring to the color scale, rather than the key (or “guide” or “legend”) for said scale. |
I think key/legend/guide might imply that I could use ordinal colour scales, or sequential scales with bands. But I take your point re Ramp. |
The visual legend is the color scale. #teamramp |
Here's a tricky nit. Can we tween the canvas so transitions magically work? var ramp = function(scale) {
d3.rampHorizontal(scale).range([left, right])
}
svg.append("g")
.call(ramp(colorscale['RdBu']))
.transition()
.call(ramp(colorscale['PiYG'])) |
Is there any way this can be done with SVG gradients perhaps in addition to the Canvas-based approach? AFAIK, pushing an image element into SVG will break any workflow that necessarily requires using SVG Crowbar and importing the output into Illustrator (plus it admittedly just kinda feels yucky having rasters amongst a bunch of vector code)? |
I use this often: https://observablehq.com/@mbostock/color-ramp You can embed in SVG using canvas.toDataURL, e.g.: https://observablehq.com/@d3/hexbin-map |
It's a nice implementation of If so, what license does it have? Thanks! |
The text was updated successfully, but these errors were encountered: