vis

vis(data, graph_height=450, details_height=100, show_details=False, show_details_toggle_button=True, show_menu=False, show_menu_toggle_button=True, show_node=True, node_size_factor=1.0, node_size_data_source='size', use_node_size_normalization=False, node_size_normalization_min=5.0, node_size_normalization_max=75.0, node_drag_fix=False, node_hover_neighborhood=False, node_hover_tooltip=True, show_node_image=True, node_image_size_factor=1.0, show_node_label=True, show_node_label_border=True, node_label_data_source='id', node_label_size_factor=1.0, node_label_rotation=0.0, node_label_font='Arial', show_edge=True, edge_size_factor=1.0, edge_size_data_source='size', use_edge_size_normalization=False, edge_size_normalization_min=0.2, edge_size_normalization_max=5.0, edge_curvature=0.0, edge_hover_tooltip=True, show_edge_label=False, show_edge_label_border=True, edge_label_data_source='id', edge_label_size_factor=1.0, edge_label_rotation=0.0, edge_label_font='Arial', zoom_factor=0.75, large_graph_threshold=500, layout_algorithm_active=True, layout_algorithm='barnesHut', gravitational_constant=- 2000.0, central_gravity=0.1, spring_length=70.0, spring_constant=0.1, avoid_overlap=0.0)[source]

Create an interactive graph visualization with HTML/CSS/JS based on vis.js.

Note

This function has some known limitations in comparison to d3():

  • vis.js does not support setting the opacity of nodes and edges. It also does not support setting arrow colors different from the edge color. Accordingly, this functions ignores following properties in the given data:

    • Graph metadata: arrow_color, node_opacity, edge_opacity

    • Node metadata: opacity

    • Edge metadata: opacity

  • Node and edge labels can not be rotated.

  • Node and edge label borders may not be visible if zoomed closely.

  • If edges are hidden, then edge labels are hidden too.

  • Multi-edges are drawn on top of each other and therefore not discernable.

  • Self-loops are drawn as unusual circles that look odd.

  • The initial zoom factor can not be controlled yet.

  • If an image is shown inside a node, its shape is always a rectangle, even if the value for node shape desires another choice.

  • Static image export only works in raster image formats JPG and PNG, not in vector image format SVG.

Caution

There is a known bug when a node id is chosen to be “x” or “y”, which seems to clash with internal coordinate calculation.

