XKCD-style charts with D3 | Hacker News Reader

XKCD-style charts with D3

dan.iel.fm

307 pointsidan32 comments

If I'm honest, the most impressive thing about this is how much less concise this is than the mathematica version that came out earlier. I wonder if the difference is more a matter of the library quality or the syntax.

On the other hand, IMO this looks exactly like an XKCD style graph while all the others (including the mathematica) seemed a little off to me.

I'd say, a little bit too much jitter, especially in text. Some of the versions for Mathematica, et al. were a little bit closer, IMO.

The text is just a matter of font. The rendering of the graphs look exactly like the original, and that's the hard part.

Edit: as pointed out below, the algorithm was lifted from another version done in Python/Matplotlib by Jake Vanderplas: http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-i...

The edit window is now closed, but I realised that the font he uses is Humor Sans, which is based on Randal Munroe's handwriting (the author of XKCD).

http://xkcdsucks.blogspot.com/2009/03/xkcdsucks-is-proud-to-...

I'd agree that the font is too much - it's bordering on illegible for me in Chrome 22 on Win 7.

It is badly hinted and thus badly anti-aliased.

Mathematica has higher level drawing functions.

D3 tends to be more roll your own.

D3js is pretty verbose, but what you get is full control. Most charting libraries allow only a limited amount of configurability, which is neat if you just need to plot a basic chart quickly, but makes them awful if you want to make novel (or at least, more uncommon) kinds of visualisations or make non-standard changes to existing ones.

The best thing about this is that it doesn't require me to download and install 1.8 gigabytes of life-sucking Mathematica demo-version just to get a graph that I can draw on a napkin in 4 or 5 seconds ..

It draws a nice sine wave http://so.danwin.com/test/xkcd-d3/

For comparison a version in Python/Matplotlib is at http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-i...

If you look in the source (http://bl.ocks.org/3914862) about 4/5 of the way down, they basically copy the core logic from Jake's Matplotlib version.

Nicely presented! And bl.ocks.org is also very clean (never heard of it before).

I would say this is the nicest result I've seen compared to Python, Mathematica, MATLAB.

You might also like its Markdown soul brother, http://gist.io/

It was created by http://bost.ocks.org/mike/ Mike Bostok. https://github.com/mbostock/bl.ocks.org is the site.

Well done! I actually was planning on tacking this one myself using svg filters but I've been too busy. I didn't see Mike Bostock's comment suggesting the custom line interpolator and wasn't aware of it -- d3 is gaining some cool new functionalities!

Thanks also for the great references. In spite of being a big proponent of d3, I somehow missed the "Toward Reusable Charts" piece Mike wrote earlier this year, which succeeds where I have struggled. I've been using the standard prototypal approach to creating reusable and easily configurable charts, which can be cumbersome for the caller. This functional approach with closures is so much cleaner and more reusable. It's the only way I'll make my d3 charts from now on!

If you want to play around with the example, I've stuck it on jsfiddle: http://jsfiddle.net/KndsL/2/

I still need to see a thorough rationalization for the use of this chart style.

Bonus points for using the Tufte 'lie factor' formula.

You want to covney that the graph is not based on measured numbers but only a rough sketch.

This thing looks amazing. I didn't want to fire up Mathematica to render these charts but I love D3. Thanks!

Now if we could only get D3-style animation in XKCD...

The graph is good, but I think I like the font more.

methinks: http://xkcdsucks.blogspot.it/2009/03/xkcdsucks-is-proud-to-p...

Can't you just use a tablet and DRAW the graph like it was hand-made?

I don't understand...

Writing code makes repetitive tasks easier: if you want to pump out hundreds or thousands or millions of variations on a graph (using different data, etc...) then drawing it by hand is infeasible.

What if the data changes every day?

ie: plotting the number of bugs fixed over time

For the same reason no one hand-codes the HTML on each individual Hacker News thread?

Took be a bit to realise this wasn't a Diablo 3 reference.

" // Compute the distance along the path using a map-reduce." lol

Negative awesomeness?? Uh-oh!

Okay, guys. We get it. Enough.

Reply on news.ycombinator.com