Skip to content
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

xkcd theme #49

Open
g3o2 opened this issue Aug 31, 2019 · 9 comments
Open

xkcd theme #49

g3o2 opened this issue Aug 31, 2019 · 9 comments

Comments

@g3o2
Copy link

g3o2 commented Aug 31, 2019

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
Copy link
Author

g3o2 commented Aug 31, 2019

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

@g3o2
Copy link
Author

g3o2 commented Aug 31, 2019

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
Copy link
Member

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
Copy link
Author

g3o2 commented Aug 31, 2019

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
Copy link
Author

g3o2 commented Aug 31, 2019

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

@domoritz
Copy link
Member

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
Copy link
Author

g3o2 commented Aug 31, 2019

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
Copy link
Member

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants