VivaGraphJS
Graph drawing library for JavaScript
im using vivagraph to embed a svg into a div (as a background) it works fine, but vivagraph offers interaction (scroll zoom) is there anyway to remove that kind of interaction with the svg?
I tried to tie up an eventlistner to the svg and disable it through there.
Is there not an easy way to just say "dont interact with svg just scroll down"?
Thanks
Source: (StackOverflow)
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 web gl and need a few pointers from you:
1). 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?
2). 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?
3). 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?
4). 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?
Many Thanks,
Abhi
Source: (StackOverflow)
To prevent as much work on the client as possible, I want to send the node positions from the server and load the graph from JSON.
Do I have to iterate through the nodes and setNodePosition() for each of them, or can I structure the JSON so that the positions are automatically set?
Thanks
Source: (StackOverflow)
I have looked at d3.js, but it seems to not work well for large data sets. I might try to switch from svg to a canvas and see the effect, does anybody have any insight on how well this works for large data sets.
Or should I look into vivagraph.js or another graphing engine?
Additionally I saw similar posts on the same question, but the answers were from 3 years ago, so I'm looking to see if anything new is better.
Thanks
Source: (StackOverflow)
I have an array of DOM elements and I am trying to iterate through them and add a class using jQuery, but jQuery does not seem to be setting the class with the addClass method. However, the attr function still works. What am I doing wrong?
Here are my results from the console.
http://jsfiddle.net/kf77m/1/
line 64
$(ui).addClass("class", "js-tooltip");
Source: (StackOverflow)
I need insert a mouseclick event on graph nodes, but all ways don't work with me.
My code that done the graph is this:
<!DOCTYPE html>
<html>
<head>
<title>01. Create Graph. Vivagraph SVG tutorial.</title>
<script type="text/javascript" src="VivaGraphJS-master/dist/vivagraph.js"></script>
<script type="text/javascript">
function main () {
// 1- criar um projeto de grafo
var graph = Viva.Graph.graph();
// 2 - adicionando nós e arestas
graph.addNode('natalia', 'ledlightblue.png');
graph.addNode('jessica', 'krec_record.png');
graph.addNode('lucas', 'ledyellow.png');
graph.addNode('leo', 'ledgreen.png');
graph.addNode('hcii', 'ledpurple.png');
graph.addNode('evento', 'krec_record.png');
graph.addLink('natalia', 'hcii');
graph.addLink('jessica', 'hcii');
graph.addLink('lucas', 'hcii');
graph.addLink('leo', 'hcii');
graph.addLink('jessica', 'evento');
var graphics = Viva.Graph.View.svgGraphics();
//var renderer = Viva.Graph.View.renderer(graph);
graphics.node(function(node) {
var ui = Viva.Graph.svg('image')
.attr('width', 32)
.attr('height', 32)
.link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);
return(ui);
});
graphics.link(function(link){
return Viva.Graph.svg('path')
.attr('stroke', 'black')
.attr('stroke-width',2);
}).placeLink(function(linkUI, fromPos, toPos) {
var data = 'M' + fromPos.x + ',' + fromPos.y +
'L' + toPos.x + ',' + toPos.y;
linkUI.attr("d", data);
})
var renderer = Viva.Graph.View.renderer(graph, {
graphics : graphics
});
renderer.run();
}
</script>
<style type="text/css" media="screen">
html, body, svg { width: 100%; height: 100%;}
</style>
I tried many ways like this that is used to do mouseover event
I'm using VivaGraph.js to do the graph
Some solution?
Source: (StackOverflow)
I've gotten myself into a big and weird position.
I use VivaGraph JS for drawing Conceptual Graphs in the browser. The specific implementation I am using, relies on SVG, and thus my main graph DOM element is an SVG.
During the creation of Edges between nodes, I wrote a small piece of code using Paper.JS which uses canvas from HTML5. In fact, I hacked into the source code provided by vektor.js and simply changed it to listen to CTRL+MouseDown events.
Those two elements, the svg graph and canvas, overlap and have exactly the same dimensions. The graph has nodes and edges manipulated, which listen to mouse and keyboard events, and sadly so does my canvas.
In fact, the reason for using the canvas, was that I wanted to draw a line (a vector or edge or arc) during the mouse-movement, to show to the user what the edge being created would be, before I actually created that edge in the graph.
I could not do this using SVG (Yes, I know, it should be doable) and Paper.js made it extremely easy for me.
Sadly, depending of the order those DOM elements are displayed, either the canvas captures the events, leaving the graph useless, or the graph captures all events, leaving the canvas useless.
Is there some way to add transparency to both DOM elements?
The event listener for the graph, is built into VivaGraphJS, and the event listener for the Paper Vertex, is built into Paper.JS
Ideally, I would like to have the graph on-top, capture the events, and then propagate them back to the canvas, so that the arrows are drawn. I have the feeling that this should be doable, either via pure JavaScript, or by using jQuery.
So far, the events captured in the graph like this:
var graphics = Viva.Graph.View.svgGraphics();
/// some other stuff
graphics.node( function( node )
{
var ui = Viva.Graph.svg('g' ).attr('width', nodeSize )
.attr('height', nodeSize )
// Position the node, add its text, etc, etc...
$( ui ).mousedown( function( event )
{
event.preventDefault();
if ( event.ctrlKey )
{
if ( ctrl_mouse )
{
createEdge( ctrl_mouse, node.id );
ctrl_mouse = null;
// Remove the temporary arrow from canvas - the graph now has a permanent edge
}
else if ( !ctrl_mouse )
{
ctrl_mouse = node.id;
// Start drawing a temporary arrow on canvas
}
}
All this takes place in one file graph.js
In another file edge.js, I setup the event listeners and the way the vector is drawn. I've added it into jsfiddle but sadly it won't run there (I am guessing the keyboard events may not be propagated properly?).
The problem is that Paper.Js has its own event listeners:
function onMouseDown( event )
function onKeyUp( event )
function onMouseMove(event)
Obviously those events have their equivalent in pure JavaScript and jQuery, but the ones I capture in VivaGraphJS or jQuery cannot be propagated to PaperJS, since they are different objects.
So, can I somehow (preferably by using pure JavaScript, but jQuery will also work) emulate or send those events to Paper.JS?
Source: (StackOverflow)
I need to read a json and add nodes and links on my graph using Vivagraphjs. This run very well in the next exemple:
var g = Viva.Graph.graph();
function main() {
var dataScreem = function(){
var data = {
"nodes":[{"type":"Event", },
{"type":"criminal",},
{"type":"eventSpot",}],
"links":[{"group":"Event","target":"criminal"},
{"group":"Event","target":"criminal"},
{"group":"Event","target":"eventSpot"},
{"group":"eventSpot","target":"criminal"}]
};
for (var i = 0; i < data.nodes.length; ++i){
g.addNode(i, data.nodes[i]);
}
for (i = 0; i < data.links.length; ++i){
var link = data.links[i];
g.addLink(link.group, link.target);
}
return g;
}
but now, i need to read the follow json:
var g = Viva.Graph.graph();
function main() {
var dataScreem = function(){
var data = {
"situationId":["1"],
"source":[
{"informationSource":"190"},
{"eventSituation":"01"},
{"crimeCategory":"robbery"},
{"date":"2015-05-15"},
{"time":"12:20:03"}],
"report":[{
"criminal":[{
"0":[{
"weapon":[
{"status":"true"},
{"type":"gun"}],
"vehicle":[
{"status":"true"},
{"stolen":"true"},
{"model":"mercedes"},
{"color":"preto"}],
"escapeTo":["dire\u00e7\u00e3o ao metr\u00f4 klabin"],
"garb":["camiseta vermelha"],
"physical":[null],
"tatto":[
{"status":"false"},
{"description":null},
{"local":null}],
"location":[null]
}],
"1":[{
"weapon":[
{"status":"true"},
{"type":"gun"}],
"vehicle":[
{"status":"true"},
{"stolen":"true"},
{"model":"mercedes"},
{"color":"preto"}],
"escapeTo":["dire\u00e7\u00e3o ao metr\u00f4 klabin"],
"garb":["bon\u00e9 preto"],
"physical":[null],
"tatto":[
{"status":"false"},
{"description":null},
{"local":null}],
"location":[null],
"quality":[{"completeness":"34.65"}]
}],
}],
"object":[{
"0":[
{"object":"car"},
{"description":"mercedes"},
{"color":"preto"}],
"quality":{"completeness":"41.52"},
}],
}],
"victim":[{
"0":[
{"genre":"male"},
{"location":"domingos setti; luis vives"},
{"status":null},
{"physical":null}],
"quality":[{"completeness":"51.23"}]
}],
"eventSpot":[{
"0":[
{"adress":"domingos setti; luis vives"},
{"street\/avenue":"domingos setti; luis vives"},
{"number":null},
{"reference":null}],
"quality":[{"completeness":"82.32"}]
}],
"quality":[{
"overallCertainty":"62.31"}]
};
for (var i = 0; i < data.report.length; ++i){
g.addNode(i, data.report.criminal[i], data.report.object[i], data.report.victim[i], data.report.eventSpot[i]);
}
return g;
}
Anyone have some idea the correct way to do this?
Source: (StackOverflow)
This is a requirement I had to solve so I thought I would post the solution I used for others.
I needed a button that would allow me to save a VivaGraph SVG rendering as PNG.
Source: (StackOverflow)
I tried the following code for getting the position of a node in Vivagraph.js. Not sure why it is returning undefined.
When I console.dir(node) I do see that a position is being set, but for some reason I cannot access it.
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength : 20,
springCoeff : 0.0008,
dragCoeff : 0.1,
gravity : -10,
theta : 0.5
});
var graphics = Viva.Graph.View.webglGraphics();
var nodeSize = 10;
graphics.setNodeProgram(Viva.Graph.View.webglImageNodeProgram());
graphics.node(function(node) {
//url location on your server
var ui = Viva.Graph.View.webglImage(nodeSize, 'https://lh4.googleusercontent.com/' + node.data);
console.dir(ui);
return ui;
}).link(function(link) {
return Viva.Graph.View.webglLine(colors[(Math.random() * colors.length) << 0]);
});
graph.forEachNode(function(node) {
console.log('pos ' + node.position);
});
Source: (StackOverflow)
How to specify a weight for a link in a VivaGraphJS graph? E.g. I want get a resulting social graph where a married couple is displayed closer than somebody only loosely known.
With the springLength I can define a general distance, but nothing that is specific per link.
Source: (StackOverflow)
I am using the VivaGraph.js library to render a graph in SVG. I am trying to display an image cropped to a circle, for which I am using a clipPath element - as recommended in this post.
However, when I create a new SVG element of type that has a capital letter in it, e.g. clipPath in my case, the element that is inserted into the DOM is lowercase, i.e. clippath, even though the string I pass in to the constructor is camelCase. Since SVG is case sensitive, this element is ignored. Everything else seems to be okay.
I also tried to change the order in which I append the child elements, in hopes of changing the 'z-index', but it didn't have an impact on this.
I am using the following code inside of the function that creates the visual representation of the node in the graph (the 'addNode' callback) to create the node:
var clipPhotoId = 'clipPhoto';
var clipPath = Viva.Graph.svg('clipPath').attr('id', clipPhotoId);
var ui = Viva.Graph.svg('g');
var photo = Viva.Graph.svg('image').attr('width', 20).attr('height', 20).link(url).attr('clip-path', 'url(#' + clipPhotoId + ')');
var photoShape = Viva.Graph.svg('circle').attr('r', 10).attr('cx', 10).attr('cy', 10);
clipPath.append(photoShape);
ui.append(clipPath);
ui.append(photo);
return ui;
Thank you!
Source: (StackOverflow)
I absolutely love Vivagraph JS. Having said that, I've run into a pickle, that is probably WebGL specific.
I'm trying to:
var graph = Viva.Graph.graph();
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength : 30,
springCoeff : 0.0003,
dragCoeff : 0.005,
gravity : -0.2,
theta: 0.8
});
var graphics = Viva.Graph.View.webglGraphics();
graphics.node( function( node )
{
node.addEventListener( 'click', function ()
{
console.log( 'clicked node: ' + node.id );
});
return Viva.Graph.View.webglSquare( 10, color );
});
var renderer = Viva.Graph.View.renderer( graph,
{
container : document.getElementById( 'graph' ),
graphics : graphics,
layout: layout
});
renderer.run();
I've seen a similar example, using the SVG instead.
Using WebGL doesn't seem to work:
Uncaught TypeError: Object [object Object] has no method 'addEventListener'
How can I add an event listener from javascript/jquery to the webgl particle that makes up the node?
Or should I abandon WebGL altogether for my intents and purposes?
Source: (StackOverflow)
I would like to add glow effect on line of my graph in webgl like the Interactive Globe: Small Arms Imports & Exports.
I'm using the library Vivagraph.js to display nodes and links, not Threejs.
Fragment Shader:
precision mediump float;
varying vec4 color;
void main(void) {
gl_FragColor = color;
}
Vertex Shader:
attribute vec2 a_vertexPos;
attribute vec4 a_color;
uniform vec2 u_screenSize;
uniform mat4 u_transform;
varying vec4 color;
void main(void) {
gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0.0, 1.0);
color = a_color.abgr;
}
The render function:
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, storage, gl.DYNAMIC_DRAW);
if (sizeDirty) {
sizeDirty = false;
gl.uniformMatrix4fv(locations.transform, false, transform);
gl.uniform2f(locations.screenSize, width, height);
}
gl.vertexAttribPointer(locations.vertexPos, 2, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.vertexAttribPointer(locations.color, 4, gl.UNSIGNED_BYTE, true, 3 * Float32Array.BYTES_PER_ELEMENT, 2 * 4);
gl.drawArrays(gl.LINES, 0, linksCount * 2);
frontLinkId = linksCount - 1;
Have you any idea to add information about glow on fragment shader ?
Thx
Source: (StackOverflow)