I intend to visualize a complex network ( with about 60k edges and 10k nodes) using D3.js. However, it seems the classic force-directed graph layout can only deal with about 10k edges on an ordinary laptop. Is it possible to visualize the entire graph using D3 or do you have some better choices? thanks!
D3 by default uses DOM elements and in general a large number of DOM elements on a page could make it very slow and unresponsive.
Libraries that use the HTML Canvas are in general more scalable. Have a look at Sigma.js. It can render on the HTML Canvas and should be able to handle larger graphs than D3.
D3 supports rendering on the Canvas too, but I am not sure if any of D3-based graph libraries support Canvas yet or not.
Related
The number of nodes in my d3 graph is too large. So I built a zoom mechanism in that graph. Now the problem is, I just cannot display text for each nodes since they will overlap each other. However when I zoom in to the nodes, the space is enough to display texts.
So how do I show texts when the space is enough to show all of them without overlapping?
I have had this same problem in the past. Unfortunately optimal label placement is not an easy problem. To mitigate overlap effects one option is to use a restricted force layout for label placement. You can also try using callouts to allow the labels to move farther away from the nodes.
In the past I have implemented a sort of greedy collision detection based algorithm that goes something like:
sort the labels in decreasing priority
for each label in the list // so most important first
if the label does not overlap any placed labels
place the label and add it to my collision data structure (e.g. quad tree)
else
hide the label
Obviously this will have some non-optimal cases and it can be slow if you have a lot of animations going on. But when you have the option to zoom in to see more label and if your absolute number of labels is not too high then it works quite well. There are also a number of obvious ways to speed it up like restricting testing to only labels within the view (but then you need to update on pan).
You may find some helpful suggestions here including an implementation of collision detection.
I am using David Piegza's open source code for visualizing a 3D Force-Directed graph using Three.js. The source code can be found here: https://github.com/davidpiegza/Graph-Visualization
When I start visualizing 2,000+ nodes, things get VERY slow. The visualization takes 30 seconds or so to load, and rotating and panning has a long delay. What could be the cause of this? The force-directed algorithm? Can Javascript handle this many nodes in a force-directed, 3D graph? Is there some sort of back-face culling algorithm I can use for 3D, force-directed graphs?
I guess force-directed layout algorythm is not main problem here. The main one is GPU resources. I'm developing a 2D webgl graph now, and use particles for displaying nodes (this is much faster than drawing cubes). And even such realization has GPU limitations. You can try to zoom graph as much as possible and if the fps rate will increase than my suggestion is right (fewer objects you see on the screen - faster GPU working).
I have created a simple line graph with data from a mySQL database using PHP to return the data in JSON format.
https://gist.github.com/5fc4cd5f41a6ddf2df23
I would like to simulate "live" updating something similar to this example, but less complicated:
http://bl.ocks.org/2657838
I've been searching for examples on how to achieve this simply as new to D3 - to no avail.
I've looked at Mike Bostock's http://bost.ocks.org/mike/path/ path transitions, but not sure how to implement this using json data.
Can anyone help with either an example or some direction on how I could accomplish this?
Doing that kind of line transformations is tricky in SVG because moving large number of points just a little and rerendering the complete line can hurt performance.
For the case when interactivity with each data point is not paramount and the time series can grow to contain arbitrary number of points, consider using Cubism. It is a library based on d3 but meant specially for visualizing time-series data efficiently. To prevent rerendings of SVG, it draws the points on a canvas, allowing for cheap pixel by pixel transitions as new data arrives.
I'm working on a web-app that uses quite a few large, complex images for backgrounds and for foreground illustrations. I'm leaning toward using SVG instead of raster graphics because of its scalability and the dynamic interactions it allows. But some of the larger images are very complex (several thousand paths, drawn in Inkscape).
How practical will it be (in terms of performance) to use SVG images of that kind of size? Will it make my page significantly slower than if I were using PNG images? Are there specific techniques (e.g., one embedding approach over another) that will make the difference in downloading and rendering speed?
You can simplify the path data to fit your view port size.
Some invisible elements should not be output to DOM tree.
Google map also uses SVG and runs very well.
I am currently using Graphviz for visualizing control flow graphs. Basically, a (reducible) control flow graph is a DAG plus some edges which point back to nodes in the previous layers. The latter edges should not affect node placement.
Currently, dot draws the graphs pretty neatly, but it lacks an easy way to add interactivity (e.g. folding, scrolling, zooming), which is priceless for analysis of very large graphs. Therefore, I selected d3.js as the most mature and feature-rich graphing library.
I'm pretty sure that there is an easy way to draw layered graphs (as does dot) in d3.js, but I don't seem to recognize it. How do I do that? If this helps, I already perform dominator analysis on my CFG.
The Dagre library for directed graph drawing is rendering-agnostic, but integrates well with d3.js: https://github.com/cpettitt/dagre
Here's a demo rendered using D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html