D3, Conceptually - Lesson 1
code.hazzens.comIt 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?
I'm not saying I can't figure it out from the code, I can. But still a "what is D3" section would help.
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 don't see why the author needs to add a "what is D3" section to a tutorial. A visitor to a tutorial site for library_x is pretty likely to know what the purpose of library_x is.
I think he's targeting his audience well. I'd imagine most of his users arrive like this...
"What is D3" would make sense if users did this in reverse (like I'm sure some people clicking on this news item have done), but I don't think that's the normal use case and I don't blame the author for not addressing it.1) I need a data visualization library. 2) D3 seems to be a good one. 3) Read the D3 docs at the project's homepage. 4) I still need help learning D3. 5) Google for tutorials. 6) End up at this person's tutorial.Disagree. I (thought) I know roughly what D3 is, but it would still be nice to have a (single paragraph, even) introduction. A framework can be pretty broad, so the intro would also signal what the author beliefs D3 is useful for and what techniques he intends to teach the audience.
For these reasons, I hold that any piece of technical writing needs an introduction, no matter how familiar the intended audience is. It doesn't need to be long. But it does need to have its place (at the beginning).
HOWEVER! Either we all overlooked this: http://code.hazzens.com/d3tut/lesson_0.html (because this article links straight to lesson one) or the author has added an introduction in the mean time, because it does have an introduction :) So, all is good :)
(BTW I thought that D3 also brought a 3D framework to the canvas, but I see no mention of that anywhere--maybe I"m confused with the name and something else?)
also, I love the first line of the intro:
I don't care if it's true or not, good writing :)D3 is a powerful tool, but you know how that saying goes: "With great power comes a conceptually clean library with a learning curve like a wall".
this is also true of 99% of open source projects. i often find myself on a github project page, trying to figure out what problem the code is trying to solve. context: it's important.
I like the tutorial. One thing that catches my eye though is the unnecessarily complex example from the beginning:
d3.selectAll('div')
.text(function() {
var index = Array.prototype.indexOf.call(this.parentElement.children, this);
return (index % 2) == 0 ? 'Even' : 'Odd';
});
d3.selectAll('div')
.text(function(d, index) {
return (index % 2) == 0 ? 'Even' : 'Odd';
});(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...
root.selectAll('rect')
.data(rects).enter()
.attr({
x: function (d) { return d.x; },
y: function (d) { return d.y; },
width: function (d) { d.w; }
});
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.
D3 is indeed a well-thought-out library for connecting data with DOM. Of Javascript frameworks that I have played with, jQuery and D3 are the only ones that I've truly enjoyed. And although D3 and jQuery have a lot of overlap, it's easy to mix them. We are using both at Fount (http://fount.io, just an early demo at the moment). We use D3 for data displays and jQuery for Ajax and the rest of the UI.
Exactly. It's so easy in fact, and so amount of SVG you need to learn to build great graphs so small that I almost never rely on a high-level graphing library (e.g. Highcharts) anymore.
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:
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.
I'm looking for something as pretty as Highcharts, to use in open-source apps.
flot (http://www.flotcharts.org/) has been a loyal friend for years.
Any comments on flot vs flotr2?
I'm trying to choose which to use for a project, and I can't find much reason to prefer one over the other.
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.
I think Mike Bostock's (the author of D3) tutorials are really high quality too. https://github.com/mbostock/d3/wiki/Tutorials
However, once you dive a bit deeper with selections and nesting, there are some things that are not immediately obvious how to structure. For example, when we implemented small multiple visualization, figuring out the best way to structure enter and update sets for nested data took a few attempts.
This is one of the main reasons I'm writing these tutorials - small multiples (nested selections) in D3 are explained very poorly in the official docs, and are a constant stumbling block for coworkers not very familiar with the library.
Sadly, getting around to properly explaining them will take another lesson or two.
Nested selections/joins/bindings/whatever have definitely been the biggest stumbling block. A tutorial would be much appreciated.
Results after the first one fail to load in the latest Firefox. It looks like a Firefox bug btw, the style and script tags are not being added to the created iframes (except the first, which is always ok) unless I mess with the timing, either by using a 100ms delay in setTimeout() or a breakpoint with Firebug.
PS: it's a fantastic tutorial, thanks for writing it!
I can indeed confirm that only the first example is displayed in firefox (17.0 on Windows XP)
A little late, but I think I fixed this. Working for me now in 17.0/Windows 7
These tutorials have been excellent so far. Do you have an RSS feed that publishes when new tutorials are ready?
hazzen, cool that you are going to cover them. What kind of project are you working on, if I may ask.
Agreed. This seems like a better introduction than other tutorials I've seen, but it could just be that I've already grokked D3's data binding model through some tutorials plus a bit of trial and error.
This is another must-read: http://bost.ocks.org/mike/join/
Scott Murray has published some great tutorials on D3.js (http://alignedleft.com/tutorials/d3/), and has an O'Reilly book on "Interactive Data Visualization for the Web" that's about it as well: http://shop.oreilly.com/product/0636920026938.do
The ebook's 50% off today, if you use CYBERDAY as a promo code.
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].
[0] http://stackoverflow.com/questions/12719486/d3-js-graphs-out...
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.
Or some Diablo 3 platform/engineering related article, or Nikon's D3 camera repair guide, or something else.
More informative titles help people unfamiliar with great tools (such as d3.js - an outstanding JavaScript lib for manipulating documents; see d3js.org) get to know about these tools.