XKCD-style charts with D3

http://dan.iel.fm/xkcd/

by idan • 14 years ago

307 32 14 years ago

dan.iel.fm

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.

zaptheimpaler• 14 years ago

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.

TeMPOraL• 14 years ago

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.

Evbn• 14 years ago

Mathematica has higher level drawing functions.

D3 tends to be more roll your own.

wladimir• 14 years ago

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.

primitur• 14 years ago

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

nigma• 14 years ago

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

pwang• 14 years ago

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.

heeton• 14 years ago

Negative awesomeness?? Uh-oh!

prezjordan• 14 years ago

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.

jrajav• 14 years ago

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

fourstar• 14 years ago

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

languagehacker• 14 years ago

Okay, guys. We get it. Enough.

gubatron• 14 years ago

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

eric_bullington• 14 years ago

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!

vangar• 14 years ago

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

I don't understand...

bryanh• 14 years ago

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.

unreal37• 14 years ago

What if the data changes every day?

ie: plotting the number of bugs fixed over time

ceejayoz• 14 years ago

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

danso• 14 years ago

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

joeblau• 14 years ago

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

DanWaterworth• 14 years ago

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

riffraff• 14 years ago

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

mark_integerdsv• 14 years ago

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

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

qznc• 14 years ago

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

suprememoocow• 14 years ago

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

sturmeh• 14 years ago

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

gojomo• 14 years ago

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

XKCD-style charts with D3

Related Stories