Visualizing a network diagram with Javascript | stream 2020/02/16
My notes and supporting files are available here: https://github.com/dmfigol/network-pr...
On this network programmability stream I was trying to visualize a network diagram using JavaScript.
Unfortunately my lack of JS experience was a big obstacle in getting any result and I barely made any progress live. However, after the stream I continued experimenting and got to a decent result.
The original idea was to visualize a network diagram but have it interactive so a user can drag and drop nodes, and front-end will save those coordinates (either in local storage or ideally on the back-end via API). So when the topology is opened again, the nodes are in their previous positions.
After playing more with vis-network, I've found that it has many cool features, but most importantly it has a decent node placement algorithm (called hierarchical layout) which creates a beautiful diagram without any manual coordinates (though you can do that do if you want a complete control over your diagram!). For production I will still need to play with different options, but even this result is quite decent.
Here is the diagram I've got: https://github.com/dmfigol/network-pr...
Timecode:
0:00 – Introduction
3:49 – Announcements
16:45 – Why not drawthenet or lnetd
21:10 – What I am trying to build
27:20 – Setting up the dev environment and bootstrap an example Vue project using vue-cli
1:04:55 – My thoughts on the future of network engineer and network automation engineers roles
1:15:20 – Understanding different pieces of Vue.js
1:39:39 – Trying to make visjs/vis-network work (unsuccessfully)
2:55:30 – Trying vue-d3-network (d3-force) instead of visjs (successfully! but this is not exactly what I need)
3:15:30 – Back to struggling with visjs/vis-network
3:33:00 – Conclusions, summary and wrap-up of the stream
Resources:
Vue.js: https://vuejs.org/
vue-cli: https://cli.vuejs.org/ (easy way to bootstrap the project)
vis-network: https://visjs.github.io/vis-network/d...
vue-visjs: https://github.com/sjmallon/vue-visjs (working wrapper around visjs)
d3-force: https://github.com/d3/d3-force
drawthenet: https://github.com/cidrblock/drawthe.net (demo: http://go.drawthe.net/)
lnetd: https://github.com/cpmarvin/lnetd (demo: http://demo.lnetd.co.uk/home/index)
Please note that this content is stream-first and it is slow-paced by design. I recommend increasing playback speed in the player settings.
Don't miss my upcoming streams at / dmfigol
The code is on my GitHub: https://github.com/dmfigol/network-pr...
Twitter: / dmfigol
Blog: https://dmfigol.me
Background music (royalty-free):
https://www.pretzel.rocks/