Getting Started

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:

python serve.py

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

http://localhost:8080/testcase/$VisualizationName/$TestNumber/

$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:

http://localhost:8080/testcase/ForceDirected3D/1/

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 build.py file.

Building the library code

As I explained before, the build.py file builds a new library with only the needed dependencies for the visualization you want to get. The build.py 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 build.py 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 build.py > my_own_jit_copy.js

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

python build.py 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 tests.py file to include your new visualization and examples.
6. Edit the serve.py 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

   http://localhost:8080/testcase/MyViz/1/