Xkcd style graphs | Hacker News Reader

Xkcd style graphs

mathematica.stackexchange.com

585 pointsbussetta51 comments

For people like me who would like to make PDF-reports with this kind of graph-style without resorting to Mathematica, take a look at this TeX-solution[1]. It utilizes the random step-decoration in Tikz to achieve a similar result.

[1]: http://tex.stackexchange.com/questions/74878/create-xkcd-sty...

There's always the xkcd technique to get an xkcd-like graph that looks like it was drawn by hand: draw it by hand.

By "by hand". I assume you mean using some sort of Intuos tablet with various pen and brush tips and some sort of curve-smoothing software so you can trace over the output of GNUplot, yes?

Unless he's changed his ways, I thought xkcd was still drawn by pencil and paper, then outlined with pen, scanned in, then touched up via a paint program?

If by curve-smoothing you mean, "creating a new layer in photoshop on top of the original and trying to draw as carefully as possible".

Plus, he obviously only uses a 'pen' style brush.

Indeed. Using a math package seems like cheating, somehow.

Probably faster to code it than to learn to draw

This question reminds me of the work Microsoft Research developed to automatically create 'hand drawn' maps for Bing. The process relies on four steps: data selection, data simplication, layout and decoration. The tool seems to be offline now, but when I tried it, it worked well for simple direction sets, but like the charts problem, it sometimes needed human curation to ensure that the selection and simplification steps were meaningful.

Details: http://research.microsoft.com/en-us/news/features/destinatio...

Example: http://research.microsoft.com/en-us/um/people/kopf/destinati...

Hang on people... The whole 'Randall Rocks/cool factor' aside, let us not forget the purpose of information visualisation.

I don't see much discussion about the ability of these charts to condense large amounts of data into compact spaces. No mention of these devices ability to encode a concept into a visual experience... Not to put too fine a point to it but... What Would Edward Tufte Say?

A "hand-drawn" plot compared to pixel-perfect one communicates an important message that error-bars are unknown and a model the plot is based on might be wrong. It stresses the plot is qualitative: a general shape of curves might be right and numbers might have correct order of magnitude — nothing more.

I'll allow it.

...good point, like to see more of this type of comment in this thread.

Sounds like what you are saying is along the lines of (paraphrasing here) almost correct as opposed to precisely inaccurate.

I hope others will add more along the same lines.

I think it is very simple. Hand drawn charts are easier and more pleasant to read^, because they are familiar. Everyone had drawn and seen a large number of such charts at school. Comfort food really.

^Not necessarily correlates with information retention.

Where I could really enjoy this is in the context of textbooks and tutorials. Sometimes a hand-drawn figure is able to convey an abstract idea much more clearly. When I see figures representing manifolds (e.g. the many figures in Roger Penrose's Road To Reality), it's easier for my mind to understand them as abstract notions rather than 2-d geometric entities on the page.

The problem is that good hand-drawn figures are hard - xkcd just makes it look easy.

So awesome work!

I agree. I had once started off to make such an application. A virtual pen-and-paper, whiteboard-and-marker. Also, instead of using mouse pointer, one could draw on the touchpad. There is a subtle difference, but one that could make drawing less awkward.

A similar application is awwapp.com

Someone needs to make a JavaScript graphing library that looks like that; I'd definitely use it :).

Spent a bit of time working on a d3js version. It's super ugly because I just hacked it together while learning how d3js works; I'm sure someone will come along and do it much better ;)

http://bl.ocks.org/3815828

Nice updates! Riffing some on what you put up, I forked and added the font and a white background line to make a gap when the lines overlap

http://bl.ocks.org/3818779

Looks good, I like how you added the style to the axis, nice touch. I did something similar but without the axis

I imagine it's only a matter of time before Mr Bostock catches on to this and creates an example: http://bl.ocks.org/mbostock.

d3.js should probably have you covered.

d3.geo has most of these projections now, as a start: http://xkcd.com/977/

http://bl.ocks.org/3764187 http://bl.ocks.org/3739752

Haha, maybe if I have time! It might make a fun custom line interpolator, one of the features added in 2.10: http://bl.ocks.org/3310323

Can somebody squiggle the fonts too??

Such lib is not hard to write. Somewhat limiting but simple version could just be a Canvas API wrapper that breaks down lines and curves into smaller lines then jiggle the points randomly before rendering the points out using Catmull-Rom to Bezier spline conversion.

