Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
Hi Anvaka I'm using your graph to visualize ontology in my university study project. But my supervisor wants me to find out what algorithm is used in vivagraphJS can you help me with that. Does it have a name?
Gabriel SoHappy
Has anyone tried making the nodes editable?
Hi Andrei. Some really cool stuff in your repos ! Do any of your libraries do offline 3d layout for graphs ?
Hi Is there an example of building this graph from a json file ? Please do let me know
Leon Pham
Hi, have anyone tried implementing Vivagraph with React.js?
Thanks anvaka for your library realy it's healpful
but I need to run it for some of my customers who hasn't a high specs computer. So I decided to buy a high rendering VGA card and try to run a code on server side insted of client side. can I do that and how?
@anvaka when using ngraph.pixel what is your advice for adding text labels to nodes? Use TextGeometry, or an absolutely positioned element (like the tooltip), or something else?
Andrei Kashcha
@palafranchise I'd go with absolutely positioned elements. They are way easier to customize than text geometries
Andrei Kashcha
@MonkeyChap check this out: https://github.com/anvaka/pm - all graphs have links to offline layouters. If your graph is huge (more than 1 million nodes) I'd go with https://github.com/anvaka/ngraph.native otherwise you can try https://github.com/anvaka/ngraph.offline.layout
Hi @anvaka , I've forked some of your repos for layout to port on cytoscape and try adding some webWorkers for qtree. Nice algo
Andrei Kashcha
@Nickolasmv thank you :)!
Markus Tacker
Hoi, I'm trying to dynamically change layout parameters (e.g. springLength) but it seems that this is not expected. What I want is instead of zooming int the graph just increase the spring length. Any tips?
Hi, @anvaka. I want to add additional parameter to force-layout algorithm - radius of nodes (for avoiding overlaps between nodes). Which part of algorithm will be appropriate for this? What do you think? Now I am using collision detection like post-processing but not sure that this is a good way.
Shikhar Gupta
@anvaka I am trying to add a small graph using ngraph by providing x,y and z co-ordinates, and my plan is to retrieve the co-ordinates back after the relaxation. Unfortunately I am getting back the original co-ordinates. Any tips??
Gilberto Torrezan
Hi guys, newcomer here. Do you have any idea how to avoid nodes from overlapping each other? I'm trying to do a node visualization just like Neo4J does in its query tool. Do I have to use another lib to calculate the positions or is there any property I can set to make that work?
Byron Ruth
Hi everyone. I came across this project as an alternative to Cytoscape that has an SVG-based renderer. My use case for SVG is to inject HTML elements within the SVG nodes using foreignObject (?) My general question is whether anyone has done this successfully before and if so would this be done in the graphics.node(...) callback?
Basically I want to render a workflow diagram as shown here: https://rdm.academy/
The user will need to interactively build this up and I would like to use a graph library to handle layout and basic interactivity.
Gilberto Torrezan
(Today I discovered I'm registered in this Gitter... My question from Sep 13 2016 didn't get any response, and in fact the question from Byron is the only activity in months. This Gitter is abandoned)
Amirhossein Aleyasen
Hi everyone, I am wondering about the performance of VivaGraph in comparison to D3 for drawing large graphs. I'll be thankful if anyone let me know about the concrete performance numbers. Thanks in advance.
Tiago Jesus
Hi everyone, can anyone tell me if you can export vivagraph canvas (with webgl) to a pdf? I know we can right click on the canvas and save as image but that retrieves an image with low resolution that is not very suitable for scientific publications. So, I started wondering if anyone have attempted this and how. Thanks in advance.
Hello ! I might not be at the good place and have a wired idea, but here it is: I try to use ngraph.three in a react/redux environment. I reach to have my graph drawn an updated as I wish. I am currently looking at ngraph.prixel, but there is not the run() method so I don't succeed to draw my graph... is anyone have hints ?
Another not related question... in "ngraph family" is there a way to "weight the edges" ? I mean have different parameters for edges according to a score ?
Robert Nicolas-Emmanuel
@anvaka Hello ! We are using ngraph.pixel for a project, and we want to change the size of the links in the graph. How is it possible ?
RYeah Sh
hi, where can i find the documentation?
Simon Härer
Hi, I'm currently working with ngraph 3d-forcelayout. It is a great library and very convenient to use. Sadly, I want to achieve two things that I couldn't manage myself:
  • From another js forcegraph library I know a parameter that limits the distance nodes influence each other (e.g. if the distance of A and B is greater 100 then there is no repulsion between these node). Does such a parameter exist?
  • Is there a way to restrict movement into a specific direction? E.g. I have a floor and don't want the layout to move node towards this floor.
