Comments (12)
It's a nice implementation of color-legend
, but it is possible to use outside of Observable?
If so, what license does it have? Thanks!
from d3-axis.
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)?
from d3-axis.
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
from d3-axis.
https://observablehq.com/@d3/color-legend
from d3-axis.
Example usage:
var color = d3.scaleSequential(d3.interpolateRainbow);
var x = d3.scaleLinear().range([margin.left, width - margin.right]);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.rampHorizontal(x, color))
.call(d3.axisBottom(x));
Example output:
from d3-axis.
Questions:
-
Is “ramp” the right name? A swatch? A gradient? An image? A continuous color key? A sequential color key?
-
Do we need separate bottom- and top-orientations? What if you want to use d3.axisTop and have the ramp hang below the axis? (Likewise for vertical orientation.)
-
Is it helpful to have this primitive separate from the axis, or should we just combine the two? If we combined them, we could provide a default position scale with range [0, 320]… though unsure how useful that default would be.
-
Or should we go the other way, and just have a helper for creating the canvas data URL?
from d3-axis.
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]));
from d3-axis.
My thoughts..
- Out of those options, "Ramp" makes most sense to me in this situation, and is used in other applications I use
- Yes, I would think so. I would make sense to me to have similar options to axis (top/bottom/left/right)
- Separate
- Don't know
from d3-axis.
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.
from d3-axis.
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.
from d3-axis.
The visual legend is the color scale. #teamramp
from d3-axis.
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']))
from d3-axis.
Related Issues (20)
- Support external rendering HOT 3
- How to apply pan/zoom to rotated X Axis labels? HOT 1
- Default formatter shows month name instead of Sunday HOT 2
- Date boundary issue for months with 31 days HOT 1
- Suggestion: Add axisTop example HOT 1
- `axis.tickValues` could also return `values`? HOT 3
- Render in vanilla HTML? HOT 2
- Right-align tick text in axisRight() ? HOT 1
- 如何入参是空,那么链式调用将被破坏
- Show scale extrema values in ticks HOT 1
- More configuration options?
- Uncaught TypeError: setting getter-only property "top" when calling axis function HOT 5
- not able to add custom attributes to the axis HOT 1
- Ticks with varying size
- Ticks misalignment HOT 2
- An option to disable the domain line HOT 1
- An option to generate grid lines HOT 3
- Ability to use `d3.timeXXX` on a scaleBand HOT 8
- Ability to set axis ticks count when using axis `tickFormat` function HOT 6
- d3-axis does not update SVG attributes when switching between axis orientations HOT 3
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-axis.