9 ms·
XKCD-style charts with D3
- nigma 14y agoFor comparison a version in Python/Matplotlib is at http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-in-matplotlib/ http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-i...
- pwang 14y agoIf you look in the source (http://bl.ocks.org/3914862 http://bl.ocks.org/3914862) about 4/5 of the way down, they basically copy the core logic from Jake's Matplotlib version.
- jamesaguilar 14y agoIf 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 14y agoOn 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 14y agoI'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_ 14y agoThe 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-in-matplotlib/ http://jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-i...
- deleted 14y ago[deleted]
- pygy_ 14y agoThe 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-present-humor.html http://xkcdsucks.blogspot.com/2009/03/xkcdsucks-is-proud-to-...
- richardwhiuk 14y agoI'd agree that the font is too much - it's bordering on illegible for me in Chrome 22 on Win 7.
- pygy_ 14y agoIt is badly hinted and thus badly anti-aliased.
- Evbn 14y agoMathematica has higher level drawing functions. D3 tends to be more roll your own.
- wladimir 14y agoD3js 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 14y agoThe 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 ..
- heeton 14y agoNegative awesomeness?? Uh-oh!
- prezjordan 14y agoNicely 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.
- languagehacker 14y agoOkay, guys. We get it. Enough.
- gubatron 14y ago" // Compute the distance along the path using a map-reduce." lol
- eric_bullington 14y agoWell 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 14y agoCan't you just use a tablet and DRAW the graph like it was hand-made? I don't understand...
- bryanh 14y agoWriting 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 14y agoWhat if the data changes every day? ie: plotting the number of bugs fixed over time
- ceejayoz 14y agoFor the same reason no one hand-codes the HTML on each individual Hacker News thread?
- danso 14y agoIt draws a nice sine wave http://so.danwin.com/test/xkcd-d3/ http://so.danwin.com/test/xkcd-d3/
- joeblau 14y agoThis thing looks amazing. I didn't want to fire up Mathematica to render these charts but I love D3. Thanks!
- DanWaterworth 14y agoThe graph is good, but I think I like the font more.
- riffraff 14y agomethinks: http://xkcdsucks.blogspot.it/2009/03/xkcdsucks-is-proud-to-present-humor.html http://xkcdsucks.blogspot.it/2009/03/xkcdsucks-is-proud-to-p...
- mark_integerdsv 14y agoI still need to see a thorough rationalization for the use of this chart style. Bonus points for using the Tufte 'lie factor' formula.
- qznc 14y agoYou want to covney that the graph is not based on measured numbers but only a rough sketch.
- suprememoocow 14y agoIf you want to play around with the example, I've stuck it on jsfiddle: http://jsfiddle.net/KndsL/2/ http://jsfiddle.net/KndsL/2/
- sturmeh 14y agoTook be a bit to realise this wasn't a Diablo 3 reference.
- gojomo 14y agoNow if we could only get D3-style animation in XKCD...