Getting Started

philogb edited this page Feb 5, 2012 · 6 revisions

Starting the server to see the examples

You can either fork the project from GitHub or download the project from here . If you downloaded the source then uncompress the project somewhere first. Step into the project folder and type:


This will start a server in http://localhost:8080/ . You can access a particular visualization by typing:


$VisualizationName is one of RGraph, Hypertree, Spacetree, etc. You can see all posibilities here .

$TestNumber is the number of the test being used. This is used to fetch the corresponding html files from here and JavaScript test files from here

For example:


The actual library code is included in the html file by building the lib each time with only the needed requirements taken from the name of the visualization and the build.json file. The required library code is built by the file.

Building the library code

As I explained before, the file builds a new library with only the needed dependencies for the visualization you want to get. The file uses build.json to check the dependencies of each visualization and builds the library by concatenating the Source files that you can find here .

For example, if you were to build just the Sunburst visualization then would find the Sunburst dependencies here and concatenate the right files.

If you want to build your own copy of the library then you can type

python > my_own_jit_copy.js

If you wanted just the Spacetree and Sunburst visualizations you could instead type

python Spacetree Sunburst > my_own_jit_copy.js

Creating a new visualization

In order to create a new visualization you need to set up the server environment to include test JavaScript files for your new visualization and also you need to add the new visualization files into the Source folder .

The steps I’d take to create a new visualization (lets call it MyViz) would be:

  1. Add a MyViz.js file in the Source/Visualizations folder
  2. Add a MyViz folder in the Tests folder containing your first example file test1.js
  3. Add a MyViz folder in the Templates folder with a left.html and test1.html files for your first example
  4. Add a MyViz..css file in the css folder to add some special CSS for your visualization examples.
  5. Edit the file to include your new visualization and examples.
  6. Edit the file to include in the URL pattern the pattern of your visualization.
  7. Start coding your visualization in MyViz.js, your new example in test1.js and test it by going to
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.