Graph visualization frameworks - javascript

I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise).
I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change.
I have two questions.
What are the technical terms for the three requirements crudely described in the paragraph above?
I'm a Java programmer with no experience in JavaScript, but I'm thinking that, with this project, it's time to get some - sigma.js in particular seems very powerful and relatively simple. However, ultimately this needs to be done within a Java Swing application, and while I know there are various containers I can use to embed JS/HTML content into Swing, still it seems that a pure Java solution would be ideal, and I'm curious about any frameworks that might make this possible. I'm looking into Gephi now, but it doesn't seem anywhere near as powerful or as simple to use as sigma.js. Am I wrong in this assumption?
To summarize the second question: Which would be the better investment of my time: Learning sigma.js and the various JS frameworks (which will require me to get comfortable with JS in general), or learning to use Gephi in Java? (assuming I have a general and long-term interest in graph visualization)

Java visualization
Gephi does provide a toolkit for Java and Python which doesn't contains the UI modules, so unless you want to use Gephi itself to visualise your network you cannot embed its UI in your Java/Swing application as long as I know.
The toolkit contains all the algorithms and plugin infrastructure so if you want to use some of their analysis tool embedded in your app you can use that, otherwise I don't think it's your case.
There are other Java options if you want for graph visualisation here: Java graph library for dynamic visualisation
About Gephi and sigmaJS
IMHO Gephi is far more powerful than sigma.js: it has full SNA tools, multiple layouts, a data editor, exporters, plugin-systems...
One important factor is also the size of the dataset you want to visualise: while sigmaJS can handle up to 500 nodes in the view, Gephi can layout easily 50000 nodes with GPU support as well.
Gephi is a scientific tool made for people that don't want to code to visualise a network and it does it's job. SigmaJS is one of many JS solutions to visualise graphs on a web page.
You can always export to sigmaJS from Gephi with a plugin.
What's better?
At the end of the story I guess the tool you are going to use will depends on:
do you have to visualise a big dataset? -> Java solutions will win for big ones
do you need to distribute it easily? -> Web app / SigmaJS wins for distributed
do you want to have a full integration with your app? -> Java wins

The best one I've found is Keylines, but its not cheap.
Gephi is OK, but the last time I looked it did not support Neo4j 2.0
If your a programmer Neo4j is open source, so you can fork the repository on Git and use that (you will have to check the licencing model before you commercialise any product though)

Related

Extending Bokeh to match D3.js

As I understand it, Bokeh looks to provide for Python, similar capability that D3.js provides for JavaScript. Some advantages for Bokeh I can see include the use of HTML Canvas (so we can render more to the browser), Abstract Rendering and a lower barrier to entry for people familiar with Python over JavaScript but wanting to develop interactive browser based visualisations.
This is great but, where do you go (i.e. as a developer) to extend Bokeh to match the flexibility offered by D3 e.g. to add Chord diagrams, Network graphs or develop more novel visualisations such as those demonstrated at IEEE VIS or the VAST challenge?
Does the Bokeh project have aspirations to become as fully featured as D3 (appreciate D3 has been around for a while now)?
They do want to be fully featured as D3:
Its goal is to provide elegant, concise construction of novel graphics in the style of D3.js, and to extend this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.
This is detailed in their technical vision page.
To help extend Bokeh, check the extending Bokeh page and the example of wrapping a JS library (visjs). There is also a developer guide and a enhancement proposal document.
It would be awesome to have something like D3's transitions!

Python/JavaScript/HTML create a computer network diagram dynamically

I want to create a computer network diagram dynamically on UI, with the network diagram having switches, routers and other devices and these devices are connected with links and i need to label these links at both ends of the devices being connected by a particular link.
I am open to creating this image from backend, I have python for backend, with any image creation library. Though i would still prefer if there is any way to do it with any JS module, if available. In python i came across one library PIL.
Could you please point me to any JS modules that can help me do this, or any python module which would best suite the requirement.
Thanks in advance.
You may want to take a look at the RaphaelJS Javascript library, which uses SVG under the covers. Their website have an example with a graph which may be a good starting point to your diagram creation code: http://raphaeljs.com/graffle.html That's what I'd recommend for doing it in the client side.
If you actually were to do in the backend with Python, you could look for a solution using GraphViz under the covers, maybe python-graph or pydot.

Javascript 2d plotting libraries

So I've been working on a project that requires offering the possibility to view the results of a simulation in 2D. Now the solution that was first considered was RGraph. However it seems that now the fact that RGraph's free license requires a link to their page is not in agreement with the client and we need to find some free alternatives.
Now I'm starting to look at JIT and Google Chart Tools but I'm not sure yet either if their license is better that the one of RGraph, or how difficult it would be to make the actual changes.
So basically I would like to know if you have any other javascript libraries that fit the needs (being capable of plotting a 2d array for example and having a free license) or if you have any reason why I should dismiss one of the two libraries I proposed to look at, that would also save me some time.
Thanks,
Bogdan
try flot
http://code.google.com/p/flot/
Ext JS 4 offers a variety of chart types.

Bing Maps - Javascript vs Silverlight