Hello @smoes . There are some options to set your layout. You can check them here -> https://github.com/anvaka/ngraph.physics.simulator/blob/master/index.js
maybe theta and gravity options can help you if I correctly understand what are trying to achieve
Simon Härer
Thanks for you answer @Zachariadis_gitlab !
Tetha actually sounds like solving point 1, thank you!
Gravity, however, seems not to be a force with a fix direction but describes how node repel each other, right?
Pete Kazmier
Trying to modify the basic demo in ngraph.pixel/demo/basic. In all of the demos, the graphs are programmatically created, but I need to "require('ngraph.graph')" so I can call graph.addNode and graph.addLink. I don't understand the node ecosystem to understand how to build that bundle.js file. But it seems like I need to somehow include 'ngraph.graph' in that file so I can require it from the top portion of bundle.js.
Vincenzo Palazzo
Hello guys I have an question on build oriented graph with Vivagraph, I'm using the WebGL for build an big graph (ALL transaction bitcoin), This is an minimal example https://codepen.io/vincenzopalazzo/pen/LYYNYRB?editors=0010#0. I can add the arrow to the link with the WebGL graph? ps:I know how create the arrow with the SVG
Himaruk Silva
Hi, Im a beginner to the vivagraphJS. I need to know "How we can import external graph file to the graph generator?"
@vincenzopalazzo it is interesting project for me as well - do you want/need any help ?
hey, i'm a little lost. i want to set my own positions for all the nodes before forcedirect begins. which seems like 2 layout algos: my custom one, then forcedirect. how do i set that up?
Vincenzo Palazzo
Hi @gg4u I migrated to ngraph module and built the web app with react, this is the finish app https://vincenzopalazzo.github.io/SpyJSBlock.react/
@vincenzopalazzo nice job! Are you interested in performing analytics on the types of subgraphs you get? Tech questions, do ytou apply a worker to compute layout ?
Vincenzo Palazzo
@gg4u Thanks, What did you mean with "types of subgraphs you get"? and about the "Tech questions" No, I precomputed the layout offline with ngraph.native
by "types of subgraphs you get" I mean the topology of transactions. They may be circular graphs, chains, have peculiar shapes. It is something of use in fraud detection.
Vincenzo Palazzo
@gg4u, mh yes it was true before but if very difficult analizig the bitcoin graph transaction, on this argemt there is a lot of interesting think to talk, but if we using a vere big oversemplification, yes is possible found the fraud.
@vincenzopalazzo yes. i wondered if you were plotting the bitcoin graph on purpose of fraud detection or for research. indeed a very interesting think to talk.
Vincenzo Palazzo
@gg4u The plot of graph is only a demo of my research project and the goal is to find the fraud detected with only the binary day stored from Bitcoin core client. Yes was a cool agument to talk. I maked an aswer on stackoverflow on the ngraph modules used in to build the big graph https://stackoverflow.com/a/61053059/10854225
anyone have example/idea how to add text in webgl? not the dom way?
Vincenzo Palazzo
@neo6053 you are using the ngraph module of webgl or you are using for exampe pixi.js?
thanks for the reply btw, i thought this chatroom is no active. :) i'm using vivagraphjs webgl module, i saw sample of webglcusomtnode and andrei make the square node become a circle node, but to code in webgl , it's beyond me. So, I wonder is there any easier way. there are 2 things I want to achieve actually, to use fontawesone icon for the nodes + add text label to the node.

I saw this 2 site , but not sure how to implement it with vivagraph ...

and there are so many libraries by andrei, i dont know which to choose. ngraph.pixel, ngraph.three, vivagraphjs, pixi, fabric. I try to render some large graph like perhaps 10knodes, 200k edges. I'm searching around and found vivagraph is not bad, but it has very limited capabilities :(

as i research , visjs is the most feature rich free network graph out there , come next by cytospace, perhaps next sigmajs , but sigmajs dont have too many sample out there. .. others like keylines,linkuriuos,ywork are powerful but paid.
i have prepared many jsfiddle for all different libraries, i can share it here. :)

usually all of them are 3000nodes, 150k edges
vivagraph (fast but very limited capabilities):

Vis with d3 force sampled engine (my favourite so far because of all the available features, well, as a developer choosing a library for the company, we tend to choose one that need to code less. i tried to add cluster function but it's so slow) :

the old fashion d3 canvas way. turns out the canvas perform really really well nowadays,it surprise me. and there are many examples outside, this might be it.



vis with ngraph.layout. somehow faster than d3 sample. contradict with here : https://observablehq.com/@zakjan/force-directed-graph-pixi

vis with sigmajs paragraphl, suppose to be the fastest according to the site, but i cant get it to work

threejs 3d-force-graph. in 2D, I have no idea why we need 3D graph. it's confusing, haha


ngraph pixi. kinda slow actually. i didnt use 150k edge here.

cytospace euler.