Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Chart.xkcd – Xkcd-styled chart library (github.com)
435 points by timqian 27 days ago | hide | past | web | favorite | 41 comments

For general SVG "sketchy" effect, Rough.js is a very cool library: https://roughjs.com/ https://github.com/pshihn/rough/

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 was the discussion when it was first submitted

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

- simple line graph in d3: https://news.ycombinator.com/item?id=4671676

- disscussions on stackexchange: https://mathematica.stackexchange.com/questions/11350/xkcd-s...

- why are xkcd styled graph important: https://news.ycombinator.com/item?id=7511762

Thanks @timqian--really like the look of this and the examples cracked me up--esp.: "Monthly income of an indie developer".

I'd 2nd the comments below on Safari & size--ultimately I'm excited about using this in some mobile projects we're planning.

Ah, you've linked to the HN thread for https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph... — I just went looking for this. I always think of this post when the subject of charts is brought up.

It also help develop my way of thinking with regard to the precision of units in estimations, e.g. going 24 hours over a 72 hour deadline is interpreted as bad, but going 1 day over a 3 day deadline isn't interpreted as nearly as bad. It's about precision and how it informs ones beliefs.

The github page doesn't have the license?

it is MIT, I have added it to the repo

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

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

The package.json file indicates that it’s under the MIT license. I wonder if that’s enough though.

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

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

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

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.

Author here, thanks for mentioning about this issue here. The lib size is over 400kb because I imported the whole d3 lib into it, but actually only using small fraction of it. I will optimize the size later. server side rendering/svg generator is also a good idea, thanks for the suggestion

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

Great job!

Acceptable to whom?

The general public.

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

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


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

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.

Any chance for directed graph support? Basically nothing does them out-of-box/batteries-included even remotely nice-looking but they're very useful to represent quite a few concepts.

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?

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

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

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

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


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

This is super cool! Amazing work.

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


What is the license of the library?

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

Claims MIT[1] but a copy of the licence text should be included for this to be valid.

[1] https://github.com/timqian/chart.xkcd/blob/master/package.js...

beautiful, starred.

Really nice

isn't comic sans the xkcd font?

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

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

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.

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?

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

Applications are open for YC Winter 2020

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact