I'm looking to create some visualisations for my neo4j data, and there are some really nice settings in use in the browser that's bundled with it, but there seem less than straightforward to emulate when using d3 - my setup was based on the neo4j visualisation guide at http://neo4j.com/developer/guide-data-visualization/ but this guide doesn't really get you anywhere near what the browser achieves.
For example, I'm looking to emulate:
multiple curved path between nodes
paths which end at the edge of the node, and not the center
graph initialised in a static position (though could probably just hide until d3 presumably fires some event)
I've not seen any official CSS/JS release to get the same effects, so I guess it's assumed the user will code from scratch. Are there any other options for quickly achieving this?
Many thanks
I think that's kind of the holy grail. If you make it, would you share it with us? ;)
In the meantime, sigma.js is a pretty nice library. Linkurious even released a set of tools on top of it to do even more:
https://github.com/Linkurious/linkurious.js
Related
I have been using VivaGraphs for network analysis, but my knowledge is very rusty around JavaScript and concepts of SVG and WebGL in particular. I have been able to create nice networks using both SVG and WebGL and need a few pointers from you:
I feel WebGL is way faster than SVG when it comes to rendering large networks. I tried on a network with 80k edges and 20k nodes. Am I right in this assumption?
SVG is far easier to customize appearance of nodes and edges, WebGL is far too restrictive (or maybe my lack of knowledge). As in do you believe SVG gives me far more flexibility in customization?
One thing I noticed is that I need to pause my graph after some time otherwise the clusters in my graph keep on drifting. Anyway I can restrict my graph coordinates so that it never goes out of my screen size?
One major issue with WebGL I faced was that when I paused the rendered, none of my code worked (like events for node hover, click etc). But the moment I resumed it, it worked. This is not the case in SVG. My Hover,click functions on nodes work even if renderer is paused. This is a big showstopper in my case. Do you think there is a way to counter this?
Please open an issue on GitHub repository or share a link with broken webgl inputs - I'll be happy to take a look and fix a problem.
In terms of your intuition, yes, webgl is much faster, yet requires more effort to work with.
I am trying to make a browser-based tool that lets you inspect dependency graphs as they appear in module systems of programming languages and Makefiles.
I am looking for a visualization framework that does the drawing for me.
The requirements are that the toolkit can
label nodes (and hopefully edges)
automatically space out the graph to the right size (I don't have to guess good dimensions) given that I have infinit space (scroll bars are fine)
layout the graph nicely so that it doesn't look as messy
be fine with <= 5000 nodes
run with JS only (no Flash or desktop apps)
Optionally, it would be nice if it made it easy to move nodes around and highlight or hide parts of the graph for better overview.
It does not matter much what backed is used (SVG, canvas, all fine).
I have looked at quite a few libraries so far (especially from Graph visualization library in JavaScript), but not found a fitting one yet:
d3 is nice but the only node-graph it delivers is a force graph, which is focused on real time physics. Once loaded, you have to wait and watch for the physics engine to stabilize. I don't need animations nor the Force, and want to show the graph right away.
GraphDracula's examples are pretty much what I am looking for, but already with 70 nodes and 400 edges, the drawing performance becomes really bad. It also has very little documentation (being a 35 line code example).
Do you know something that meets my requirements? Thanks!
In a commercial scenario you might want to consider yFiles for HTML:
Regarding your requirements it can:
Add any number of labels to nodes and edges
Provide virtually infinite scrolling/panning/zooming area
Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited
works nicely on desktop browsers with larger numbers of nodes. Depending on the visual complexity and graph structure, 5000 elements might proove difficult with todays browser implementations, though.
It's a pure Javascript library with no dependencies whatsoever
Uses SVG as the main backend, but can also leverage Canvas
The library is well documented, which is necessary given its complexity
Here is a screenshot showing some of the above features in action - the layout was calculated automatically:
Disclaimer: I work for the company that creates the library. On SO/SE I do not represent my employer. This is my own post.
Dagre works pretty well for graph layout (horizontal/vertical alignment, labels, etc.) and has D3 renderer.
https://github.com/cpettitt/dagre-d3 (check images at the end)
https://github.com/cpettitt/dagre
Wikipedia's entry says balloon tree layouts are one of the common types, but I can't find any javascript drawing library that seems to support it out of the box. Am I missing one? A cheap or open source Flex/ActionScript library works too. I don't really know anything about graph drawing. Would it be easy to use an algorithm from a paper with d3.js or something?
I've implemented a balloon layout for d3 for my uni honours project. Its currently in my d3 fork, but I'm hoping to send a pull request upstream some time after the honours rush (provided the d3 folks want it). Its definitely still a work-in-progress and in need of review, but here it is.
You can check out this bl.ock of mine that uses it.
I am trying to find some example code using a javascript library for a force directed graph in which the user can move any node around (and the graph responds dynamically) - but then each node can be clickable and open an "node detail" page (in a different tab).
I looked through D3.js, arbor.js, jit (javascript infoviz toolkit), springy. Those all look great and have demos which are close to what I want, but not quite there.
I'm not an experienced js programmer, I mostly do server side stuff.
My fear is that I might try to learn one of these libraries to try and implement my use-case only to find that it won't work for some reason. For example, one of these (D3) has a discussion in its forum that clicking a node is often mistaken for moving the node and there didn't seem to be a quick workaround. In another one (arbor.js), the front page (in addition to being minified) shows something close to what I want but the nodes which are movable are not clickable and the nodes which are clickable are not movable.
FF or Chrome is fine - I don't need IE support.
I am also open to something Flash based - as long as I don't need to compile anything in Actionscript/Flash - something with a js/html API.
Thanks.
I think that's a pretty good list of tools you have. Protovis?
I suspect it's actually not going to be much work to grab a click event from any JS-based tool-- but I haven't done that specifically with any of the ones you mention.
A couple years ago I did a prototype project using a pure Javascript implementation. Everything is just DOM nodes, so you can definitely grab clicks as necessary. It's fine, but since the code is not actively maintained (as far as I could find), I did have to do quite a bit to fit it to my needs. Using something with more recent and active development is a good idea. I also learned that performance was going to be an issue, especially in Firefox. You can play with my prototype and see where it breaks down-- which it does. I think 100 nodes or so is the danger point.
Good luck!
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).