I'm just getting started with d3 myself, and I found this ebook, which is free online, to be a great tutorial for all of things mentioned in the OP's post, but in greater detail:
Ideally, find some kind of community where you can discuss with and help each other out regularly, but I don't really know of such a place, and it can be hard to find someone to do this with physically outside Paris, Berlin, NYC, and SF.
D3.js is a beast, but it can be tamed. It took me a month to wrap my head around what was going on, but once you figure out what's happening, the data visualizations you can create are amazing.
Whoa, I purchased this book when it was in pre release and even then hath ought it was wonderful. Not only is it he best walk through of D3 so far written, it's one of the best explanations of HTML and JavaScript, even for relative newbies.
Yes, but it's the opposite of math-convention, which many of us have been taught since ~6th grade.
Anyone who has done any amount of work with computer graphics knows that this is the norm; but a new programmer, or just one that hasn't worked with graphics, has 6+ years of math education telling them that the y-axis is backwards.
After spending the summer working on a project using Firebase, Angular, and D3, I definitely would have appreciated more articles on using D3 with dynamic data. Thanks for writing this up! I hope it helps some more people down the road.
Why are there only 3 points in each graph when there are five items in JSONdata? I can't figure it out.
Also:
When you show the JSONdata object on the page, you've switched your </code> and </pre> closing tags.
and
By reading through the code examples, it seems like you don't add the circles' click handler and cursor style until the Outside the current (domain) section, when it's really been there since the first example. That's a little confusing.
> Why are there only 3 points in each graph when there are five items in JSONdata? I can't figure it out.
Well this was a sneaky bug: There's an extra space at the end of the date in JSONData's last 2 elements(in the example and in the real code). This is why the last two were generating garbage value.
Wordpress is a real pain to work with when using code and it seems I introduced a bug when copying code over. It's going to be fixed shortly. As for the </code></pre>. Typo, my bad.
Regarding the CSS, I believe all the graphs behave the same way. Could you verify? I also can be reached @pothibo on twitter for further discussion ;)
I really appreciate your feedback.
(Edit: Gave the reason why the graph was only representing 3 data point instead of 5)
[+] [-] dpapathanasiou|12 years ago|reply
http://chimera.labs.oreilly.com/books/1230000000345/index.ht...
[+] [-] kmfrk|12 years ago|reply
If I could recommend a way to learn d3.js:
1. Read Scott's book (and code the examples).
2. Think of some simple charts you want to make (and code them).
3. Use #d3.js@freenode, Stack Overflow, and see if some of the articles at http://www.d3noob.org/ fit what you're trying to do.
4. Go to http://bl.ocks.org/mbostock, be inspired, fork the code, and apply it to your own idea.
Repeat #3.
Ideally, find some kind of community where you can discuss with and help each other out regularly, but I don't really know of such a place, and it can be hard to find someone to do this with physically outside Paris, Berlin, NYC, and SF.
[+] [-] _7fvc|12 years ago|reply
https://github.com/mbostock/d3/wiki/Tutorials
Especially, the first four: Introduction, Three Little Circles, Thinking with Joins, How Selections Work.
These articles explain the basic concepts of d3.
Then learn by doing is the best way to go. For example, http://vida.io/explore
[+] [-] joeblau|12 years ago|reply
[+] [-] danso|12 years ago|reply
That it is free is a huge act of generosity.
[+] [-] bisrael|12 years ago|reply
> SVG has an opposite y-coordinate system (0 is on top, height() is at the bottom).
struck me as silly, since that's how the coordinate systems of nearly all computer graphics systems work, not really opposite....
[+] [-] LukeShu|12 years ago|reply
Anyone who has done any amount of work with computer graphics knows that this is the norm; but a new programmer, or just one that hasn't worked with graphics, has 6+ years of math education telling them that the y-axis is backwards.
[+] [-] beefsack|12 years ago|reply
A little demo is in the repo too: http://rawgithub.com/beefsack/angular-d3/master/example/inde...
[+] [-] VeejayRampay|12 years ago|reply
[+] [-] pothibo|12 years ago|reply
Everything looks functional until you dig in the source and realize that you are actually manipulating objects.
[+] [-] awhitty|12 years ago|reply
[+] [-] pessimizer|12 years ago|reply
Also:
When you show the JSONdata object on the page, you've switched your </code> and </pre> closing tags.
and
By reading through the code examples, it seems like you don't add the circles' click handler and cursor style until the Outside the current (domain) section, when it's really been there since the first example. That's a little confusing.
[+] [-] pothibo|12 years ago|reply
Well this was a sneaky bug: There's an extra space at the end of the date in JSONData's last 2 elements(in the example and in the real code). This is why the last two were generating garbage value.
Wordpress is a real pain to work with when using code and it seems I introduced a bug when copying code over. It's going to be fixed shortly. As for the </code></pre>. Typo, my bad.
Regarding the CSS, I believe all the graphs behave the same way. Could you verify? I also can be reached @pothibo on twitter for further discussion ;)
I really appreciate your feedback.
(Edit: Gave the reason why the graph was only representing 3 data point instead of 5)