This is the sandbox demo of BINViz. For starting the demo click here. You need Firefox, Mozilla or Opera to run this demo and you should have JavaScript activated in your browser. For a brief introduction go on reading this page.
BNIViz is a point an click or drag and drop network visualization application implemented in JavaScript and runs in a web browser. Here are some steps how to use the interface and how to create and manipulate a network in BINViz:
It is really easy to create nodes. Click with the right mouse button on the blank canvas. A context menu will show up. Click on "Create Node", the context menu will disapear and an empty node with an input field will show up. Enter a label and press the return key. Go on until you have created all nodes you wanted to.
After creating all nodes you probably want to change their properties. Make a right click on a node. A context menu will show up with different options. Choose "Properties". A little window will pop up showing you the properties of the node. Here you can change the label, the weight, the type and enter some data which is probably not necessary for the sandbox demo. Click "Ok" to confirm your changes.
To move a node in the canvas from one point to another, left-click the node, hold the mouse button pressed and move the mouse. If you lift of your finger the node will stop at the current position.
By clicking it once with the left mouse button you will select a node. Click it again and it will be deselected again.
If you want to delete a node, make a right click on the node you want to delete and the node context menu will show up. Select "Delete Node" and the node will dissapear. With the "Change Label" option the input field will reappear and you can change the node label through entering a new label to the input field.
For creating edges you first have to change the GraphView from "Drag Mode" to "Edge Mode". You can see two little boxes, one labeled with "Edge Mode" and the other one with "Drag Mode" in the upper left corner of the GraphView. To change to "Edge Mode" click the box right next to the label or select the "(De)Activate Edge Mode" option from the canvas context menu (not the node context menu). Any time you can see if you are in edge or drag mode indicated by the little boxes (red => edge mode, green => drag mode).
If you want to draw an edge between two nodes, first select the source then the destination node. You can recognise the source node by it's red frame. If you change your mind and you want to select another source node, click the first node again (it will be defocused) and choose another one. After you have finished painting edges, change to drag mode again in the same way activating it.
To change the properties of edges double click an edge. For activating it click it once. Change of properties is similar to this of nodes.
The canvas has some other, additional operations. They can be used through the context menu of the canvas. Try them out!
Now go to the demo and create your own network ----->DEMO<-----