A good web viz tool should reach 3 objectives :
**Compatibility **: the tool exists in an ecosystem of related components
**Debugging **: accessible tools must be designed to support debugging when the inevitable occurs.
**Performance **: Visualizations can be greatly enhanced by interaction and animation. Focusing on transformation rather than representation shifts this responsibility to the developer, improving performance while enabling animation and interaction.
D3 stands for Data Driven Document. D3 answers those 3 objectives. D3’s core contribution is a visualization “kernel” rather than a framework. For high-level capability, D3 includes a collection of helper modules that sit on top of the selection-based kernel; these modules are heavily influenced by prior visualization systems, including Protovis.
In D3, we need to think about 2 primary things :
Regarding the data, we need to :
Load and parse the data,
Choose an internal data structure to represent them.
For the document, we need to:
Choose a representational structure,
Define a mapping from the data to that structure.
As stated above, D3 allows to create interactive visualization tools, so the final step could be to make the data interactive.
There are two primary ways to draw directly to a web page: SVG and the HTML Canvas. In D3, we mostly use SVG. SVG stands for Structured Vector Graphics. SVG can be embedded directly in an HTML page.