Interactive Demo¶

These demos run entirely in your browser using marimo and WebAssembly, no server or Python installation required. Pan, zoom, click, and interact with the widgets below.

First load

The first time you visit this page, the Python runtime (Pyodide) will be downloaded and initialized in the background. This may take a few seconds. Subsequent interactions are instant.

The anywidget-graph widget renders interactive graph visualizations powered by Sigma.js. Nodes are laid out automatically and you can pan, zoom, and click to inspect them.

The example below builds a small social network with people and companies, connected by KNOWS and WORKS_AT relationships -- the same dataset used in Grafeo's graph visualization example.

Drag to pan, scroll to zoom, click a node to select it.

Equivalent Grafeo code

With a running Grafeo database, this same graph can be built and queried:

from grafeo import GrafeoDB
from anywidget_graph import Graph

db = GrafeoDB()

db.execute("""
    CREATE (:Person {name: 'Alice'}), (:Person {name: 'Bob'}),
           (:Person {name: 'Carol'}), (:Person {name: 'Dave'}),
           (:Person {name: 'Eve'}),
           (:Company {name: 'Acme Corp'}), (:Company {name: 'Globex Inc'})
""")

db.execute("""
    MATCH (a:Person {name: 'Alice'}), (b:Person {name: 'Bob'})
    CREATE (a)-[:KNOWS]->(b)
    // ... additional relationships
""")

result = db.execute("MATCH (n)-[r]->(m) RETURN n, r, m")
graph = Graph.from_gql(result)
graph

The anywidget-vector widget provides interactive 3D point cloud visualization powered by Three.js. Orbit, pan, and zoom to explore vector spaces -- useful for exploring embeddings, search results, and high-dimensional data.

The example below shows clustered vectors that you might get from a vector similarity search, with three distinct groups colored by category.

Click and drag to orbit, scroll to zoom, right-click to pan.

Equivalent Grafeo vector search code

With Grafeo's built-in vector search, you can query embeddings and visualize results:

from grafeo import GrafeoDB
from anywidget_vector import VectorSpace

db = GrafeoDB()

# Create nodes with vector embeddings
db.execute("""
    CREATE (:Document {title: 'Graph databases', embedding: [0.5, 0.8, 0.3]}),
           (:Document {title: 'Vector search', embedding: [0.52, 0.78, 0.35]}),
           (:Image {title: 'Network diagram', embedding: [-0.6, -0.2, 0.7]})
""")

# Find nearest neighbors
results = db.vector_search(
    query_vector=[0.5, 0.8, 0.3],
    index_name="embeddings",
    top_k=10
)

# Visualize
points = [
    {"id": str(r.id), "x": r.embedding[0], "y": r.embedding[1], "z": r.embedding[2]}
    for r in results
]
VectorSpace(points=points)

How it works¶

These demos use the mkdocs-marimo plugin. Each python {marimo} code block is executed client-side via Pyodide (Python compiled to WebAssembly). The anywidget framework bridges the Python widget state to the JavaScript renderers (Sigma.js / Three.js) that run natively in the browser.

Since everything runs in your browser, there is no backend server -- making it ideal for static documentation sites hosted on GitHub Pages.

Interactive Demo¶

Graph Widget¶

Vector Widget¶

How it works¶