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.
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.
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
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?
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.
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.
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
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
I'd 2nd the comments below on Safari & size--ultimately I'm excited about using this in some mobile projects we're planning.
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.
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
That being said, a server-side or build-step tool that generates lean SVG code? Yes, please.
https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.x...
http://xkcdgraphs.com/
- 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
https://github.com/d3/d3-shape
You can regard this library as adding styles to d3 instead of chart.js
https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
[1] https://github.com/timqian/chart.xkcd/blob/master/package.js...
--- @sharpercoder https://news.ycombinator.com/item?id=19293713