Skip to content
forked from d3plus/d3plus

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

Notifications You must be signed in to change notification settings

ncorreard/d3plus

 
 

Repository files navigation

NPM Release Dependency Status Dependency Status NPM Downloads License


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.

Helpful Links

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

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published