[Share] Visdcc - a dash core components for vis.js network

Dash Python
21

Hello,

this is an amazing component!

I can put html code in the nodes?
If the answer is yes, can someone give a simple example?

Thank you

22

you can use tooltip, that is html

for i in range(Tree.tree_.node_count): 
data['nodes'][i]['title'] = '<div style = "text-align: center">' + data['nodes'][i]['title'] + '</div>' 
data['nodes'][i]['fixed'] = {'y': True}

and remenber add css

my_css_url = “https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css”
app.css.append_css({
“external_url”: my_css_url
})

23

I already tried it and it was what I was needing

thank you! @jimmybow

24

Nice work @jimmybow. Can I format this network graph to display nodes from Left to Right instead of displaying nodes all over the central node? I’m looking at a chart that resembles a Deep neural network that strictly follows from Left to Right.

25

you can, using the ‘hierarchical’ in options

options = {
‘height’: ‘1200px’,
‘layout’: {
‘hierarchical’: {
‘enabled’: True,
‘sortMethod’: ‘directed’
}
}
}

you can see my tree example https://dash-tree-vis.herokuapp.com/

26

That’s working but not quite there. The example you shared shows the graph being plotted vertically. Can I make the graph to plot horizontally instead of vertically?

27

you can, see the vis.js doc of layout option https://visjs.org/docs/network/layout.html :slightly_smiling_face:

28

Thanks. Any idea on how to add images to individual nodes?

29

Actually I was able to add individual image to a node via ‘image’:. But how can I add an image from my Local system?

30

I never done that before :slightly_smiling_face:
you can see https://dash.plot.ly/external-resources and doc of vis.js

31

Thanks @jimmybow for pointing me to the document. In hierarchical layout is there a way to display nodes in a semi circle manner? Presently its displaying sub nodes at one flat level with central node at the top. Any pointers to this will be appreciated

32

I’m trying to increase the length of the edge by using 2 methods:

  1. In each edge add a parameter ‘length’:300
  2. In visdcc.Network under options {“physics”: {“barnesHut”: {“springLength”:100, “springConstant”: 0.04}}}

But none of them seems to increase the length of the edge. Any pointers to this will be appreciated.

33

Nevermind I got it working. Instead of ‘barnesHut’ I used ‘hierarchicalRepulsion’.

1 Like
34

How to label the edge with the name?

35

How to label the edge?

36

just use label in dictionary of edge :slightly_smiling_face:

https://visjs.github.io/vis-network/docs/network/edges.html

37

Hello @jimmybow

Can we have 2 edges between 2 nodes?

for example in the picture below 2 edges between Node1 and Node 2 with different edge text/labels. I tried doing this but i am getting single edge between Node1 and Node2

nn_test

38

I think It don’t support. :slightly_smiling_face:
you can still look for your answer from vis.js doc.
https://visjs.github.io/vis-network/docs/network

39

Hello @jimmybow,
This component is awesome! Thanks for your contribution!

I’m generating a non-hierarchical network graph where I assign a title to each node. However, when I haver my mouse on a node the title never pops up. Do you have any suggestions for diagnose this problem? I’ve tried disabling the physics, wrapping the title with <div> tags, etc. Nothing I try works. Thanks for any suggestions!

40

HI,
you need to add CSS : https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css
see GitHub - jimmybow/visdcc: Dash Core Components for Visualization.

1 Like