Playground — Force Directed Graph — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/force-directed-graph

Force Directed Graph Playground

Experiment with ForceDirectedGraph props in real time. Adjust the controls below the chart to see how each prop affects the visualization, then copy the generated code.

Dataset:

Nodes

Node Size

Show Labels

Edges

Edge Width

Edge Color

#999999

Edge Opacity

Force

Iterations

Force Strength

Interaction

Enable Hover

Layout

Show Legend

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { ForceDirectedGraph } from "semiotic" const edges = // nodes [ { id: "Alice", group: "Engineering" }, { id: "Bob", group: "Engineering" }, // ...8 nodes ] // edges [ { source: "Alice", target: "Bob" }, // ...10 edges ] <ForceDirectedGraph nodes={nodes} edges={edges} />