HN Explorer

41 comments

[ 4.5 ms ] story [ 103 ms ] thread
dewey
There’s also a D3 version already that also has a hosted version:

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

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

- 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

cogburnd02
The github page doesn't have the license?
azastrael
The package.json file indicates that it’s under the MIT license. I wonder if that’s enough though.
imdsm
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.

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

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
askosh
This is super cool! Amazing work.
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! :)
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

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
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)?
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
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
bythckr
isn't comic sans the xkcd font?