D3 for Mere Mortals (d3.js visualization tutorial)

http://www.recursion.org/d3-for-mere-mortals/

by 100k • 15 years ago

84 20 15 years ago

100k4• 15 years ago

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• 15 years ago

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

ubercore2• 15 years ago

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• 15 years ago

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.

ubercore2• 15 years ago

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

benmccann• 15 years ago

Your site breaks the back button worse than any site I've ever encountered. I found that to be incredibly annoying, but I think I would have liked the site if it weren't for that.

beatpanda• 15 years ago

I love how low-level D3 is. My biggest issue with other visualization libraries is constantly wondering, "can I do this?", or searching around for specific features, but with D3, since all you're doing is manipulating the DOM with some data, you can do whatever charts and visualizations your imagination can conjure up.

It took me three days of intense study at the JavaScript console, but I managed to build some seriously cool dynamic data visualizations for text comparison (that I unfortunately can't show off yet). Anyway. Use this library, it's killer.

simonw• 15 years ago

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

100k4• 15 years ago

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

justincormack• 15 years ago

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.

avolcano• 15 years ago

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

mvid• 15 years ago

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

jcsalterego• 15 years ago

(if you pay for it?)

100k4• 15 years ago

Oops, that will teach me to post on HN and then go out for the evening. I upped the quota.

nitrogen• 15 years ago

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.

100k4• 15 years ago

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.

urza2• 15 years ago

Could you compare this to raphael.js please?

apmee• 15 years ago

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

urza2• 15 years ago

Thanks!

mark_l_watson• 15 years ago

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

D3 for Mere Mortals (d3.js visualization tutorial)

Related Stories