Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

D3, Conceptually - Lesson 1

code.hazzens.com

Post reply on HN
Print view View original

21–30 of 34 posts

Re: D3, Conceptually - Lesson 1

#21

Post by Jare »

hazzen wrote: post #6
dirtyaura wrote: post #5

Earlier quoted context omitted.

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 atte…

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.

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!

Re: D3, Conceptually - Lesson 1

#23

Post by danek »

natch wrote: post #16

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…

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.

Re: D3, Conceptually - Lesson 1

#24

Post by dbecker »

ayanb wrote: post #17
rustc wrote: post #12

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.

Re: D3, Conceptually - Lesson 1

#26

Post by grabastic »

natch wrote: post #16

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…

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.

Re: D3, Conceptually - Lesson 1

#28

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

Re: D3, Conceptually - Lesson 1

#29

Post by tripzilch »

grabastic wrote: post #26
natch wrote: post #16

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…

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 D…

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

Re: D3, Conceptually - Lesson 1

#30

Post by tripzilch »

tripzilch wrote: post #29
grabastic wrote: post #26

Earlier quoted context omitted.

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 D…

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…

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 :)
Post reply on HN