D3 for Mere Mortals (d3.js visualization tutorial) | Hacker News Reader

D3 for Mere Mortals (d3.js visualization tutorial)

recursion.org

84 points100k20 comments

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.

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

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

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

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

(if you pay for it?)

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

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

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!

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.

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

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.

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.

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.

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.

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.

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

Could you compare this to raphael.js please?

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

Thanks!

Reply on news.ycombinator.com