d3plus

A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.

Helpful Links

• Examples
• Documentation
• Google Group
• Issues
• Help with the Localization

Environment Setup

Download the latest versions of D3plus (directory includes all dependencies):

http://d3plus.org/d3plus.zip

Note that because we will be running these files locally, our browser will raise errors when trying to do AJAX requests. The best way around this is to run a local server, if you have python installed this can be accomplished on the command line via:

python -m SimpleHTTPServer 8888 &

or for Python 3+

python -m http.server 8888 &

Once this is running, go to http://localhost:8888/.

Another alternative is using MAMP (on OSX) or WampServer (on Windows), which will install a local version of the Apache web server.

Creating a Visualization

To initialize a D3plus visualization, you must first create a container element in the page body:

<div id="viz"></div>

Then, you must initialize the visualization:

var visualization = d3plus.viz()

Finally, given we have a "data" variable as an array of objects, we pass both that "data" and our container element (using standard D3 Selection Methods) to the visualization:

visualization
	.data(data)
	.container("#viz")

And that's it! All you have to do now is invoke the Draw method to draw the visualization on the page.

visualization.draw()

Changing Variables

Given you followed the tutorial above to create a D3plus visualization, your page should look, well, fairly empty and broken.

That is because there are some specific methods you should invoke on your visualization that will tell it a little more about your data and what you would like to display. For example, if you want to display a Tree Map and your data is keyed with an id of "person", you would call the following methods:

visualization
	.type("tree_map")
	.id("person")

Once you set the Methods you need, you will just need to invoke the Draw method to display your changes.