D3.js: How to handle dynamic JSON Data | dhjwlove | Scoop.it

When I started with d3.js, I really struggled understanding how I could link data from a JSON feed to a SVG graph. I read a lot of tutorials but still, I couldn't find what I was looking for. Now that I know how d3.js behaves, I thought it would a good idea to share the things that I learned.

When you start using the library, there's stuff that might be foreign to you:

* It uses SVG which many of us have no experience with.

* SVG has an opposite y-coordinate system (0 is on top, height() is at the bottom).

* stroke, fill, clipping, etc.

My goal was to create a dynamic graph that I could add, edit and remove data and have d3 update the graph in real time but I couldn't understand how to handle enter() and exit() with JSON. Many examples out there were done using static data so it wasn't covering my issues with JSON.

Throughout this post, I will be using this response as an example of a JSON response to show you how to represent your JSON into a graph.


Via Jan Hesse