Complicated part is in intelligent fragmentation and jiggling based on hand velocity and hand muscle modeling but it's pretty easy to get decent result. Another technique to combine this with is drawing each path more than once but, like bold fonts, result is not as generally useful.

I wrote up a quick example using d3, adding some jitter to the graph line gives it the hand-drawn look, plus used a font from the xkcd forums

http://bl.ocks.org/3816112

Not a library, and not for graphing, but somewhat inspirational: http://hakim.se/experiments/html5/sketch/

It isn't in the same style as Xkcd graphs, but the OmniGraphSketcher program lets you hand draw graphs like that, without data.

http://www.omnigroup.com/products/omnigraphsketcher/overview...

> lets you hand draw graphs (...) without data

If this ever gets popular, I think we'll be in trouble.

Working as an animator, we found that a pretty good way to mimic wobbly lines like this was to use a 2d fractal as displacement map. Does anyone know of any algorithms for 2d displacement? Would be quite fun to port it javascript

Would love to see implementations of this for R or anything else that isn't Mathematica.

An online tool would be awesome.... :)

http://stackoverflow.com/questions/12675147/xkcd-style-graph...

and Matplotlib.

I often find a need to have "mockup" graphs that actually are easy to produce from real data, packaging this up seems like a win for me.

One for the backburner list.

Would it be possible to do something like this in Wolfram Alpha? I'm not sure how complicated you can make the input there, but it's using the same Mathematica engine, so I imagine it's possible somehow...

In the works...

you might be able to find an image process that resembles the one used on the page

http://www.wolframalpha.com/examples/ImageProcessing.html

how about using gimp effects rather than a programmatic solutions. For example. Animation -> Rippling.

http://postimage.org/image/5ki873h2v/

That's definitely an easy way to do it. it's got too much of a wave feeling to it, though. You can tell that it was applied globally.

Just select and split off all the text to a new layer, then apply the distortion to the plot layer and not the text.

> Any tips on how one can create xkcd-style graphs? Where things look hand-drawn and imprecise.

Umm, draw them by hand? I don't want to seem to be stating the obvious, but ...

Options:

* Take some fine-point felt pens, draw the chart on paper, and scan it.

* Use a drawing program that has a freehand option, a mode where you can sketch using a mouse or other pointing device.

* Take an art course, fail the course, but succeed in getting the requisite materials.

I dream of the day we can do this in javascript... it'd be the coolest graphing library, in the world!

I'm not used to Mathematica and before I spend some time deciphering this: Are they distorting the whole image, or picking parts of it? It kinda looks like the former, which exaggerates some parts a bit, compared to xkcd.

The first solution (Chris) first defines a function that takes a pure function and makes it wiggle, then goes on to draw the graphic elements of the plot (axes, legend, the curve). This way everything is still a fully symbolic graphic object and can be exported as pdf.

The second solution (Simon wood) uses rasterzation and image processing to do the trick, thus losing vector data.

So.. What exactly does the author of xkcd use? Is it a secret or something?

I assume Randall draws them by hand. The humor / inventiveness of this question consists of trying to replicate the hand-drawn style using code.

He doesn't specifically talk about graphs, but he says his usual workflow is sketch in pencil, then draw, then scan and postprocess:

http://www.maa.org/Mathhorizons/MH-Sep2012_XKCD.html

Your move, Mr. Munroe...

#creative

I like this idea, but the results have what I would say is "very low momentum" in them (not speaking with any kind of terminology here, just ad hoc) meaning that just as when you write L E T T E R S e..x..t..r..e...m...e...l...y... s--l---o---w---l---y you get much more wiggle in them, the two images on this page are very very wavy, as though the pen that drew them had no momentum.

isn't there a way to have lines be drawn by a hand that has inertia/momentum and is trying to follow the logical curve, but just wavers a certain percentage and correct as it goes along? This is what gets (in my opinion) the result we see. Someone drawing at a good pace by hand and correcting while he does so. not a "random deviation" around the logical path, whch is what these results seem to be more like.

Why do you put #creative on every comment?

only a few, as i explain in one of them. some of my other comments if they are extremely technical and analytical might instead contain a rational tag :)

Have you considered using two accounts instead?

Just a note that a lot of people find my tagging annoying. I will think of another solution.

Reply on news.ycombinator.com