rv816 / d3plus Goto Github PK

Bar Charts	Tree Maps	Scatter Plots	Stacked Areas	Line Plots
Networks	Box Plots	Pie Charts	Geo Maps	Bubbles

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

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

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.

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()

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")
	.draw()

Once you set the methods you need to change, you just need to invoke the Draw method again to display your changes.