October 23rd, 2014

40,000 interactive nodes in a browser!
Enterprise data visualization with InfiView

Click to run

http://infiview.labs.bindows.net

A prominent network corporation asked us to demo how InfiView can present in a browser, a large data set, stored on a remote server, while enabling users interaction.
InfiView is an Ajax Framework for Data Visualization (100% built in Bindows).

Features

* Display a graphical representation of a computer network with 40,000 nodes representing various network elements (servers, routers) connected with links
* Show two viewports, each showing different parts of the data
* Each viewport can be independently panned and zoomed
* Network elements can be moved (drag with the mouse)
* New links can be created
* Links can be created between nodes in different viewports

Implementation

The InfiView application is the view layer that runs in the browser. It uses client-side technologies like HTML, JavaScript, SVG and VML to render the graphical diagram.

The data for the network resides in a server-side database. The server exposes this data through a JSON web service interface.

We used JSON as the transfer format because it is a good fit for JavaScript web clients; However, XML could also be used.

The application takes advantage of InfiView’s memory management technology so that only the part of the network that is visible on the screen needs to be transferred over the network. As the user pans or zooms the viewport, InfiView intelligently fetches more data from the server as needed (and at the same time, releases unused data from memory).

The backend holds the network database, including the positions and properties of all the nodes, and the links between the nodes. It uses a spatial index to efficiently find all the nodes within a certain rectangle. The demo backend is implemented using the Grails framework.

Got questions or comments? please contact me (ran @ bindows.net)

6 Responses to '40,000 interactive nodes in a browser!
Enterprise data visualization with InfiView'

  1. 1Sergey G.
    December 8th, 2010 at 2:39 am

    Well, it is a rather complex structure with resizing and rendering links.
    As a consequence, you have a bug - try to move the right edge of some element beyond the left.

    As for the rest all is impressive.


  2. 2Raimund
    February 2nd, 2011 at 7:48 am

    This is very impressive, yes. Some ViewportNavigator would be terrific. And there a sync issues: Moving a node is not reflected in the other Viewport.

    The edge-creation in both viewports is cool.

    But I guess it has a long way to production quality…


  3. 3Pavel
    September 22nd, 2011 at 3:54 am

    Your server with this demo seems to down. Is it discontinued?


  4. 4Ran Meriaz
    September 26th, 2011 at 5:59 am

    We are in the process of moving the demo to another server. It should be up again in few days.
    Sorry about the inconvenience.


  5. 5Pavel
    April 24th, 2012 at 3:42 am

    The demo is still not working… :-(


  6. 6Ran Meriaz
    April 24th, 2012 at 7:30 am

    You can now view the demo using Chrome or IE.
    You could view it in FF11 soon.


Leave a Response

Imhotep theme designed by Chris Lin. Proudly powered by Wordpress.
XHTML | CSS | RSS | Comments RSS