Skip to content

Cytoscape

It displays graphs using inputs from another blocks using Cytoscape.js.

Input

The input corresponds to the elements objects from Cytoscape.js - Elements JSON. Next we provide the nodes and edges groups that are automatically inferred:

[
    { "data": { "id": "a", "label": "A" } },
    { "data": { "id": "b", "label": "B" } },
    { "data": { "id": "c", "label": "C" } },
    { "data": { "id": "d", "label": "D" } },
    { "data": { "id": "e", "label": "E" } },
    { "data": { "id": "f" } },
    { "data": { "id": "ab", "source": "a", "target": "b" } },
    { "data": { "id": "cd", "source": "c", "target": "d" } },
    { "data": { "id": "ef", "source": "e", "target": "f" } },
    { "data": { "id": "ac", "source": "a", "target": "c" } },
    { "data": { "id": "be", "source": "b", "target": "e" } }]

Parameters

Layout

The layout used to display the graph. The default layout is dagre.

Events

Extended configuration

Provide custom style

Replace style from Cytoscape.js - Elements JSON. Example:

[
    {
        "selector": "node",
        "style": {
            "label": "data(id)"
        }
    }
]

Provide additional layout config

Replace layout from Cytoscape.js - Elements JSON. Example:

{ "name": "cose" }

Examples

Cytoscape Block on inseri.swiss.

Posts on inseri.swiss that make use of the Plotly chart block.