For general SVG "sketchy" effect, Rough.js is a very cool library: <a href="https://roughjs.com/" rel="nofollow">https://roughjs.com/</a> <a href="https://github.com/pshihn/rough/" rel="nofollow">https://github.com/pshihn/rough/</a><p><a href="https://roughjs.com/examples/bar-chart.html" rel="nofollow">https://roughjs.com/examples/bar-chart.html</a> is an example of a bar chart built up with D3<p><a href="https://news.ycombinator.com/item?id=16571827" rel="nofollow">https://news.ycombinator.com/item?id=16571827</a> was the discussion when it was first submitted
Hi, HN, thanks for the upvotes. I am the author of this lib.<p>What I want is a chart library with simple API like chart.js but in hand-drawn effect. I find there is no such lib, so I created this one. Thanks for trying it out.<p>Previous discussions about xkcd styled charts:<p>- xkcd styled charts in matplotlib: <a href="https://news.ycombinator.com/item?id=19293129" rel="nofollow">https://news.ycombinator.com/item?id=19293129</a><p>- simple line graph in d3: <a href="https://news.ycombinator.com/item?id=4671676" rel="nofollow">https://news.ycombinator.com/item?id=4671676</a><p>- disscussions on stackexchange: <a href="https://mathematica.stackexchange.com/questions/11350/xkcd-style-plots" rel="nofollow">https://mathematica.stackexchange.com/questions/11350/xkcd-s...</a><p>- why are xkcd styled graph important: <a href="https://news.ycombinator.com/item?id=7511762" rel="nofollow">https://news.ycombinator.com/item?id=7511762</a>
Almost 1 MB of JavaScript transferred to render a single chart? I am afraid that is not acceptable. I mean no disrespect whatsoever to the author of the library, but sending that amount of JS for a single component is just outside of any reasonable performance budget.<p>That being said, a server-side or build-step tool that generates lean SVG code? Yes, please.
Matplotlib has this too!<p><a href="https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.xkcd.html" rel="nofollow">https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.x...</a>
There’s also a D3 version already that also has a hosted version:<p><a href="http://xkcdgraphs.com/" rel="nofollow">http://xkcdgraphs.com/</a>
I see how to provide the Y axis data for the labels but is there a way to use X labels like 1 2 3 but then provide (X,Y) coords for minima and maxima [(1.1, 3.2), (4.8, 7.5), (6.3, 2.4), (8.2, 7.3)] and get a curve?
Also an R package exists to do this on top of ggplot2:
<a href="http://xkcd.r-forge.r-project.org/" rel="nofollow">http://xkcd.r-forge.r-project.org/</a>
I love this, for the reasons laid out in this article (which I always back to):<p><a href="https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graphs_are_important.html" rel="nofollow">https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...</a>