

D3 for Mere Mortals (d3.js visualization tutorial) - 100k
http://www.recursion.org/d3-for-mere-mortals/

======
100k
I started on this before hearing about Programming for Mere Mortals
(<http://stevenf.com/pages/book.html>). I was sort of bummed by the similar
names but decided to keep mine because I tried to start from the beginning.

~~~
Jebdm
Don't worry about the name--I think it's a sufficiently general pattern that
it makes sense to use it in multiple contexts, and I don't think it
trademarked or anything (like "For Dummies" is).

------
avolcano
"This Google App Engine application is temporarily over its serving quota.
Please try again later."

There's a cache available here, sans images:
[http://webcache.googleusercontent.com/search?sclient=psy&...](http://webcache.googleusercontent.com/search?sclient=psy&hl=en&site=&source=hp&q=cache%3Ahttp%3A%2F%2Fwww.recursion.org%2Fd3-for-
mere-mortals%2F&pbx=1&oq=cache%3Ahttp%3A%2F%2Fwww.recursion.org%2Fd3-for-mere-
mortals%2F&aq=f&aqi=g5&aql=&gs_sm=e&gs_upl=597l1398l0l1575l7l3l0l0l0l0l181l416l0.3l3l0)

~~~
mvid
I thought the whole point of GAE is so you can scale up when you get stormed
by HN

~~~
jcsalterego
(if you pay for it?)

------
simonw
This is a really good tutorial, exactly what I've been waiting for before
diving in to D3.

~~~
100k
Thanks! I'm a fan of your writing so I appreciate the complement.

------
ubercore
I've been using Protovis, and my main complaint about D3 is that it brings you
closer to the DOM. I suppose that's the point, and is generally a strength,
but it doesn't give you a nice abstraction layer for cross-vector-language
bindings (svg vs vml). Things like SVGWeb help where SVG isn't available, but
it's not quite as nice as direct VML support.

Can't wait for full SVG support in all common browsers!

~~~
NelsonMinar
I launched a small site using D3 (windhistory.com). It's great. SVG is now
supported in Firefox, Chrome, IE, and Mobile Safari. The big limitation is IE7
and IE8, but if you can blow those users off SVG is fantastic.

~~~
ubercore
Unfortunately, I can't yet blow those users off. The last set of
visualizations I did with Protovis saw over 20% of its traffic in IE < 9\. I'd
be ecstatic if I could ignore VML...

------
justincormack
Nice article. Have just started using d3 myself. It might be worth mentioning
that you can transform the svg coordinates if thats easier. Or the d3 data
values, if the default coordinate system is annoying, eg if you want it
centred.

I have been wondering about progressive enhancement for old browsers, display
data as a table, then convert to chart if svg is present.

------
nitrogen
From the page: _Anti-aliasing helps make text and curved lines look smoother,
but can make straight lines appear fuzzy. Notice how the lines on the left are
fuzzy, while those on the right are crisp._

On Firefox 5 on Ubuntu 11.04, the left lines are crisp, while the right lines
are fuzzy. I haven't tried other browsers or platforms.

~~~
100k
I wrote this using WebKit (where it looks as I said) and didn't see the
differences in rendering until after I was done. I will add a note about
browser rendering differences.

------
mark_l_watson
There is an article about D3 in tge latest free SVG Magazine:
<http://svgmagazine.com/jul2011/>

------
urza
Could you compare this to raphael.js please?

~~~
apmee
Raphael is great at what it does, which is to provide a _graphics_ framework
-- a layer of abstraction in order to easily manipulate SVG to create custom
shapes and graphics.

Where D3 differs is in its focus. It's not just a graphics library, but a
means of manipulating the DOM to facilitate data visualisation (often via SVG,
but data-based manipulation of simple HTML elements is equally feasible).

This reliance on standards such as the W3C DOM and SVG APIs means that, unlike
Raphael, there is minimal proprietary markup to learn, and it also brings a
lot of flexibility and power: anything you can do with SVG and HTML you can
wield with D3.

From the horse's mouth: <http://vis.stanford.edu/files/2011-D3-InfoVis.pdf>

~~~
urza
Thanks!

