What technologies can help building an interactive map of nodes, that may be linked to each other (JS)
Vadorequest

Vadorequest @vadorequest

About: See Github Profile: https://github.com/Vadorequest/Vadorequest

Location:
Lyon, France
Joined:
Apr 25, 2019

What technologies can help building an interactive map of nodes, that may be linked to each other (JS)

Publish Date: Jan 19 '20
5 3

I'm looking for any tool (software, SaaS, open source libraries, etc.) that could help represent an interactive list of nodes that may be connected to each other, using javascript.

Here are a few requirements:

  • Renders in a browser environment (canvas, webGL, svg, etc.)
  • Compatible desktop and mobile
  • Interactive (detection of hovering, click event, etc.) on both nodes and connections
  • Interconnected (node can be linked to other(s), through connections)
  • Concept of proximity between nodes (some may be further away than other, depending on some criteria)
  • Allows for visual customisation of the nodes/connections representation (CSS, etc.), to replace a "dot" with an image, for instance

Here is a visual that shows what it could look like:

enter image description here

A few considerations:

  • I'm not looking for "the best" tool, but for any tool that matches those requirements.
  • I'm not sure if the term "map" is the best one, don't hesitate to propose a better term.
  • Optionally, a demo featuring the technology would be a great addition.

Comments 3 total

  • Vadorequest
    VadorequestJan 19, 2020

    After a little bit more of digging, here is what I've learned:

    Proper term to use for (google) search are:

    • Graph network
    • Network
    • Graph theory network
    • Visualisation network

    I wasn't using the proper wording and couldn't find what I was really looking for


    Potential solutions:

    Cytoscape and VisJs seems to be two OSS that answer my needs. The GitHub repo showcases lots of other alternatives.

    I've read this article, which is very much useful:
    medium.com/@jollyp/big-data-graph-...

    It helped me eliminate Cytoscape and D3 based on their "cons". Eliminated all paid solutions as well.

    Now, I'm still hesitating between VisJs and Sigma. Hard to tell the difference without digging deeper in the code and testing things out myself.

    • diek
      diekJan 19, 2020

      Yeah, to learn better this topic, try to practise with linked lists made by yourself and then double linked lists. I see you want to use js, it will be easier than Java or C++, you will not be worried about the nulls and your logic and code will be cleaner.

  • Evan Plaice
    Evan PlaiceJan 20, 2020

    Graphiz

Add comment