D3.js

D3 (Data-Driven Documents) is a javascript framework for data visualisation. It is extremely flexible, due to the fact that, at its core, it is just a way to declaratively manipulate SVG.

Selections and joins

As D3 is a declarative framework, there is no d3.insert or d3.create (at least that I know of) for creating SVG elements. Instead, you would use a .selectAll() with the selector matching the type of element you want to create, followed by .data(), to bind the data to that selector. At that point, you can call .enter() to create the svg elements. The benefit of this approach is that you also have the .join() method. This will, in addition to what .enter() would do, also remove SVG elements that do not have corresponding entries in the data and update the entries whose data has changed.

TODO: example