Dash Vis.js | Timeline, Network, Graph2d, Graph3d Components

Dash Python
, ,
1

image
image579×656 92.1 KB

YouTube Channel SubscribersDiscordGitHub followersBlack code styleGitHub Sponsors

Project Software

Dash Vis.js

This is a base boilerplate for the 2d graph, 3d graph, network and timeline. Interactive way to see time specific data, create an animated graph and a network correlation / connection.

Project is relatively easy to setup, just add the cdn in the external_stylesheets and the external_scripts.

app = dash.Dash(__name__,
                external_stylesheets=[
                    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
                    'https://unpkg.com/vis@4.20.0/dist/vis-network.min.css',
                    'https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css',

                ],
                external_scripts=[
                    'https://unpkg.com/vis@4.20.0/dist/vis-timeline-graph2d.min.js',
                    'https://unpkg.com/vis-network/standalone/umd/vis-network.min.js',
                    'https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js',
                    'https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js',

                ],
                assets_url_path="assets",
                use_pages=True,
                server=server)

Then if you look into the assets folder you’ll see the code needed to initialize the components. Basically takes a html.Div on the frontend with an ID that matches the document.getElementById which is called via a DeferScript(src=‘pointToJSfile’).

All this has been setup for you in this code example, but good to note how all this is connected if you’d like to expand the line up for more components. Good reference for other examples could be found at: https://visjs.org/

Referring back to a previous post of mine, I really want to help expand the components available specific to date time. One of those I showcased was full calendar: Dash-full-calendar component
Well, building upon that date and time specific components I think the timeline is a great practical option to consider using in your applications.:

image
image1205×482 79.3 KB

Outside of that I personally enjoy the functionality of this network. as its similar to dash_cytoscape but works a little different in regards to drag functionality and clarity of connections.

image
image935×1003 56.4 KB

Would be nice to expand to more examples but this is a nice start point for anyone, feel free to ask questions, build upon or contribute to this project.

Happy coding,
Pip

2 Likes