7 ms·
Xkcd style graphs
- campbellmorgan 14y agoWorking 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 14y agoI'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 14y agoThe 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.
- lifeisstillgood 14y agoI 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 14y agoWould love to see implementations of this for R or anything else that isn't Mathematica. An online tool would be awesome.... :)
- TeMPOraL 14y agoSomeone needs to make a JavaScript graphing library that looks like that; I'd definitely use it :).
- munaf 14y agoNot a library, and not for graphing, but somewhat inspirational: http://hakim.se/experiments/html5/sketch/ http://hakim.se/experiments/html5/sketch/
- kmfrk 14y agoI imagine it's only a matter of time before Mr Bostock catches on to this and creates an example: http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock. d3.js should probably have you covered.
- oscilloscope 14y agod3.geo has most of these projections now, as a start: http://xkcd.com/977/ http://xkcd.com/977/ http://bl.ocks.org/3764187 http://bl.ocks.org/3764187 http://bl.ocks.org/3739752 http://bl.ocks.org/3739752
- mbostock 14y agoHaha, 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 http://bl.ocks.org/3310323
- kfk 14y agoCan somebody squiggle the fonts too??
- avolcano 14y agoSpent 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 http://bl.ocks.org/3815828
- 14y ago
- JeanPierre 14y agoFor 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-style-diagram-in-tex http://tex.stackexchange.com/questions/74878/create-xkcd-sty...
- ctdonath 14y agoThere's always the xkcd technique to get an xkcd-like graph that looks like it was drawn by hand: draw it by hand.
- jaylevitt 14y agoBy "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 14y agoIf 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.
- deleted 14y ago[deleted]
- hkmurakami 14y agoUnless 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 14y agoIndeed. Using a math package seems like cheating, somehow.
- 89a 14y agoProbably faster to code it than to learn to draw
- rockyleal 14y agoYour move, Mr. Munroe...
- periferral 14y agohow about using gimp effects rather than a programmatic solutions. For example. Animation -> Rippling. http://postimage.org/image/5ki873h2v/ http://postimage.org/image/5ki873h2v/
- RobotCaleb 14y agoThat'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 14y agoJust select and split off all the text to a new layer, then apply the distortion to the plot layer and not the text.
- cschmidt 14y agoIt 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 14y ago> lets you hand draw graphs (...) without data If this ever gets popular, I think we'll be in trouble.
- jazzychad 14y agoWould 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...
- borgchick 14y agoI dream of the day we can do this in javascript... it'd be the coolest graphing library, in the world!
- its_so_on 14y 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 14y agoWhy do you put #creative on every comment?
- its_so_on 14y agoonly 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 14y agoHave you considered using two accounts instead?
- its_so_on 14y agoI won't use two accounts because I'm a uniter, not a divider. I'd like each side to pay a lot of attention to the other, and I think they're wrong (actually worse than wrong) not to. The rational is worse than wrong not to pay more attention to the creative, and the creative is worse than wrong not to pay more attention to the rational.
- its_so_on 14y ago
- lutusp 14y 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 14y agoSo.. What exactly does the author of xkcd use? Is it a secret or something?
- yolesaber 14y agoI assume Randall draws them by hand. The humor / inventiveness of this question consists of trying to replicate the hand-drawn style using code.
- lukeschlather 14y agoHe 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 http://www.maa.org/Mathhorizons/MH-Sep2012_XKCD.html
- kevinalexbrown 14y agoWhere 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 14y agoI 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_integerdsv 14y agoHang 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 14y agoA "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 14y agoI'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 14y agoI 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 14y agoThis 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/destinationmaps-012510.aspx http://research.microsoft.com/en-us/news/features/destinatio... Example: http://research.microsoft.com/en-us/um/people/kopf/destination_maps/results/html/map_007.html http://research.microsoft.com/en-us/um/people/kopf/destinati...