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