Beginning Data Visualization with D3plus JS 2.0

D3plus just released a new version of their library this month. As a regular D3plus user I am pretty hyped about it! There are some changes in this new version and it can be difficult for beginners to spot them. The documentation has also been changed and since the key points are missing, I thought to write a post to clarify a bit.

Before writing about the new way to make visualization, I think a quick refresher on D3plus 1.0 would be good.

This is how visualization can be created in D3plus 1.0


Visualization in D3plus JS Version 2.0

Couple of things changed after the alpha 2.0 released. One of the changes is, you don’t need to include d3.js .

And the second one is, you don’t need to create a div element with an id for D3plus to create visualization.

If you can’t specify an element to be used as a visualization, how can you use this library to produce one?

The solution is to simply create a visualization on a separate html file then include it as an iframe in the html page you want to show the visualization. So it becomes a bit easy to manage multiple visualizations at the same time. Let’s take a look at an example.

index.html and viz.html

In this page I am going to keep the actual visualization code. Then in index.html file I’ll include it as an iframe .


If you open index.html page, a visualization like this will be shown.

I’ll share more advanced technique regarding D3plus in next posts. That’s all for now, thanks for reading!