-
Notifications
You must be signed in to change notification settings - Fork 185
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
Themes #630
Comments
Would love to help work on this however I can! |
The new axis mark #1197 will help with this, for example you could have a ggplot2 theme #1197 (comment). |
Also relevant: https://observablehq.com/@observablehq/custom-plot-themes |
Here's a handy response from Mike on the user forum: |
As a Plot user, that feature would be very useful! Here is also another R package that was relevant to style graphs from a former Airbnb DS - https://github.com/ricardo-bion/ggtech |
Textures #903 |
I like Mike’s nice It gets trickier when you want to set a default theme across many plots. One can also imagine wanting to set default categorical/sequential/diverging color schemes, etc. Maybe there could be something like
which would return a new instance of Plot with those defaults? There’d be various difficulties. What’s that object syntax? (Note that I abused the color scheme option.) To name your version Plot in a notebook, would you have to do something like
|
Yes, exactly Toph. On Observable, my hope is that you can configure Plot for your workspace and it automatically applies the theme to notebooks in your workspace without you having to edit them. And likewise in vanilla JavaScript, you could call |
Projections! (suggested in #1111) |
What about projections, @Fil? Not sure how this is related to themes. |
In that comment I wanted a mechanism to add a few named projections to my "themed" or personalized Plot, similarly to the way we'll be able to add (or modify) color themes. Once we have a theming mechanism in place it will seem natural to want to extend it (progressively) to other hard-coded lists of named option values. Even more so if it's called "defaults" and not "theme". |
Stumbled across this while trying to adjust my observable colors to my themes. What about adding a new scheme for categorical color space along the following, using css variables: export default [
'var(--plot-color-0)',
'var(--plot-color-1)',
'var(--plot-color-2)',
'var(--plot-color-3)',
'var(--plot-color-4)',
'var(--plot-color-5)',
'var(--plot-color-6)',
'var(--plot-color-7)',
'var(--plot-color-8)',
'var(--plot-color-9)',
] It would then be the consumer responsibility to set relevant colors - we could provide a helper so that it uses Happy to provide a PR if that makes sense |
@christophe-g I like the idea of this virtual color scheme, but unfortunately I think this can't be the default because for the raster mark we need to convert the css colors into materialized RGB colors. |
Merci Fil,
I guess you are referring to Line 145 in 7e09c31
I think this type of virtual color scheme should only be applied/available for categorical data, not for continuous scales. I am thinking of this approach as a generalization of In theory, when color processing is required (like compute rgb from a real color and not a css variable), it should be possible to infer the value of the css variable in a given context though: // Get the root element - the problem is that this is not going to work well with shadow-dom,
// you would need the root of the web-component for which css variables are defined.
const root = document.documentElement;
const style = getComputedStyle(root);
const color0 = style.getPropertyValue('--plot-color-0'); |
This would work in many cases, but it's tricky to do generically. It's possible to use categorical colors in the raster mark, and we can't know in advance where in the DOM the chart might be appended. (Also, the materialized values for a variable might change with time, for example when entering dark mode.) But outside of this caveat, it seems quite useful to have as a categorical palette. |
To support different styles, we could create a set of plot themes (e.g.,
dark
,light
, etc.). As a comparison, theggthemes
package has default styles to emulate popular styles like the Wallstreet Journal, FiveThirtyEight, etc.Perhaps a simple approach would be to define a set of styles in
Plot.themes
that could be set as thestyle
property in a Plot:Where
Plot.themes.dark
has a set of key/value pairs describing the style:{background: "black", color: "white",...}
The text was updated successfully, but these errors were encountered: