search

visjs / vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.
https://visjs.github.io/vis-network/
Apache License 2.0
3.05k stars 372 forks source link

Use that library in a Jupyter Notebook #372

Open cscetbon opened 4 years ago

cscetbon commented 4 years ago

I'm trying to use your library in a Notebook but it requires a DOM which I don't have. Is there any way to do without or do you have an example on how to do it using Jupyter ?

Thomaash commented 4 years ago

Hi @cscetbon,

I've never used or even heard of Jupyter so I can't really say anything here. However could you say something about the use case for this and what output you want to get? Because running this without a DOM seems quite useless to me.

cscetbon commented 4 years ago

@Thomaash, in Jupyter notebooks you can display images inline. So if the vis-network has a way to provide an array of pixels or a stream object that can be used to extract those pixels I could use something like https://matplotlib.org/tutorials/introductory/images.html#importing-image-data-into-numpy-arrays

Thomaash commented 4 years ago

I'm afraid there's no good way to do this. It's possible to get images from Vis Network. We do it for examples index but that's done by running a Chromium instance to render into a canvas in the DOM so that's only an option if you can prerender the images. It's also possible to convert the canvas into an image but then you have to have the canvas somewhere. In case you have access to document.createElement it may be possible to use the element as a container and get an image from the canvas even if it isn't in DOM but I've never tried it so I don't know if it actually works.

Other than that something would have to be implemented in Vis Network to support this (contribution opportunity here :wink:).

cscetbon commented 4 years ago

@Thomaash I might be able to use something like https://stackoverflow.com/a/43514776

sadams-rti-org commented 4 years ago

@cscetbon check out https://www.codementor.io/@isaib.cicourel/visjs-visualization-in-jupyter-notebook-phgb3fjv0

EvgSkv commented 3 years ago

@cscetbon @Thomaash Here is an example of using VisJS in regular Jupyter notebook, we need to use require here. https://www.kaggle.com/evgenyskvortsov/another-visjs/edit

Here is an example of using it in Google CoLab, which treats JS differently, so we can do it plainly: https://colab.research.google.com/github/EvgSkv/logica/blob/main/examples/more/Generic-VisJS.ipynb

Here is an example of using an open-source python library that draws graphs with VisJS: https://colab.research.google.com/github/EvgSkv/logica/blob/main/examples/Logica_example_Drawing_Graphs.ipynb#scrollTo=snWJQtjDp0qA

Hope this helps. Let me know if you have any questions, or if this would be useful to add to any documentation.

motin commented 2 years ago

And then there is https://pyvis.readthedocs.io/en/latest/tutorial.html#using-pyvis-within-jupyter-notebook