cytoscape-extensionsGraph layouts and algorithms for Cytoscape.js

Size nodes by PageRank ​

This script loads the karate club sample graph, scores every node with PageRank and draws it with ForceAtlas2. Your page needs a <div id="cy"> with a height.

import cytoscape from "cytoscape";
import graphtyCytoscape from "@graphty/cytoscape-extensions";

cytoscape.use(graphtyCytoscape);

async function main() {
    const cy = cytoscape({
        container: document.getElementById("cy"),
        style: [
            {
                selector: "node[rank]",
                style: {
                    width: "mapData(rank, 0, 0.1, 10, 50)",
                    height: "mapData(rank, 0, 0.1, 10, 50)",
                },
            },
        ],
    });
    await cy.graphtyDataset("karate");
    cy.elements().graphtyPageRank({ field: "rank" });
    cy.layout({ name: "graphty-forceatlas2" }).run();
}

main();

graphtyPageRank writes each node's score to data("rank"), and the mapData() style turns scores from 0 to 0.1 into sizes from 10 to 50 pixels. The node[rank] selector applies the sizing only to nodes that have a score, so Cytoscape does not warn about nodes added before PageRank runs. The getting started guide builds this into a full page.

Status ​

@graphty/cytoscape-extensions has not had its first release yet. Until it does, npm install fetches 0.0.0-placeholder.0, a package that holds only a README, so the imports on this page fail to resolve and the jsDelivr URLs return 404. The package names, URLs and install commands in these docs are the ones it will be released under.