
Show HN: Chart.xkcd – Xkcd-styled chart library - timqian
https://github.com/timqian/chart.xkcd
======
sheetjs
For general SVG "sketchy" effect, Rough.js is a very cool library:
[https://roughjs.com/](https://roughjs.com/)
[https://github.com/pshihn/rough/](https://github.com/pshihn/rough/)

[https://roughjs.com/examples/bar-
chart.html](https://roughjs.com/examples/bar-chart.html) is an example of a
bar chart built up with D3

[https://news.ycombinator.com/item?id=16571827](https://news.ycombinator.com/item?id=16571827)
was the discussion when it was first submitted

------
timqian
Hi, HN, thanks for the upvotes. I am the author of this lib.

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.

Previous discussions about xkcd styled charts:

\- xkcd styled charts in matplotlib:
[https://news.ycombinator.com/item?id=19293129](https://news.ycombinator.com/item?id=19293129)

\- simple line graph in d3:
[https://news.ycombinator.com/item?id=4671676](https://news.ycombinator.com/item?id=4671676)

\- disscussions on stackexchange:
[https://mathematica.stackexchange.com/questions/11350/xkcd-s...](https://mathematica.stackexchange.com/questions/11350/xkcd-
style-plots)

\- why are xkcd styled graph important:
[https://news.ycombinator.com/item?id=7511762](https://news.ycombinator.com/item?id=7511762)

~~~
cogburnd02
The github page doesn't have the license?

~~~
timqian
it is MIT, I have added it to the repo

~~~
app4soft
Seems like merging `xkcd-script.ttf`[0] directly into `chart.xkcd` repository
may violate `xkcd-font` licensing.[1]

 _CC-SA-NC_ -licensed thing could not be merged into _MIT_ -licensed thing.

[0] [https://github.com/ipython/xkcd-font/blob/master/xkcd-
script...](https://github.com/ipython/xkcd-font/blob/master/xkcd-
script/font/xkcd-script.ttf)

[1] [https://github.com/ipython/xkcd-
font/blob/master/LICENSE](https://github.com/ipython/xkcd-
font/blob/master/LICENSE)

------
yoz-y
Looks cool! On safari in Codepen it does not render any lines though, only
text is visible.

~~~
timqian
Thanks, I did not test it on safari, will look into this issue later

~~~
keyadams
Same in chrome on iPhone. I love this library btw, good job! :)

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

That being said, a server-side or build-step tool that generates lean SVG
code? Yes, please.

~~~
timqian
Updates: the total js file is around 66KB now
[https://github.com/timqian/chart.xkcd/pull/7](https://github.com/timqian/chart.xkcd/pull/7)

~~~
SimeVidas
Great job!

------
risubramanian
Matplotlib has this too!

[https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.x...](https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.xkcd.html)

~~~
madsohm
I never could this to work, when I was doing research papers.

------
dewey
There’s also a D3 version already that also has a hosted version:

[http://xkcdgraphs.com/](http://xkcdgraphs.com/)

~~~
timqian
Yeah, this page motivated me a lot. But it has limitations

\- it only creates img, no interaction(tooltip)

\- only support line chart

What I want is a chart library like chart.js or echart but with xkcd style. So
I created this tool

~~~
KaoruAoiShiho
Great comment thanks. The #1 thing I like the most whenever a new library pops
up is when the advocates aggressively compare it to the alternatives. Usually
they are too polite to do so and as a result leaves me confused on why they
even exist.

------
yubiox
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?

~~~
timqian
This is on my plan, should be done in next release(within several days), you
can watch the repo to get notification about it

------
samch93
Also an R package exists to do this on top of ggplot2:
[http://xkcd.r-forge.r-project.org/](http://xkcd.r-forge.r-project.org/)

------
DangerousPie
Looks nice but why create a whole new plotting library for this rather than
adding it to one of the existing ones (eg. Chart.js)?

~~~
timqian
Thanks to d3, creating a new plotting library is not so hard

[https://github.com/d3/d3-shape](https://github.com/d3/d3-shape)

You can regard this library as adding styles to d3 instead of chart.js

------
askosh
This is super cool! Amazing work.

------
imdsm
I love this, for the reasons laid out in this article (which I always back
to):

[https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...](https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graphs_are_important.html)

------
dedosk
What is the license of the library?

~~~
timqian
it is MIT, I will add it in the repo soon

------
surajs
beautiful, starred.

------
dintech
Really nice

------
bythckr
isn't comic sans the xkcd font?

------
JulianMorrison
Turning something witty/insightful into an automated cliche is not an
improvement.

~~~
timqian
From a usability perspective, "sketchy" or "cartoony" charts actually serve a
purpose. To me, they communicate "the trend is important here, not the precise
numbers". This can more acurately convey communication intent as opposed to a
precise rendered graph.

\--- @sharpercoder
[https://news.ycombinator.com/item?id=19293713](https://news.ycombinator.com/item?id=19293713)

~~~
Lucadg
I agree. It's the same approach with sketchy mockups for web pages. It tells
you unequivocally that you should not focus on the design itself. I find it
very powerful.

~~~
ModernMech
Still, wouldn't it be better just to draw it by hand and store it in an svg
rather than bring in a huge dependency?

~~~
Lucadg
I guess it depends on each case. I'm sure in many cases by hand would be a
better way

