Create a graph network javascript

Hello everyone!
I need your help, I have a project and the aim of this is to create a network graph dynamically in javascript. I have found this library to help me in my visualization vis.js.
I want to add some extra functions and make some changes. I am working with this template link Vis network
and in this part of code I would like to add a double click function.After the double click I want to show a new pop up with some fields to add extra info. Have you got any idea how to manage this, please? I need your help because I am new in javascript!
Thank you a lot!

Hello @markspenser, welcome to the freeCodeCamp Forums!

Depending on how new you are to the language, you might need to learn more before being able to do what you want. The vis.js library can handle the rendering of your network graph visually , but it’s up to you to leverage it correctly and handle the other requirements you specified:

This sounds like there’s 2 main goals you want to handle yourself.

  1. Double-click, show a dialog/pop-up
  2. Within the dialog/pop-up, you want to dynamically change the data that vis.js is rendering.

You could change how the first part works, and simplify it, for example not showing a dialog at all, but the second part is where you can’t really simplify anything. If you want to dynamically configure your data, then you’d have to handle that regardless of if its in a dialog or not.

My main concern is you’d have to not only dynamically change the data you feed into vis.js but you also have to manage what the user sees in their browser, which is DOM manipulation, which then also has to reflect what data your actually code is working with.

Something like adding/removing “nodes” within your vis.js network means you need to update the DOM to add/remove elements or update how they look. This “juggling” between the DOM/UI and what your actually rendering could get rather complicated.

So depending on how experienced you are with JavaScript, DOM manipulation and using vis.js you might want to focus on each of these aspects by themselves. It’s possible you want to start with vis.js just so you understand how to render what you want. From there you can make your data “dynamic” with minimal interaction, something as simple as an “add node” and “remove node” button that adds/removes data from the graph would be a solid start.

From there you can focus on dynamically rendering/changing data from the DOM without vis.js. Or you could use some kind of front-end framework to help you (like React).

Finally, you can put them together and get what I think you want.

Its worth keeping in mind all of these will rely heavily on JavaScript, so if your weak on using the language and understanding the syntax you might want to start there so you can later leverage the language to solve your actual problem. I usually compare it to understanding the tools (JavaScript) before using those tools to build something (dynamic net work graph). Skipping the tools will result in you being “suck” no matter how well you understand what you want to build.

A good starting point for brushing up/learning JavaScript, DOM manipulation and even React is FreeCodeCamp itself:

You can probably skip the first cert (Responsive Web Design) if you want to focus on JavaScript, or you can start it to get an idea of what HTML/CSS is and are used but skip over the project’s and most of the challenges. If you mainly want to focus on vis.js then you wont really need much HTML and probably no CSS`.

Hopefully that at least gets you pointed in the right direction,and if you need more specific help, don’t hesitate on coming back and opening a new thread on whatever topic(s) you desire. :slight_smile:

Good luck, keep learning, keep building :+1:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.