
XKCD-style charts with D3 - idan
http://dan.iel.fm/xkcd/
======
jamesaguilar
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
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
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.

~~~
pygy_
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...](http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-in-
matplotlib/)

~~~
pygy_
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-...](http://xkcdsucks.blogspot.com/2009/03/xkcdsucks-is-proud-to-present-
humor.html)

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

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

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

------
prezjordan
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
You might also like its Markdown soul brother, <http://gist.io/>

------
eric_bullington
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!

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

------
mark_integerdsv
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
You want to covney that the graph is not based on measured numbers but only a
rough sketch.

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

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

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

~~~
riffraff
methinks: [http://xkcdsucks.blogspot.it/2009/03/xkcdsucks-is-proud-
to-p...](http://xkcdsucks.blogspot.it/2009/03/xkcdsucks-is-proud-to-present-
humor.html)

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

I don't understand...

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

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

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

------
heeton
Negative awesomeness?? Uh-oh!

------
languagehacker
Okay, guys. We get it. Enough.

