D3, Conceptually - Lesson 1

It looks great but like so many web sites focused on a tech project, it lacks a "what is D3" section. I read the preface, and I see that "D3 is a powerful tool" OK, and "D3 is really a beautiful little library" and it solves the problem of turning data into documents. Yes but how?<p>I'm not saying I can't figure it out from the code, I can. But still a "what is D3" section would help.<p>The site looks like a really nice mix of prose explanation and code examples. And D3 looks very intriguing whatever it is. OK I'm off to Google now.

I like the tutorial. One thing that catches my eye though is the unnecessarily complex example from the beginning:<p><pre><code> d3.selectAll('div') .text(function() { var index = Array.prototype.indexOf.call(this.parentElement.children, this); return (index % 2) == 0 ? 'Even' : 'Odd'; }); </code></pre> No need for calculating the index variable - it's already provided as the second argument of the function passed to the text() method:<p><pre><code> d3.selectAll('div') .text(function(d, index) { return (index % 2) == 0 ? 'Even' : 'Odd'; });</code></pre>

(I might have missed it in your tutorial, but if not...) It might be worth noting for your readers that attr, style, property and similar methods can accept an object as the argument. Might save people a tiny bit of typing...<p><pre><code> root.selectAll('rect') .data(rects).enter() .attr({ x: function (d) { return d.x; }, y: function (d) { return d.y; }, width: function (d) { d.w; } }); </code></pre> <a href="https://github.com/mbostock/d3/pull/277" rel="nofollow">https://github.com/mbostock/d3/pull/277</a>

While learning D3 I was surprised that it's a good general system for manipulating DOM. Using SVG is just the prettiest application of it.

This is exceptionally readable, many thanks! Partially the language is succinct and well written, partially it doesn't try to teach me Javascript :| Please please please continue, and consider writing others, you're good at this.

Borderline off-topic:<p>What are the best open-source charting libraries available right now (in terms of looks)? D3 or not, although I'll prefer D3, as it would be easier to extend.<p>I'm looking for something as pretty as Highcharts, to use in open-source apps.

This is a nice tutorial. I like the order and accessible way it introduces selections and data binding, which are some of the harder things to get into when starting with d3.

Scott Murray has published some great tutorials on D3.js (<a href="http://alignedleft.com/tutorials/d3/" rel="nofollow">http://alignedleft.com/tutorials/d3/</a>), and has an O'Reilly book on "Interactive Data Visualization for the Web" that's about it as well: <a href="http://shop.oreilly.com/product/0636920026938.do" rel="nofollow">http://shop.oreilly.com/product/0636920026938.do</a>

D3 provides awesome data driven visualizations. However the code samples on d3js.org site though good have no real explanations. I am hoping these tutorials will fill the gap.

One topic I wish you would cover is offline saving of graphs generated from D3.js in a subsection of your articles [0].<p>[0] <a href="http://stackoverflow.com/questions/12719486/d3-js-graphs-output-into-high-resolution-print-quality-files" rel="nofollow">http://stackoverflow.com/questions/12719486/d3-js-graphs-out...</a>

Looks nice. I'm not sure if I like the semantics of the .data selector. Especially since I come from jQuery I would think of it more to do with data attributes.

I was expecting some concepts for the D Language version 3.