Looking for a JavaScript library that can represent linked data

Question

I have a project using Mongo, Express, Angular and Node and I find myself needing a library not too dissimilar from CytoscapeJS.

The use case for this is perhaps an odd one for such a visualisation:

I want to be able to visualise the components of a product with a node representing a component.

An example in JSON format:

 { id: '1', name: 'O', weight: 100, target: '5' },
 { id: '2', name: 'M', weight: 100, target: '5' },
 { id: '3', name: 'P', weight: 100, target: '4' },
 { id: '4', name: 'C', weight: 100, target: '5' },
 { id: '5', name: 'FP', weight: 100 }

In this case components of ID 1, 2 and 4 are required to make the final product which is 5 and to complete component 4 someone first needs to complete component 3.

This data structure will expand to include flags for the status of a node which in this use case means whether the component is being worked on, unassigned, done etc.

These flags will affect the visual state of the node (unfinished components will be red in colour as an example).

Additionally many people will be able to view the graph, logged in as different users and able to change the state of nodes therefore websockets will be used to push state onto nodes.

I hope this explains what I am attempting to do.

Bulletpoints of my conditions for acceptance of a library are as follows:

• Allow for context menu's on nodes (I do not care if I need to use a plugin or library, just so long as it is possible). (nice to have but not needed strictly)

• The node must support the ability for HTML markup to be placed in the body of the node.

• I am going to assume all do anyway but the data must be able to take the format of an array of json objects.

• Again I doubt a library would limit my ability to do so but I need to be able to change the state of a node using websockets as multiple people should be able to view and interact with the graph at the same time.

I have a few libraries in mind but would like opinions/options from those who have had experience with such libraries, preferably within an Angular project as that is where this is going to sit.

Answer 1

GoJS is a fully featured diagramming library with strong concepts for Nodes and Links. It has two main model types for linked data: GraphLinksModel, where Nodes and Links are represented as separate JSON objects, and TreeModel, which enforces a tree-like structure, and only has Node JSON data which describes the relationships.

The Org Chart Editor sample uses a TreeModel, its JSON for nodes describes each with a key, and describes the parent relationship with another key:

{"key":"1", "name":"Stella Payne Diaz", "title":"CEO"},
{"key":"2", "name":"Luke Warm", "title":"VP Marketing/Sales", "parent":"1"},
{"key":"3", "name":"Meg Meehan Hoffa", "title":"Sales", "parent":"2"},

With a template and a layout, the output looks like this:

The State Chart sample uses a GraphLinksModel, so one JSON object represents each node and link:

  "nodeDataArray": [
    { "id": 0, "loc": "120 120", "text": "Initial" },
    { "id": 1, "loc": "330 120", "text": "First down" },
    { "id": 2, "loc": "226 376", "text": "First up" },
    { "id": 3, "loc": "60 276", "text": "Second down" },
    { "id": 4, "loc": "226 226", "text": "Wait" }
  ],
  "linkDataArray": [
    { "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },
    { "from": 0, "to": 1, "text": "down", "curviness": 20 },
    { "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },
    ...

This allows for multiple parents, multiple links between nodes, two-way connections, etc.