Using vis-network on the backend

[christianechevarria]

First off, vis-network is awesome.

Now that that's covered, I'd love to be able to create network visualizations on the back-end, but after looking through the docs and checking Stackoverflow I wasn't able to find any mention of using vis-network in node

I think using vis-network from the backend would be excellent for neural-network related use-cases. Particularly tracking neural-network evolutions or otherwise doing any form of research and generating visualizations. For example, I've been using it to debug my deep learning library and create demo visualizations: https://liquidcarrot.io/example.flappy-bird/ and vis-network happens to work great since it makes zero assumptions about the network structure.

For me, it would be ideal to be able to import a vis-network package then create a network with an identical API to the front-end but instead of rendering a visualization element we can get an SVG (in whatever form) that we're free to save or otherwise manipulate in any way

Any chance I've missed something huge and vis-network can actually be used this way? Any help would be appreciated!

[peachman1997]

Hi @christianechevarria , I have been designing an application to edit nodes and edges using vis.js and using node.js as the backend. I made a front end html application to edit values and linked this with a MySQL database.

The way I achieved this is by using [https://socket.io/](Socket IO) to transmit node and edge data changes from client to server. Any changes done on the client would be sent to the server to be validated then processed.

if you would like more info, let me know. but this is the route i took.

[Thomaash]

Hi @christianechevarria,

sadly there is no way to render to anything other than canvas. However you can have a look at the way we generate screenshots on https://github.com/visjs/vis-dev-utils/blob/b28725c291fdf5878e3619b14a1f65781f98b11c/src/generate-examples-index/index.ts#L520-L574. We use Pageres to take a screenshot of the canvas. Pageres uses headless Chromium for rendering therefore it can run on a server without problems. It can't give you vector graphics though.

[christianechevarria]

Thanks for the answers @peachman1997 and @Thomaash

sadly there is no way to render to anything other than canvas. However you can have a look at the way we generate screenshots on https://github.com/visjs/vis-dev-utils/blob/b28725c291fdf5878e3619b14a1f65781f98b11c/src/generate-examples-index/index.ts#L520-L574. We use Pageres to take a screenshot of the canvas. Pageres uses headless Chromium for rendering therefore it can run on a server without problems. It can't give you vector graphics though.

Going to give this a try, I'll post any code that might be useful to future issue-viewers too

[nfigay]

Hi @christianechevarria, Interested to know if and how you solved this, as I would like to deal with distributed graphs to be visualized and built at server side. BR Nicolas

[abegehr]

@chrisgereina, any code to share on this?

[remybar]

Hi,

I use visjs for some web apps for a university in Belgium and it's a really awesome tool ! Everyone is impressed by the quality of graph rendering and like to play with the physic effects by moving nodes :-)

In some cases, we have a lot of nodes/edges to show, so it takes a lot of time to stabilize. This is normal but from an UX point of view, it's not so good so I'm thinking to precompute node positions in the backend. I know that it's not possible to directly use visjs on the backend side but would you have some suggestions/ideas to do that ?

Maybe I could extract the physic engine code and use it on the backend ? Maybe I could use another tool to generate position to feed our visjs graph ? (But I couldn't find any tool which seems to fit with visjs as these tools don't support node masses for example).

Any advice/idea would be strongly appreciate !

Thanks again for this great tool !