Xkcd style graphs

http://mathematica.stackexchange.com/questions/11350/xkcd-style-graphs

by bussetta • 14 years ago

585 51 14 years ago

mathematica.stackexchange.com

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.

TomAnthony• 14 years ago

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

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

7952• 14 years ago

and Matplotlib.

jotux• 14 years ago

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

TeMPOraL2• 14 years ago

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

kmfrk• 14 years ago

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.

oscilloscope• 14 years ago

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

mbostock• 14 years ago

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

kfk• 14 years ago

Can somebody squiggle the fonts too??

munaf• 14 years ago

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

avolcano• 14 years ago

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

marcuskaz3• 14 years ago

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

marcuskaz3• 14 years ago

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

marcuskaz3• 14 years ago

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

donpark• 14 years ago

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.

JeanPierre• 14 years ago

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

ctdonath• 14 years ago

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

jaylevitt• 14 years ago

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?

phillmv• 14 years ago

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.

hkmurakami• 14 years ago

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?

greyfade• 14 years ago

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

89a• 14 years ago

Probably faster to code it than to learn to draw

rockyleal• 14 years ago

Your move, Mr. Munroe...

periferral• 14 years ago

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

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

RobotCaleb• 14 years ago

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.

cdawzrd• 14 years ago

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

cschmidt• 14 years ago

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

TeMPOraL2• 14 years ago

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

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

jazzychad• 14 years ago

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

taliesinb• 14 years ago

In the works...

tonymarq• 14 years ago

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

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

campbellmorgan• 14 years ago

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

mhd• 14 years ago

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.

carlob• 14 years ago

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.

borgchick• 14 years ago

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

its_so_on3• 14 years ago

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

esrauch• 14 years ago

Why do you put #creative on every comment?

its_so_on3• 14 years ago

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

its_so_on3• 14 years ago

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

lutusp• 14 years ago

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

johnmmurray• 14 years ago

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

yolesaber• 14 years ago

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

lukeschlather• 14 years ago

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

kevinalexbrown• 14 years ago

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!

sherjilozair• 14 years ago

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

mark_integerdsv2• 14 years ago

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?

d0mine• 14 years ago

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.

mark_integerdsv2• 14 years ago

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.

dchichkov• 14 years ago

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.

rhplus• 14 years ago

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

Xkcd style graphs

Related Stories