Skip to main content
SimilarExport ZIP
100%

System Dynamics

✓ Published0🌍 Public
JJoker-tr
Last edited Jan 25, 2020
Created on Jan 12, 2020

This example shows an interactive system dynamics editor for creating and editing stock-and-flow diagrams. Users can switch between pointer, node, and link modes to add stocks, clouds, variables, valves, and flows, with editable labels and adjustable link curves. The implementation uses GoJS Diagram, LinkingTool, ClickCreatingTool, and the NodeLabelDraggingTool extension, all rendered on an HTML canvas with animation disabled. The interface highlights mode-specific toolbar buttons and tracks node creation counts to generate unique identifiers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive example presents a system dynamics diagram using the GoJS library, letting users add stocks, clouds, variables, and valves to model material flows. The interface offers modal creation tools: users click buttons to switch between pointer, node, and link modes for building flow and influence connections. The diagram supports saving and loading models as JSON via the `GraphLinksModel`, with custom templates built in `buildTemplates()`. Node and link styling is handled through GoJS’s `GraphObject.make`, and the `NodeLabelDraggingTool` extension enables label repositioning through mouse move tools.

JJoker-tr
81% match
Loading thumbnail…

System Dynamics

This example presents an interactive system dynamics model of a grass-sheep ecosystem using the GoJS diagramming library alongside D3. The visualization distinguishes between stocks (grass, sheep), clouds (external sources/sinks), valves (flow regulators), and variables (weather, wolves) that influence connections. Users can modify the underlying JSON model data, which defines nodes and links—both material flows and causal influences—and redraw the diagram. The interface supports creating new nodes and links via buttons, with custom categorization for flows versus influences, while a label-dragging tool adjusts node annotations.

JJoker-tr
80% match
Loading thumbnail…

Interactive Force Directed Layout

This interactive example uses the GoJS library’s `ForceDirectedLayout` to create a continuously updating network diagram. Users can push and pull nodes, with selected nodes remaining fixed while others respond to simulated spring and electrical forces. The layout is invalidated during dragging, and the network is cached for efficiency, updating only when structural changes occur. Data is rendered as labeled circular nodes connected by directed links with arrowheads and gradient-backed text labels.

JJoker-tr
67% 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
67% 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
67% match
Loading thumbnail…

Untitled

This example demonstrates an interactive graph editor built with D3.js and SVG. Clicking on the canvas creates nodes, and links automatically form between nodes within 100 pixels of the new node. Clicking an existing node deletes it and its connections. The simulation uses `d3.layout.force` with a charge of 1, a moving cursor circle indicates the mouse position, and nodes and links are rendered as SVG circles and lines. Data is generated entirely through user interaction.

HHazem Elmahy
66% match
Loading thumbnail…

Chart Editor

This example is an interactive organization chart editor. Users can select, edit, and add nodes, with a detail inspector for editing properties and a tree layout for hierarchical relationships. It uses GoJS for diagram editing and tree layout, and D3 v7 for additional data handling. Node colors shift by tree depth level, and the editor supports undo/redo.

FFereidoun Mianji
66% match
Loading thumbnail…

Directed Graph Editor

This interactive tool demonstrates a directed graph editor using React and D3 v5, where users can create and manipulate nodes and edges through direct manipulation. The visualization employs `d3.forceSimulation` to handle physics-based layout, with nodes rendered as circles and links as paths whose thickness and dashed styling indicate selection states. The code utilizes D3’s selection API to bind drag behavior, enabling dynamic node repositioning, while the `graph.js` script dynamically sets the SVG dimensions to the window size. Users can also draw new connections via a dragline interaction, though the implementation details for editing actions are partially implicit in the CSS and script structure.

00-1CxH
66% match