Parameters

  • data (str, dict, graph object, list) – The input data needs to be in a custom format called gravis JSON Graph Format (gJGF).

    It can be provided in following ways:

    • str: A string in gJGF, or a filepath to a text file in gJGF.

    • dict: A dict adhering to gJGF.

    • graph object: An object from a supported graph library, which internally gets converted to gJGF.

    • list: Instead of a single graph, it is possible to provide a list of graphs. They can be all be of the same type, but a mix of different types is also accepted. The first graph in the list is shown after the visualization has loaded. The other graphs can be chosen in the data selection menu of the interactive visualization.

  • graph_height (int, float) – Height of the graph container in pixels (px).

  • details_height (int, float) – Height of the details container in pixels (px).

  • show_details (bool) – If True, the details container is shown on load, otherwise hidden.

  • show_details_toggle_button (bool) – If True, a button is shown that allows to toggle the visibility of the details container.

  • show_menu (bool) – If True, the menu container is shown on load, otherwise hidden.

  • show_menu_toggle_button (bool) – If True, a button is shown that allows to toggle the visibility of the menu container.

  • show_node (bool) – If True, nodes are shown on load, otherwise hidden.

  • node_size_factor (int, float) – A scaling factor that modifies node size.

  • node_size_data_source (str) – Name of the numerical node property that is used as source for node size on load.

  • use_node_size_normalization (bool) – If True, node sizes are normalized to lie in an interval between a chosen min and max value.

  • node_size_normalization_min (int, float) – Minimum value for node size if node size normalization is active.

  • node_size_normalization_max (int, float) – Maximum value for node size if node size normalization is active.

  • node_drag_fix (bool) – If True, the position of a node becomes fixed after dragging it, i.e. the layout algorithm does not change its position but the user can drag it again.

  • node_hover_neighborhood (bool) – If True, hovering a node leads to highlighting its neighborhood which consists of all incident edges and adjacent nodes.

  • node_hover_tooltip (bool) – If True, hovering a node leads to popping up a tooltip if the hover property in the metadata of this node contains a non-empty string or HTML text.

  • show_node_image (bool) – If True, node images are shown on load for all nodes whose image property in the metadata contains a valid image URL from which an image can be fetched.

  • node_image_size_factor (int, float) – A scaling factor that modifies node image size.

  • show_node_label (bool) – If True, node labels are shown on load, otherwise hidden.

  • show_node_label_border (bool) – If True, node labels have a small border in the color of the background to better separate the text from other visual elements like edges or nodes.

  • node_label_data_source (str) – Name of the node property that is used as source for node label text on load.

  • node_label_size_factor (int, float) – A scaling factor that modifies node label size.

  • node_label_rotation (int, float) – An angle that modifies node label orientation. Caution: This feature is currently ignored in this plot and only here for API consistency.

  • node_label_font (str) – Name of the font that is used for node labels.

  • show_edge (bool) – If True, edges are shown on load, otherwise hidden.

  • edge_size_factor (int, float) – A scaling factor that modifies edge size (=edge width).

  • edge_size_data_source (str) – Name of the edge property that is used as source for edge size on load.

  • use_edge_size_normalization (bool) – If True, edge sizes are normalized to lie in an interval between a chosen min and max value.

  • edge_size_normalization_min (int, float) – Minimum value for edge size if node size normalization is active.

  • edge_size_normalization_max (int, float) – Maximum value for edge size if node size normalization is active.

  • edge_curvature (int, float) – A factor that modifies edge curvature, where 0.0 means straight lines.

  • edge_hover_tooltip (bool) – If True, hovering an edge leads to popping up a tooltip if the hover property in the metadata of this edge contains a non-empty string or HTML text.

  • show_edge_label (bool) – If True, edge labels are shown on load, otherwise hidden.

  • show_edge_label_border (bool) – If True, edge labels have a small border in the color of the background to better separate the text from other visual elements like edges or nodes.

  • edge_label_data_source (str) – Name of the edge property that is used as source for edge label text on load.

  • edge_label_size_factor (int, float) – A scaling factor that modifies edge label size.

  • edge_label_rotation (int, float) – An angle that modifies edge label orientation. Caution: This feature is currently ignored in this plot and only here for API consistency.

  • edge_label_font (str) – Name of the font that is used for edge labels.

  • zoom_factor (int, float) – Factor that modifies how close the camera is to the drawing area on load. Caution: This feature is currently ignored in this plot and only here for API consistency.

  • large_graph_threshold (int, float) – Number that determines from when on a graph is considered to be large, which means that before visualizing it an initial layout is calculated without moving anything. Caution: This feature is currently not available.

  • layout_algorithm_active (bool) – If True, the layout algorithm is active on load and leads to movement, otherwise inactive.

  • layout_algorithm (str) – Name of the used layout algorithm (vis.js term: “solver” of the “physics simulation”). Possible values: “barnesHut”, “forceAtlas2Based”, “repulsion”, “hierarchicalRepulsion”

  • gravitational_constant (int, float) – Number that determines the strength of the many-body force acting between all pairs of nodes. It can be positive to cause attraction or negative (usual case) to cause repulsion. Only active if layout_algorithm is “barnesHut” or “forceAtlas2Based”.

  • central_gravity (int, float) – Number that determines the strength of the centering force that pulls the graph towards the center of the coordinate system (0,0) to keep it in the display area.

  • spring_length (int, float) – Number that determines the desired distance in the links force (vis.js terminology: edges are modeled as “springs”) that acts between connected pairs of nodes.

  • spring_constant (int, float) – Number that determines the strength of the links force.

  • avoid_overlap (int, float) – Number that determines the strength of the collision force that acts between nodes if they come too close together. Only active if layout_algorithm is “barnesHut”, “forceAtlas2Based” or “hierarchicalRepulsion”.

Returns

A Figure object that can be used for displaying or exporting the plot.

References