Public Transportation Map, the London Underground
A transportation map of the London Underground network, displaying train lines running between stations.
The diagram uses a GraphLinksModel with nodes representing each station and an array of links that connect them. Each link's data
contains the line it belongs to, and the compass heading it leaves each station on (fromDir / toDir).
The use of a custom link overrides Link.computePoints, allowing each link to be routed for readability. Every link that enters or leaves a station at the same spot is shifted to run side by side. In cases where stations have many lines running through them, the use of multi-circle stations allow for the routes to still remain clear.
When hovering on a link, the rest of the train line and stations are highlighted. This allows for increased clarity in high density areas of the map.
GoJS Features in this sample
Links
The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS learn pages.
ToolTips
A tooltip is an Adornment that is shown when the mouse hovers over an object that has its GraphObject.toolTip set. The tooltip part is bound to the same data as the part itself.
It is typical to implement a tooltip as a "ToolTip" Panel holding a TextBlock or a Panel of TextBlocks and other objects. Each "ToolTip" is just an "Auto" Panel Adornment that is shadowed, and where the border is a rectangular Shape with a light gray fill. However you can implement the tooltip as any arbitrarily complicated Adornment.
More information can be found in the GoJS learn pages.
Legend
A Legend can be created for a Diagram using a simple Part. Typically that is added directly to the Diagram as an unmodeled Part, not as a template with data in the Model. However you may want to define a template and add a legend data object to the model so that you can parameterize the legend with information persisted with the model.
Usually a legend will be created as an "Auto" Panel for a border around a "Table" Panel holding information about the types of nodes and/or links that are in the diagram.
It probably will want to be in the "ViewportBackground" or "ViewportForeground" Layer so that it is always visible in the viewport despite scrolling or zooming. Set the GraphObject.alignment property to position it where you want it to be; by default it will be in the lower right corner. However you may want to treat the legend Part as a regular Part in the Diagram, possibly laid out by the diagram's Diagram.layout.
More information can be found in the GoJS learn pages.