Apps that care about our life making it more comfortable and safe, productive and secure.

Graph Visualization Map (GraViM)

Tutorial | Description | Features | Usage | Discussions

Posted on 13 Feb 2013, by Admin. In , , , ,

Visual Tutorial

Try full window live demo!

Description

GraViM is a simple infographics maker: graph builder and browser. It is used to build the graph by the connectivity matrix and provide usable browsing.

Sources: https://bitbucket.org/lumais/gravim

License: Apache 2.0 with the extension that you should provide feedback on this page or embed a backlink to this page from the page where you are going to use a derivative or GraViM origin. Anyway back link to the origin is highly appreciated!

Features

  • Builds hierarchical graph by the connectivity matrix
  • Provides automatic graph building specifying it's size and max density
  • Provides both readable representation of the nodes and navigation map like representation to observe all the graph
  • Readable and navigation representation are synchronized
  • Graph nodes highlighting and selection
  • Visual representations (Views) dragging
  • Adjustable to different screen sizes
  • Navigation representation has adjustable visibility and size
  • Text editor to define and rebuild the graph
  • Input data verification and errors highlighting
  • Implementation is FREE and open source, consider the license
  • Works on Chrome, Firefox and most part of other modern browsers
  • Based on SVG and D3.js

Usage

Specify graph size and max density and click on Generate or press Ctrl + g to generate the graph.

Define connectivity matrix

Click on Build or press Ctrl + Enter or Ctrl + b to submit the matrix and rebuild the graph.

Input Format: 
[<node_id>;] [to: <node_id>[, <node_id> ...] | null[; from: null]]
  1. node_id; - optional. Id of the current node, it is used just to provide readable matrix representation. Must fit current line number starting from zero.
  2. to: <node_id>[, <node_id> ...]; - optional, CSV list of the destination nodes connected to this one.
  3. from: null - optional. Just a flag that marks the root nodes (upper nodes of the hierarchy to be on the top of the graph). Note: actually just a flag, these nodes also may have incoming connections from others.
Session View
  • It's main view of the workspace that contains graph nodes with some text inside them.
  • Highlighted on mouseover
  • Selected on click
  • View can be dragged
Navigation View
  • It shows all the graph in the compact representation and has similar features to the Session View plus:
  • Size can be adjusted
  • Can be shown/hidden
  • Drops all selections on click on the view background (out of the nodes)
  • Focuses Session View on the latest selected node

Watch video tutorial above or try full window live demo.

Discussions

Please use Product repository page to write code related feedback.