Currently, I am evaluating the creating of a map based system to plot data. This data would consists of shape layers (a grid - stored in a SQL 2008 Geography column) and multiple points (~5500 initially - Lat/Lon points in the same DB) that will plot the location of items on the grid. So, my question is - is there a large difference between the SilverLight Bing Map implementation and the JavaScript based implementation. Here is what I can gather from my research:
SilverLight Pros
Can handle large amounts of data more quickly
API/SDK to tie directly to .NET application code
JavaScript Pros
Do not have to download/install Silverlight on client side
Can leverage JQuery or other frameworks to pull data from webservice (I know SL can do this to using WCF, but I know JQuery rather well)
I know from this list that it looks like I should go with Silverlight, however I also have 'NEVER' done a bit of coding using the XAML stuff. Most of my experience as of late is the .NET MVC stuff and I cannot help but to take that into account as well. Does anyone know the performance 'ratio' between SilverLight and Javascript or at what point JavaScript implementation will choke? One more thing, I have looked at the DataConnect project on codeplex, but it seems to be broken - I cannot get the WKT or XAML functions to work either on their live site or the downloaded project.
If anyone out there has done a comparison/has words of wisdom for guidance/can add to my list for either of the two, I am all ears.
EDIT
I found a great Javascript/.NET MVC application example using SQL 2008 on CodePlex - Ajax Map Data Connector. It gives examples of pulling polygons, lines and points of interest from the database, placing them on the map using images tiles or the MS API as well as using intersection to determine items around a point or within a bounded box.
Personally I prefer the Javascript version because it's more multiplatform (e.g. mobiles) and easy to integrate in a webapp (plus I also love jQuery), but I think the deciding factor is probably what do you want to use the application for ?
However for Javascript, even if I love version 7, you may want to stick with version 6.3 for now because too many core components were removed (but are planned to be re-added in the future), e.g. infoboxes and client-side clustering (of course you can do your own implementations, that's what I did personally, but I would advise to use 6.3 for now).
I'd go with the javascript control (better support for multi-devices, is currently being more actively developed than the Silverlight control, sounds better suited to your skill set). However, don't try to plot 5,500 points on it. It will die.
What's more, if you're thinking about plotting 5,500 points then there's something wrong with your application design anyway - an end user is not going to be able to discern that many different points on the map. Let them filter for particular types of points, or only retrieve those that are visible in the current mapview, or use clustering to group up points at higher zoom levels - you should only be looking to have at most maybe 100 - 200 data visible data points on the map at any one time. If you really must plot that many points, then pre-render them as a tile layer and cache this rather than trying to plot dynamic vector data on the map.
And, I disagree with wildpeaks - v 7.0 is the latest stable release of the Bing Maps AJAX platform, and is a major change from v6.3. If you start coding with v6.3 now you'll only have to go through upheaval at a later date when you have to migrate to v7.0. Best to start off with v7.0 than learn a deprecated API.

JavaScript Charts API: Flot jQuery Plugin OR Google Visualization?

I am looking for a charts library to be displayed on a website. I will use intensively this library (for area, line and bar charts mainly), so I prefer to secure my choice before starting implementing.
The list of website chart libraries that I have initially considered are:
Plotkit
Emprise JS Charts
Sparkline
Protochart
gRaphael
Bluff
YUI Charts:
However after some researches on this forum and investigations on the web, I have reduced my candidate list to these two libraries:
Flot jQuery plugin
Google Visualization
Which one do you advise me to use and why (if you have worked with one or two of them, please tell me your feedback)?
How do they compare one to each other regarding ease of use, performance and features?
Thank you
EDIT: Based-Flash Chart libraries were not eligible with my constraints
I will try to answer my own question after some several tries and researches about these 2 visualization libraries, here are my own list of pros for each solution :
Flot Pros
jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot
Offline visualization : you can test or have it installed into an internal website. Google Visu can only work if you have acces to the google website !!
Customization : this is basically a JavaScript file so if you are good at JS coding, you can customize your charts as your convenience. Also the Flot plugin system allows you better modularity
Google Visualization Pros
Documentation : awesome ! Examples for each type of graphs are available in the Google site
Easy to use : Really. Easier than Flot (that requires to somehow customize the div container)
Powerful : you have many sorts of graphs and features (zooming, interactivity,...)
Java and Python API : it can helps a lot for constructing the Data Table (at least for me, I can use the Java API)
Bottom Line
If you are familiar with jQuery, go with Flot. If you need for some reasons to see your charts offline, go with Flot. If you want full control, go with Flot.
If you don't recognize yourself above, go with Google Visu. It's easy to learn and implement, very well documented and extremely powerful.
Not in your list, but I would recommend you have a look at Highcharts http://www.highcharts.com/
Highcharts is SVG, and as such, it is much more dynamic than Flot, you can restyle graphs with CSS, attach events, perform animations, etc...
It is also compatible with IE6 and it works server-side (thx to Batik)
I'm currently building a graph-intensive application, and chose Highcharts after lots of benchmarkings. I don't regret my choice.
The piwik project uses the Open Flash Chart (not on your list).
It's easy to use, has plenty of working examples very user friendly.
I am a user of Flot, and a big fan. I use it in a Grails application, and use stacked bar, line, and pie charts, including time-series and a bunch of interactive capabilities (i.e. turn off / on series with checkboxes, etc).
I found it to be a pleasure to work with overall, and feel the API is quite well developed (I saw that a bunch of other JS charting libraries adopted the API, so you'll even have some flexibility to move to another kit in the future). From looking at the google API just now for a minute, I think I like flot's better (although google may have ability to pass in a series as well, didn't see it from samples).
They just came out with a new version a few weeks ago (0.6), that supports plugins, which I expect will stimulate more innovation.
So I think part of this depends on other technologies you are planning to use. It seems like Visualization is integrated with GWT, so if you are thinking of using that, Visualization is the way to go. On the other hand, if you are thinking of using JQuery for AJAX, then Flot might be a more natural fit.
When I was making my decision to use this, it seems like Google didn't have interactive visualizations, only google charts (images), which is one of the reasons I went with Flot.
There is jqPlot (http://www.jqplot.com/), an open source project which looks good. Based on jQuery as well. I will give jqPlot a try, jQuery flot seems to be inactive.
Not in your list, but very impressive: ExtJS 4.0 charts

Categories

Resources