
Xkcd style graphs - bussetta
http://mathematica.stackexchange.com/questions/11350/xkcd-style-graphs
======
JeanPierre
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...](http://tex.stackexchange.com/questions/74878/create-xkcd-style-
diagram-in-tex)

------
ctdonath
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
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?

~~~
hkmurakami
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?

------
rhplus
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...](http://research.microsoft.com/en-
us/news/features/destinationmaps-012510.aspx)

Example: [http://research.microsoft.com/en-
us/um/people/kopf/destinati...](http://research.microsoft.com/en-
us/um/people/kopf/destination_maps/results/html/map_007.html)

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

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

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

~~~
kmfrk
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
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>

------
cschmidt
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...](http://www.omnigroup.com/products/omnigraphsketcher/overview/)

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

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

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

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

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

~~~
jotux
[http://stackoverflow.com/questions/12675147/xkcd-style-
graph...](http://stackoverflow.com/questions/12675147/xkcd-style-graphs-in-r)

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

------
jazzychad
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
In the works...

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

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

~~~
RobotCaleb
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
Just select and split off all the text to a new layer, then apply the
distortion to the plot layer and not the text.

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

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

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

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

~~~
yolesaber
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
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>

------
rockyleal
Your move, Mr. Munroe...

------
its_so_on
#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
Why do you put #creative on every comment?

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

~~~
icebraining
Have you considered using two accounts instead?

