Graphty

Appearance

Algorithms ​

Guide to running graph algorithms and using results for visualization.

Overview ​

Graphty includes a comprehensive set of graph algorithms for analysis. Run algorithms to compute metrics like centrality, detect communities, find shortest paths, and more. Results can be visualized using the styling system.

Running Algorithms ​

typescript
// Run an algorithm
await graph.runAlgorithm("graphty", "degree");

// namespace: 'graphty' (built-in algorithms)
// type: algorithm name

Algorithm Categories ​

Centrality Algorithms ​

Measure node importance:

AlgorithmDescription
degreeNumber of connections
betweennessHow often a node is on shortest paths
closenessAverage distance to all other nodes
pagerankInfluence based on incoming links
eigenvectorInfluence from well-connected neighbors
typescript
await graph.runAlgorithm("graphty", "degree");
await graph.runAlgorithm("graphty", "pagerank");
await graph.runAlgorithm("graphty", "betweenness");

Community Detection ​

Find clusters of related nodes:

AlgorithmDescription
louvainFast community detection
label-propagationIterative community assignment
modularityOptimize modularity score
typescript
await graph.runAlgorithm("graphty", "louvain");

Component Analysis ​

Find connected subgraphs:

AlgorithmDescription
connected-componentsFind all connected components
strongly-connectedStrong connectivity (directed graphs)
typescript
await graph.runAlgorithm("graphty", "connected-components");

Traversal Algorithms ​

Explore the graph systematically:

AlgorithmDescription
bfsBreadth-first search
dfsDepth-first search
typescript
await graph.runAlgorithm("graphty", "bfs", { startNode: "node1" });

Shortest Path ​

Find optimal paths between nodes:

AlgorithmDescription
dijkstraShortest path (weighted)
bellman-fordHandles negative weights
a-starHeuristic-based pathfinding
typescript
await graph.runAlgorithm("graphty", "dijkstra", {
    source: "node1",
    target: "node5",
});

Spanning Tree ​

Find minimum spanning trees:

AlgorithmDescription
primPrim's algorithm
kruskalKruskal's algorithm
typescript
await graph.runAlgorithm("graphty", "prim");

Flow Algorithms ​

Network flow analysis:

AlgorithmDescription
max-flowMaximum flow between nodes
min-cutMinimum edge cut
typescript
await graph.runAlgorithm("graphty", "max-flow", {
    source: "source",
    sink: "sink",
});

Accessing Results ​

Algorithm results are stored on nodes:

typescript
// Run algorithm
await graph.runAlgorithm("graphty", "degree");

// Access results on individual nodes
const node = graph.getNode("node1");
const degree = node.algorithmResults["graphty:degree"];

// Access all nodes with results
const nodes = graph.getNodes();
for (const node of nodes) {
    console.log(`${node.id}: ${node.algorithmResults["graphty:degree"]}`);
}

Suggested Styles ​

Many algorithms provide suggested visualizations:

typescript
// Run algorithm
await graph.runAlgorithm("graphty", "degree");

// Apply the algorithm's suggested visualization
graph.applySuggestedStyles("graphty:degree");

This automatically maps algorithm results to visual properties like color and size.

Custom Styling with Algorithm Results ​

Use algorithm results in style selectors:

typescript
// Highlight high-degree nodes
graph.styleManager.addLayer({
    selector: "[?algorithmResults.'graphty:degree' > `10`]",
    styles: {
        node: { color: "#e74c3c", size: 2.0 },
    },
});

// Dynamic styling based on results
graph.styleManager.addLayer({
    selector: "*",
    styles: {
        node: {
            size: (node) => {
                const degree = node.algorithmResults["graphty:degree"] || 0;
                return 0.5 + degree * 0.1;
            },
        },
    },
});

Combining with Style Helpers ​

Use style helpers for polished visualizations:

typescript
import { StyleHelpers } from "@graphty/graphty-element";

await graph.runAlgorithm("graphty", "pagerank");

// Find max value for normalization
const maxRank = Math.max(...graph.getNodes().map((n) => n.algorithmResults["graphty:pagerank"] || 0));

graph.styleManager.addLayer({
    selector: "*",
    styles: {
        node: {
            color: (node) => {
                const rank = node.algorithmResults["graphty:pagerank"] || 0;
                return StyleHelpers.color.sequential.viridis(rank / maxRank);
            },
        },
    },
});

Multiple Algorithms ​

Run multiple algorithms and combine results:

typescript
// Run multiple algorithms
await graph.runAlgorithm("graphty", "degree");
await graph.runAlgorithm("graphty", "louvain");

// Style by community with size by degree
graph.styleManager.addLayer({
    selector: "*",
    styles: {
        node: {
            color: (node) => {
                const community = node.algorithmResults["graphty:louvain"];
                return StyleHelpers.color.categorical.okabeIto(community);
            },
            size: (node) => {
                const degree = node.algorithmResults["graphty:degree"] || 0;
                return 0.5 + degree * 0.1;
            },
        },
    },
});

Custom Algorithms ​

Create your own algorithms. See Custom Algorithms for details.

Interactive Examples ​