vega / vega-themes

Themes for stylized Vega and Vega-Lite visualizations.
https://vega.github.io/vega-themes
BSD 3-Clause "New" or "Revised" License
128 stars 30 forks source link

xkcd theme #49

Open g3o2 opened 4 years ago

g3o2 commented 4 years ago

One key aspect of xkcd is probably the font and its size. Others include the aspect ratio.

As for the imprecise line drawing, I wonder which vega aspects need to be tapped into. The renderer maybe? Or some mark properties?

g3o2 commented 4 years ago

Here are some drawing library resources related to the subject: https://news.ycombinator.com/item?id=20734956

g3o2 commented 4 years ago

According to a short slack discussion:

"[...] the underlying magic comes from a few lines of svg to add pertubation filters with particular constants. I’ve played about with decorating Vega’s svg dom with the same, and it seems to work fine for simple cases."

domoritz commented 4 years ago

I doubt that we can draw sketchy lines this in Vega for both the svg and canvas renderer unless we add a new feature to Vega. For now, we would have to restrict the theme to the colors, sizes, and fonts.

g3o2 commented 4 years ago

I think the solution would be a jitter transform. At least from what i can tell that's what it is being used in the ggplot2 implementation of xkcd: https://stackoverflow.com/questions/12675147/how-can-we-make-xkcd-style-graphs

g3o2 commented 4 years ago

Or loess actually for lines. Anyhow, I agree that this "theme" is actually more than just a theme technically.

domoritz commented 4 years ago

I'm pretty sure that the core team won't have time to work on this so if you want this theme, you'd need to work on it. I feel the easiest way may be to generate an image and then run some filter on it afterward to make it look more sketchy. An alternative is a new flag in the renderer.

g3o2 commented 4 years ago

Thank you for your feedback @domoritz. I perfectly understand the resources issue. I've put the issue here because I think that this theme would help vega gain further traction.

As for development resources, I can contribute on the config/spec side, but unfortunately not on the programming side.

domoritz commented 4 years ago

Thank you. I think the themes we have started here also need some fine-tuning so I would be thrilled if you could help us make them better. In particular, the dark theme was only a proof of concept but could become more popular. The Vega-Editor now also has better integration of themes so I hope/think themes will become more popular.

Screen Shot 2019-08-31 at 3 30 58 PM

baptiste commented 3 years ago

I'm not familiar with the rendering pipeline but I imagine it'd be relatively straightforward to adapt SVG or canvas primitives to their roughjs equivalent. The theme would only need to specify a handwritten font on top of that.