Graphs

Here we look at some interactive graphs.

# Mountainstorm Graphviz This is a simple example of turning an svg interactive using javascript and jquery:

http://livecode.world/assets/graph/graphviz.html HEIGHT 300 An interactive svg exported from graphviz. See in full screen

To interact with this example - try clicking on nodes (they are a bit small). Hit escape to unselect nodes.

Also try moving around. First hold the shift-key down and zoom / use the mouse wheel. This is for me two fingers on the trackpad. Without the shift-key held down you pan.

We need to add some Javascript to the html in this example to trap the click events from the svg - and pass them on where appropriate to interact with wiki.

We should experiment with different markups so that we can use both normal url links to other we pages, and also one's designed to interact with wiki.

The `hierarchical.svg` in the example above looks something like this for each node:

<g id="node6" class="node"> <title>n3</title> <g id="a_node6"><a xlink:href="F+lexon_GetRowTitle+of+stack+%27lib_LexonGraph%27" xlink:title="lexon_GetRowTitle"> <ellipse fill="GreenYellow" stroke="#008b00" cx="323" cy="-117" rx="80.69" ry="18"/> <text text-anchor="middle" x="323" y="-113.3" font-family="Times,serif" font-size="14.00">lexon_GetRowTitle</text> </a> </g> </g>

The key link element is referenced by the `xlink:href` element:

See SVG Sanitisation for how we can safely deal with svg's removing the javascript but allowing simple url links. Even safer is to use svg files manually uploaded to the assets folder.

- DOMPurify

# Where we are heading

- http://livecode.world/assets/graph/iframe.html - Mountainstorm - github /

graph

graph/css

graph/js