DashVis Component

Full implementation of vis.js network framework for Plotly Dash
Explore the documentation · Report a bug · Request a feature

A full implementation of vis.js Network component for Dash Plotly. Useful for displaying dynamic, automatically organised, customizable network views.

Table of contents

• Table of contents
• Installation
  • PyPI
• Quick start
• See how it is used
• Advanced examples
• Linking a stylesheet
• Contributing
• Future work 🔨

Installation

PyPI

You can install dashvis with pip:

pip install dashvis

Quick start

dashvis exposes a single component, DashNetwork. Simply create one and include it in your Dash layout. Simplest example:

import dash
from dash import html
from dashvis import DashNetwork

app = dash.Dash()
app.layout = html.Div([
    DashNetwork()
])

if __name__ == '__main__':
    app.run_server(debug=True)

See how it is used

A simple usage example is provided in usage.py.

1. Run:

python -m venv dashvis-venv 
source dashvis-venv/bin/activate 
pip install -r requirements.txt
npm install
npm run build
python usage.py

2. Visit http://localhost:8050 in your web browser

Advanced examples

Examples which cover the entire API of vis.js are available in usage_examples folder. Running them requires PYTHONPATH to be made aware of dashvis. Simply run:

export PYTHONPATH="${PYTHONPATH}:./dashvis"

and then run any example from repo root directory of the repository:

python usage_examples/<example_name>.py

Linking a stylesheet

dashvis doesn't come with CSS included. If you enable network manipulation or navigation features, you need to include a stylesheet to draw those components of the network.

For convenience, links to vis.js stylesheets are included for you and can be used as follows:

import dash
import dashvis.stylesheets

app = dash.Dash(external_stylesheets=[dashvis.stylesheets.VIS_NETWORK_STYLESHEET])

Contributing

See CONTRIBUTING.md

Future work 🔨

• Update usage.py
• Fix two disabled vis.js function calls
• Write tests
• Add tests and code coverage badges
• Update this README