TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Xkcd style graphs

585 pointsby bussettaover 12 years ago

18 comments

JeanPierreover 12 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.<p>[1]: <a href="http://tex.stackexchange.com/questions/74878/create-xkcd-style-diagram-in-tex" rel="nofollow">http://tex.stackexchange.com/questions/74878/create-xkcd-sty...</a>
ctdonathover 12 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.
评论 #4598482 未加载
评论 #4600429 未加载
rhplusover 12 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.<p>Details: <a href="http://research.microsoft.com/en-us/news/features/destinationmaps-012510.aspx" rel="nofollow">http://research.microsoft.com/en-us/news/features/destinatio...</a><p>Example: <a href="http://research.microsoft.com/en-us/um/people/kopf/destination_maps/results/html/map_007.html" rel="nofollow">http://research.microsoft.com/en-us/um/people/kopf/destinati...</a>
mark_integerdsvover 12 years ago
Hang on people... The whole 'Randall Rocks/cool factor' aside, let us not forget the purpose of information visualisation.<p>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?
评论 #4600795 未加载
评论 #4601181 未加载
kevinalexbrownover 12 years ago
Where I could <i>really</i> 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.<p>The problem is that good hand-drawn figures are <i>hard</i> - xkcd just makes it look easy.<p>So awesome work!
评论 #4600955 未加载
TeMPOraLover 12 years ago
Someone needs to make a JavaScript graphing library that looks like that; I'd definitely use it :).
评论 #4600383 未加载
评论 #4598417 未加载
评论 #4601180 未加载
评论 #4600604 未加载
评论 #4599147 未加载
cschmidtover 12 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.<p><a href="http://www.omnigroup.com/products/omnigraphsketcher/overview/" rel="nofollow">http://www.omnigroup.com/products/omnigraphsketcher/overview...</a>
评论 #4599130 未加载
campbellmorganover 12 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
TomAnthonyover 12 years ago
Would love to see implementations of this for R or anything else that isn't Mathematica.<p>An online tool would be awesome.... :)
评论 #4598337 未加载
评论 #4598326 未加载
lifeisstillgoodover 12 years ago
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.<p>One for the backburner list.
jazzychadover 12 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...
评论 #4599213 未加载
评论 #4605592 未加载
periferralover 12 years ago
how about using gimp effects rather than a programmatic solutions. For example. Animation -&#62; Rippling.<p><a href="http://postimage.org/image/5ki873h2v/" rel="nofollow">http://postimage.org/image/5ki873h2v/</a>
评论 #4598609 未加载
lutuspover 12 years ago
&#62; <i>Any tips on how one can create xkcd-style graphs? Where things look hand-drawn and imprecise.</i><p>Umm, draw them by hand? I don't want to seem to be stating the obvious, but ...<p>Options:<p>* Take some fine-point felt pens, draw the chart on paper, and scan it.<p>* Use a drawing program that has a freehand option, a mode where you can sketch using a mouse or other pointing device.<p>* Take an art course, fail the course, but succeed in getting the requisite materials.
borgchickover 12 years ago
I dream of the day we can do this in javascript... it'd be the coolest graphing library, in the world!
mhdover 12 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.
评论 #4599270 未加载
johnmmurrayover 12 years ago
So.. What <i>exactly</i> does the author of xkcd use? Is it a secret or something?
评论 #4600344 未加载
rockylealover 12 years ago
Your move, Mr. Munroe...
its_so_onover 12 years ago
#creative<p>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.<p>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.
评论 #4600273 未加载
评论 #4601068 未加载