D3, Conceptually - Lesson 1 | Dark Hacker News

D3, Conceptually - Lesson 1(code.hazzens.com)

173 points by hazzen 13 years ago | 32 comments

natch 13 years ago |

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?

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.

grabastic 13 years ago | |

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

  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.

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

tripzilch 13 years ago | | |

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

danek 13 years ago | |

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.

vuknje 13 years ago |

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';
    });

No need for calculating the index variable - it's already provided as the second argument of the function passed to the text() method:

  d3.selectAll('div')
    .text(function(d, index) {
      return (index % 2) == 0 ? 'Even' : 'Odd';
    });

grabastic 13 years ago |

(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; }
        });

https://github.com/mbostock/d3/pull/277

bslatkin 13 years ago |

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.

dirtyaura 13 years ago | |

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.

louischatriot 13 years ago | |

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.

Groxx 13 years ago |

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.

rustc 13 years ago |

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.

pav3l 13 years ago | |

http://stackoverflow.com/questions/119969/javascript-chart-l...

ayanb 13 years ago | |

flot (http://www.flotcharts.org/) has been a loyal friend for years.

dbecker 13 years ago | | |

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.

enjalot 13 years ago |

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.

dirtyaura 13 years ago | |

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.

hazzen 13 years ago | | |

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.

tlrobinson 13 years ago | |

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/

shashashasha 13 years ago |

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

thetable 13 years ago | |

The ebook's 50% off today, if you use CYBERDAY as a promo code.

rdudekul 13 years ago |

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.

denzil_correa 13 years ago |

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

path411 13 years ago |

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.

dysoco 13 years ago |

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

vitalique 13 years ago | |

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.

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.

root.selectAll('rect') .data(rects).enter() .attr({ x: function (d) { return d.x; }, y: function (d) { return d.y; }, width: function (d) { d.w; } });