
D3, Conceptually - Lesson 1 - hazzen
http://code.hazzens.com/d3tut/lesson_1.html
======
natch
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
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
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?)

~~~
tripzilch
also, I love the first line of the intro:

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

I don't care if it's true or not, good writing :)

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

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

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

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

~~~
Jare
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!

~~~
Gmo
I can indeed confirm that only the first example is displayed in firefox (17.0
on Windows XP)

~~~
hazzen
A little late, but I think I fixed this. Working for me now in 17.0/Windows 7

------
shashashasha
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
The ebook's 50% off today, if you use CYBERDAY as a promo code.

------
rdudekul
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
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...](http://stackoverflow.com/questions/12719486/d3-js-graphs-output-into-
high-resolution-print-quality-files)

------
path411
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
I was expecting some concepts for the D Language version 3.

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

