6 ms·
Show HN: Chart.xkcd – Xkcd-styled chart library
- dewey 7y agoThere’s also a D3 version already that also has a hosted version: http://xkcdgraphs.com/ http://xkcdgraphs.com/
- timqian 7y agoYeah, 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 7y agoGreat 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.
- Avamander 7y agoAny 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.
- risubramanian 7y agoMatplotlib has this too! https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.xkcd.html https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.x...
- madsohm 7y agoI never could this to work, when I was doing research papers.
- timqian 7y agoHi, 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-style-plots https://mathematica.stackexchange.com/questions/11350/xkcd-s... - why are xkcd styled graph important: https://news.ycombinator.com/item?id=7511762 https://news.ycombinator.com/item?id=7511762
- cogburnd02 7y agoThe github page doesn't have the license?
- azastrael 7y agoThe package.json file indicates that it’s under the MIT license. I wonder if that’s enough though.
- timqian 7y agoit is MIT, I have added it to the repo
- app4soft 7y agoSeems 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/font/xkcd-script.ttf https://github.com/ipython/xkcd-font/blob/master/xkcd-script... [1] https://github.com/ipython/xkcd-font/blob/master/LICENSE https://github.com/ipython/xkcd-font/blob/master/LICENSE
- imdsm 7y agoAh, you've linked to the HN thread for https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graphs_are_important.html 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.
- samch93 7y agoAlso 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/
- dedosk 7y agoWhat is the license of the library?
- yubiox 7y agoI 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 7y agoThis is on my plan, should be done in next release(within several days), you can watch the repo to get notification about it
- sheetjs 7y agoFor 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
- dintech 7y agoReally nice
- askosh 7y agoThis is super cool! Amazing work.
- surajs 7y agobeautiful, starred.
- yoz-y 7y agoLooks cool! On safari in Codepen it does not render any lines though, only text is visible.
- DangerousPie 7y agoLooks 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 7y agoThanks 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
- JulianMorrison 7y agoTurning something witty/insightful into an automated cliche is not an improvement.
- timqian 7y agoFrom 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 7y agoI 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 7y agoStill, 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 7y agoI guess it depends on each case. I'm sure in many cases by hand would be a better way
- imdsm 7y agoI love this, for the reasons laid out in this article (which I always back to): https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graphs_are_important.html https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
- SimeVidas 7y agoAlmost 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.
- wilsonrocks 7y agoAcceptable to whom?
- SimeVidas 7y agoThe general public.
- timqian 7y agoAuthor 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
- timqian 7y agoUpdates: 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 7y agoGreat job!
- bythckr 7y agoisn't comic sans the xkcd font?