Graph Editor

100%

✓ Published0🌍 Public

Last edited Dec 31, 2016

Created on Dec 31, 2016

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.

AI-generated description

A tool for making diagrams of small directed graphs. This is a standalone version of an editor that reads graph files from a server - graph-diagrams. So far, this tool has been used to create the diagrams found in graph-data-structure and reactive-function.

Dragging nodes around will cause them to be fixed. Clicking on fixed nodes will unfix them.

Inspired by:

Built with blockbuilder.org

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2106505&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4'>Graph Diagram Editor</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Graph Editor

This interactive graph editor visualizes small directed graphs using SVG rectangles, text labels, and arrow-tipped lines. Users can drag nodes to fix their positions, and click fixed nodes to release them, allowing free exploration of graph connectivity. The implementation uses D3 v4’s force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) and drag behavior (`d3.drag`) to manage node physics. Node and link data are bound to SVG groups and lines, with arrowheads defined via SVG markers. The graph structure is defined in-memory, and the rendering updates dynamically as users interact.

CCurran Kelleher

91% match

Loading thumbnail…

Directed Graph Editor

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.

TThanaporn-sk

88% 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

84% match

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

84% match

Loading thumbnail…

Directed Graph Editor

This example shows an interactive directed graph editor where nodes and links can be dragged and selected within a full-screen SVG. The graph uses a force-directed layout via `d3.forceSimulation` with charge and centering forces, rendering nodes as circles and links as stroked paths. Users can add or modify connections, with selected links shown as dashed lines and reflexive edges highlighted. Styling is handled through CSS classes in `graph.css`, while the React-based version integrates these D3 v5 APIs into a component structure.

00-1CxH

83% match

Loading thumbnail…

Force Editor

An interactive force-directed graph editor demonstrates node-link diagram manipulation. Users drag from existing nodes to create new nodes or links, click to select elements, and use the DELETE key to remove them. The visualization supports panning and zooming through D3’s zoom behavior. The code uses d3.layout.force for physics simulation and d3.scale.category20 for node coloring. The graph redraws incrementally during simulation ticks, with elastic transitions on node creation.

SSohojoe

82% 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

82% 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

82% match