

D3.js: How to handle dynamic JSON Data - pothibo
http://pothibo.com/2013/09/d3-js-how-to-handle-dynamic-json-data/

======
dpapathanasiou
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:

[http://chimera.labs.oreilly.com/books/1230000000345/index.ht...](http://chimera.labs.oreilly.com/books/1230000000345/index.html)

~~~
kmfrk
It's definitely the best book there is, but you're going to need to practice a
lot and read a lot of articles to really wrap your head around d3.js.

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/](http://www.d3noob.org/) fit what you're trying to do.

4\. Go to [http://bl.ocks.org/mbostock](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.

~~~
ep103
Should I learn d3 or three.js or raw canvas?

~~~
mcpherrinm
I would give different answers depending on what you're trying to do.

Do you have some data you want to visualize in an interactive way? Maybe try
D3.js

Do you want to make 3d models or video games? THREE.js

Do you want to do custom 2D drawings that aren't suited to the previous two?
Maybe raw canvas is for you.

------
bisrael
Not to be too much of a pedant, but the phrase

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

------
beefsack
I actually wrote an AngularJS directive to assist in integrating D3.js with
automatic scope updates:
[https://github.com/beefsack/angular-d3](https://github.com/beefsack/angular-d3)

A little demo is in the repo too:
[http://rawgithub.com/beefsack/angular-d3/master/example/inde...](http://rawgithub.com/beefsack/angular-d3/master/example/index.html)

------
VeejayRampay
Excellent tutorial. It really reminds me of when d3.js clicked for me and I
had the very same mental process you're describing in this post.

~~~
pothibo
I'm glad you liked it, I believe d3.js can feel foreign since the separation
between accessors and objects is really not obvious.

Everything looks functional until you dig in the source and realize that you
are actually manipulating objects.

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

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

~~~
pothibo
> 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)

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

Thanks for that - my d3 understanding is tenuous, and I thought that it might
have been even worse than I thought:)

>Regarding the CSS, I believe all the graphs behave the same way. Could you
verify?

Not actually the css, but

    
    
      circles.enter()
       .append("svg:circle")
       .attr("style", "cursor: pointer;")
       .on("click", function(d) {d3.select("#demoAddRandom .value").text("Date: " + d.created_at + " amount: " + d.amount)
    

All the graphs do behave the same way, but that code isn't introduced in the
examples until the first time you refactor refreshGraph. It's always there in
the actual code of the graphs.

~~~
pothibo
Oh wow, that was never suppose to be a part of the code I was showing. My
apologies.

Wordpress is a real mess when dealing with code & text. Everything is part of
the same big textarea and because there's no code highlighting, I have to read
everything again and again and again.

Should be fixed now. Thanks!

~~~
pessimizer
I think that it's worth it to keep in the code examples - because it's simple
code to understand, and if you omit it newbies will be wondering if it's
something that d3 is doing automatically.

