search

observablehq / plot

A concise API for exploratory data visualization implementing a layered grammar of graphics
https://observablehq.com/plot/
ISC License
4.25k stars 173 forks source link

Color gradients? #185

Open mbostock opened 3 years ago

mbostock commented 3 years ago

It’d be nice to have a way to specify a color gradient, presumably spanning the chart area in either x or y, with some given color stops.

mbostock commented 2 years ago

Gradients on links, bars, and rects would also be lovely to indicate direction, as here:

Screen Shot 2022-01-07 at 4 19 30 PM

Fil commented 2 years ago

related: #362

Fil commented 2 years ago

may be fixed by #700 (it doesn't allow the gradients to be based on the data, but we can't realistically cover every use case: if one needs to compute gradients from data, there is still room to do it with vanilla JS or D3 (?))

mbostock commented 2 years ago

Pretty close, but it would be much nicer if you could express inline syntax for a gradient rather than having to create the linearGradient element in SVG. I think we could do this by writing a CSS parser for the linear-gradient function. This would create a linearGradient element under the hood with a dynamic id.

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()