System Dynamics Diagram Editor: Storage, Flows, Control Factors

On Click...

Do Default

Create ______ Node

Create ______ Link

A system dynamics diagram shows the storages (stocks) and flows of material in some system, and the factors that influence the rates of flow. It is usually a cosmetic interface for building mathematical models -- you provide values and equations for the stocks and flows, and appropriate software can then simulate the system's behavior.

The diagram has two types of link: flow links and influence links. In additon to the node attached to each flow, there are 3 types of node:

stocks, the amount of some substance
clouds, like stocks, but outside the system of interest
variables, either numeric constants or calculated from other elements

The conventional user interface for building system dynamics diagrams is modal -- you select a tool in the toolbar, then either click in an empty part of the diagram to add a node or drag from one node to another to add a link. That is the approach used in this example, accomplished with the clickCreatingTool and linkingTool. Note that you need to click on the Pointer tool to revert to the normal mode.

In addition to the above, the diagram also installs the NodeLabelDraggingTool extension into ToolManager.mouseMoveTools.

This sample is based on a prototype developed by Robert Muetzelfeldt.

Diagram Model saved in JSON format:

{ "class": "go.GraphLinksModel",
  "linkLabelKeysProperty": "labelKeys",
  "nodeDataArray": [
{"key":"grass", "category":"stock", "label":"Grass", "loc":"30 220", "label_offset":"0.5 0.5 0 30"},
{"key":"cloud1", "category":"cloud", "loc":"200 220"},
{"key":"sheep", "category":"stock", "label":"Sheep", "loc":"30 20","label_offset":"0.5 0.5 0 -30"},
{"key":"cloud2", "category":"cloud", "loc":"200 20"},
{"key":"cloud3", "category":"cloud", "loc":"-150 220"},
{"key":"grass_loss", "category":"valve", "label":"grass_loss","label_offset":"0.5 0.5 0 20" },
{"key":"grazing", "category":"valve", "label":"grazing","label_offset":"0.5 0.5 45 0" },
{"key":"growth", "category":"valve", "label":"growth","label_offset":"0.5 0.5 0 20" },
{"key":"sheep_loss", "category":"valve",  "label":"sheep_loss","label_offset":"0.5 0.5 0 20" },
{"key":"k1", "category":"variable",  "label":"good weather", "loc": "-80 100"},
{"key":"k2", "category":"variable",  "label":"bad weather", "loc": "100 150"},
{"key":"k3", "category":"variable",  "label":"wolves", "loc": "150 -40"}
  ],
  "linkDataArray": [
{"from":"grass", "to":"cloud1", "category":"flow", "labelKeys":[ "grass_loss" ]},
{"from":"sheep", "to":"cloud2", "category":"flow", "labelKeys":[ "sheep_loss" ]},
{"from":"grass", "to":"sheep", "category":"flow", "labelKeys":[ "grazing" ]},
{"from":"cloud3", "to":"grass", "category":"flow", "labelKeys":[ "growth" ]},
{"from":"grass", "to":"grass_loss", "category":"influence"},
{"from":"sheep", "to":"sheep_loss", "category":"influence"},
{"from":"grass", "to":"growth", "category":"influence"},
{"from":"grass", "to":"grazing", "category":"influence"},
{"from":"sheep", "to":"grazing", "category":"influence"},
{"from":"k1", "to":"growth", "category":"influence"},
{"from":"k1", "to":"grazing", "category":"influence"},
{"from":"k2", "to":"grass_loss", "category":"influence"},
{"from":"k3", "to":"sheep_loss", "category":"influence"}
  ]
}

GoJS Features in this sample

Tools

Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.

For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.

More information can be found in the GoJS Intro.

Related samples