Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

WebPlotViz

PlotViz for web. Build using Three.js and Play Framework.

How to Install and Run

You can download the source code and use the command

./activator run

To start the web server locally. By default the server will start on port 9000.

https://localhost:9000/

Create a Distribution

You can create a distribution by using command

./activator dist

This will create a zip file in target/universal directory. Unzip this and go to the bin directory.

./webpviz 

will start the server.

WebPlotViz Input Format

WebPlotViz accepts a XML format of files.

<plotviz>
  <plot>
    <title></title>
    <pointsize>2</pointsize>
  </plot>
  <clusters>
    <cluster>
      <key>0</key>
      <label>FN547657_Div_aur_K</label>
      <visible>1</visible>
      <color r="" g="255" b="255" a="255" />
      <size>1</size>
      <shape>3</shape>
    </cluster>
    ...
   </clusters> 
   <points>
    <point>
      <key>1</key>
      <clusterkey>0</clusterkey>
      <label>2251</label>
      <location x="0.06221308043245255" y="-0.18796120745922332" z="-0.1397611036896711" />
    </point>
    ....
   </points>
    <edges>
        <edge>
          <key>1</key>
          <vertices>
            <vertex key="1" />
            <vertex key="2" />
          </vertices>
        </edge>
        ....
      </edges>
   </points>
<plotviz>  

Each plot consists of a set of clusters, points and edges. Clusters define a grouping of points. You can assign colors and shapes for clusters. This means every point in the cluster will have the shape and the color. A cluster has a unique key. This key is used by the points to assign itself to a cluster.

Points contain a list of points. Each point has a key and a cluster key. Cluster key defines which cluster the point belongs to. Each point have a location where it defines the x,y,z coordinates.

An edge defines a line through points. Each edge has a set of vertices. These vertices are reference keys to points. A lines are drawn through the vertices.

Example File

Fex examples can be found in the samples folder.

Here is a small example.

<plotviz>
  <plot>
    <title>MDSasChisq_SMACOF_3D_cpp</title>
    <pointsize>2</pointsize>
    <glyph>
      <visible>0</visible>
      <scale>1</scale>
    </glyph>
  </plot>
  <clusters>
    <cluster>
      <key>0</key>
      <label>FN547657_Div_aur_K</label>
      <visible>1</visible>
      <default>0</default>
      <color r="255" g="255" b="255" a="255" />
      <size>1</size>
      <shape>3</shape>
    </cluster>
    <cluster>
      <key>1</key>
      <label>FR750142_Rac_ful_K</label>
      <visible>1</visible>
      <default>0</default>
      <color r="255" g="0" b="0" a="255" />
      <size>1</size>
      <shape>3</shape>
    </cluster>
   </clusters> 
   <points>
    <point>
      <key>1</key>
      <clusterkey>0</clusterkey>
      <label>2251</label>
      <location x="0.06221308043245255" y="-0.18796120745922332" z="-0.1397611036896711" />
    </point>
    <point>
      <key>2</key>
      <clusterkey>1</clusterkey>
      <label>2252</label>
      <location x="0.055824241220745412" y="-0.18867336665241485" z="-0.14331119206545923" />
    </point>
    <point>
      <key>3</key>
      <clusterkey>0</clusterkey>
      <label>2253</label>
      <location x="0.05834231849450619" y="-0.18654874725457385" z="-0.14133175741622578" />
    </point>
    <point>
      <key>4</key>
      <clusterkey>2254</clusterkey>
      <label>1</label>
      <location x="0.056172878622444425" y="-0.19178016569894113" z="-0.13197211687622809" />
    </point>
    <point>
      <key>5</key>
      <clusterkey>2255</clusterkey>
      <label>2255</label>
      <location x="0.056639757130989794" y="-0.19540639540488691" z="-0.12330269641817594" />
    </point>
    <edges?
        <edge>
          <key>1</key>
          <vertices>
            <vertex key="1" />
            <vertex key="2" />
          </vertices>
        </edge>
        <edge>
          <key>2</key>
          <vertices>
            <vertex key="3" />
            <vertex key="4" />
          </vertices>
        </edge>
      </edges>
   </points>
<plotviz>