Deprecated Use fourdd
May 28th, 2018
FourD is a browser library for dynamically displaying force directed graphs. FourDSocketProxy brings that power to Node.js.
npm install fourdsocketproxy
FourDSocketProxy comprises two systems, the browser frontend, and the socket server.
To run fourd, import the init function, and wait for the promise to resolve, like so:
var SIZE = 5;
require('fourdsocketproxy')().then(fourd =>{
fourd.clear();
var options = {cube: {size: 10, color: 0x0000ff}};
var depths = [];
for(var k=0; k<SIZE; k++){
var rows = [];
for(var i=0; i<SIZE; i++){
var column = [];
for(var j=0; j<SIZE; j++){
column.push(fourd.add_vertex(options));
if(j>0){
fourd.add_edge(column[j], column[j-1]);
}
if(i>0){
fourd.add_edge(column[j], rows[i-1][j]);
}
if(k>0){
fourd.add_edge(column[j], depths[k-1][i][j]);
}
}
rows.push(column);
}
depths.push(rows);
}
});
Calling require('fourdsocketproxy')
doesn't do much, but returns a function; Call it, and you get a promise for a fourd
object. The fourd
object defines the following functions:
var a = fourd.add_vertex(vertex_options);
var b = fourd.add_vertex(vertex_options);
var e = fourd.add_edge(a, b);
fourd.remove_edge(e);
fourd.remove_vertex(a);
fourd.clear();
The add_vertex function takes a small number of options:
var options = {cube: {size: 10, color: 0x000000}};
// or
var options = {cube: {size: 10, texture: 'path/to/img.jpg'}}
The fourd object is an EventEmitter, you can react to clicks on an individual vertex like so:
// initialization, as above ...
fourd.on('click', event => {
console.log(`mouse click! button: ${event.button_id}, vertex_id: ${event.vertex_id}.`);
});
The FourD frontend runs about 250 vertices. More are possible, but you might want to design around this limitation.
FourDSocketProxy uses
On the server, we have
And of course many thanks go out to Dr. Todd Veldhuizen for publishing Dynamic Multilevel Graph Visualization.