plot icon indicating copy to clipboard operation
plot copied to clipboard

Themes

Open mkfreeman opened this issue 3 years ago • 16 comments

To support different styles, we could create a set of plot themes (e.g., dark, light, etc.). As a comparison, the ggthemes 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 the style property in a Plot:

Plot.plot({
    style: Plot.themes.dark
})

Where Plot.themes.dark has a set of key/value pairs describing the style: {background: "black", color: "white",...}

mkfreeman avatar Dec 22 '21 14:12 mkfreeman

related: #6 #7 #114 #253 #397 #662

Fil avatar Dec 22 '21 15:12 Fil

Would love to help work on this however I can!

awiederkehr avatar Apr 26 '22 15:04 awiederkehr

The new axis mark #1197 will help with this, for example you could have a ggplot2 theme https://github.com/observablehq/plot/pull/1197#issuecomment-1364573933.

mbostock avatar Dec 31 '22 18:12 mbostock

Also relevant: https://observablehq.com/@observablehq/custom-plot-themes

Fil avatar Mar 28 '23 11:03 Fil

Here's a handy response from Mike on the user forum: https://talk.observablehq.com/t/set-global-plot-defaults-for-observable-plot/7797/3

Fil avatar Mar 29 '23 12:03 Fil

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

martindaniel4 avatar Jun 21 '23 14:06 martindaniel4

Textures #903

Fil avatar Aug 02 '23 16:08 Fil

I like Mike’s nice style: Plot.themes.dark suggestion. And it could be prototyped as an ongoing notebook.

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

Plot.defaults({
  style: Plot.themes.dark,
  color: {scheme: {sequential: "blues"}}
})

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 Plot = (await require("@observablehq/plot")).defaults({style: Plot.themes.dark}), or could you take advantage of the built-in Plot?

  • https://ggplot2.tidyverse.org/reference/theme_get.html
  • https://vega.github.io/vega-lite/docs/config.html
  • For the Observable context, also related to the idea of custom stdlibs

tophtucker avatar Aug 12 '23 21:08 tophtucker

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 export default Plot.defaults(…) or whatever and import that instead of Plot.

mbostock avatar Aug 13 '23 02:08 mbostock

Projections! (suggested in #1111)

Fil avatar Aug 22 '23 15:08 Fil

Projections!

What about projections, @Fil? Not sure how this is related to themes.

mbostock avatar Aug 22 '23 16:08 mbostock

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".

Fil avatar Aug 22 '23 20:08 Fil