Directed Graph Editor

100%

Directed Graph Editor

✓ Published0🌍 Public

Last edited Apr 17, 2017

Created on Apr 17, 2017

This interactive graph editor displays a directed node-link diagram built with D3 v3 and rendered as SVG. Users can add nodes by clicking empty space and create edges by dragging between nodes, with keyboard shortcuts for selecting, moving, and modifying edge direction or reflexivity. The force layout, initialized via `d3.layout.force`, continuously updates node positions and draws arrow markers for directed edges. The code uses D3's data joins (`path.data`, `circle.data`) to handle dynamic updates and applies CSS classes for visual states like selected edges.

AI-generated description

Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.

When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.

To see this example as part of a larger project, check out Modal Logic Playground!

forked from <a href='http://bl.ocks.org/meetamit/'>meetamit</a>'s block: <a href='http://bl.ocks.org/meetamit/e63d04bd79d929f9cbaf'></a>

forked from <a href='http://bl.ocks.org/Saminu/'>Saminu</a>'s block: <a href='http://bl.ocks.org/Saminu/8985b5f65f0b4d0b32d5cd65e804fed0'>Model Diagram</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Directed Graph Editor

This interactive editor demonstrates graph creation and manipulation, showing nodes connected by directed edges with arrowheads indicating direction. Users can add nodes by clicking empty space, add edges by dragging between nodes, and select or modify elements via keyboard shortcuts. The code uses d3.forceSimulation for layout and d3.drag for node repositioning, with SVG paths and circles as the primary rendering elements. The example implements various interaction states, including reflexive edges, directional toggles, and visual feedback for selected components.

FFrissAnalytics

92% match

Loading thumbnail…

Directed Graph Editor

This interactive editor demonstrates force-directed graph editing with D3 v3’s `d3.layout.force`, rendering nodes and edges as SVG elements. Users can add nodes by clicking empty space and create edges by dragging between nodes, while keyboard shortcuts toggle edge direction (left/right/both), node reflexivity, and delete selections. The code uses `marker-start` and `marker-end` SVG markers to draw directed arrows, and `circle` styling plus `stroke-dasharray` to indicate selected nodes and edges. Node positions update continuously via the force simulation’s `tick` event, with color assignment from `d3.scale.category10`.

SSaminu

90% match

Loading thumbnail…

Directed Graph Editor

This interactive editor lets users manipulate and design directed graphs. It visualizes nodes as colored circles and edges as straight lines with arrow markers indicating direction. Users can add nodes, drag them to reposition, and create new edges by drawing lines between them. The graph is rendered using SVG and animated with d3.forceSimulation for layout and d3.drag for node interaction.

JJames DePaola

90% match

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor lets users create, drag, and connect nodes with labeled links, highlighting selected edges with dashed styling. The visualization is built using D3 v5's force simulation for node placement and SVG elements for rendering, with graph interactions handled through mouse events in a React application. The code uses `d3.forceSimulation` to manage node positions and link forces, while CSS controls visual feedback such as cursor changes and stroke styles. The graph is displayed in a full-window SVG canvas.

00-1CxH

88% match

Loading thumbnail…

Graph Editor

This graph editor visualizes small directed graphs as nodes and links in an SVG, using a force-directed layout to position them. It shows how nodes can be dragged to fix their positions and clicked to unfix them, with arrowheads indicating link direction. The code uses `d3.forceSimulation` for physics, `d3.drag` for interaction, and a marker definition for the arrowheads. It is built with D3 v4 and styled with a Roboto font.

TThanaporn-sk

88% match

Loading thumbnail…

Directed Graph Editor

This interactive tool lets users create and edit directed graphs by dragging nodes, clicking to add new ones, and selecting edges. It visualizes a force-directed layout using `d3.forceSimulation` with custom link and node elements. The code handles node dragging, edge creation between nodes, and node deletion, with reflexive edges drawn as loops. Styling distinguishes selected links with dashed strokes, while the simulation uses `d3.drag` and `d3.forceLink` to manage interactions and positions.

00-1CxH

87% match

Loading thumbnail…

Directed Graph Editor

A directed graph editor demonstrates interactive node-and-link manipulation using a force-directed layout. Users can drag nodes to reposition them, click links to select them, and create new connections with mouse gestures. The visualization renders nodes as colored circles with text labels, while links display directional arrows based on their left and right properties. The implementation uses d3.forceSimulation for physics-based layout, d3.drag for node movement, and SVG markers for arrowheads. Node and link interactions are handled through mouse events, with reflexive edges highlighted as bold black circles.

RRamuSannanagari

87% match

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor displays a network of nodes and links that respond to mouse events. Users can click nodes to select them, and drag to create or modify connections. The visualization uses D3 v5’s force simulation (`d3.forceSimulation` with `forceManyBody` and `forceCenter`) for layout, while SVG paths and circles render the graph elements. The code styles interactions through CSS classes, including draggable links and reflexive node states.

00-1CxH

87% match