Live data from Hacker News

D3, Conceptually - Lesson 1

code.hazzens.com

11–20 of 34 posts

Re: D3, Conceptually - Lesson 1

#11
post #8

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.

Re: D3, Conceptually - Lesson 1

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

Re: D3, Conceptually - Lesson 1

#13
post #4

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.

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/

Re: D3, Conceptually - Lesson 1

#14
post #6

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.

Nested selections/joins/bindings/whatever have definitely been the biggest stumbling block. A tutorial would be much appreciated.

Re: D3, Conceptually - Lesson 1

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

Re: D3, Conceptually - Lesson 1

#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 mix of prose explanation and code examples. And D3 looks very intriguing whatever it is. OK I'm off to Google now.

Re: D3, Conceptually - Lesson 1

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

Re: D3, Conceptually - Lesson 1

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

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

Re: D3, Conceptually - Lesson 1

#20
(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
Post reply on HN