This works on a wiki page:
<graph>
<graph mode="interactive">
{
// We want to use Vega 2, and specify image size
"version": 2, "width": 300, "height": 80,
// Set padding to the same value on all sides
"padding": 12,
// By default the background is transparent
"background": "#edf1f7",
"marks": [
{
// Draw a horizontal line
"name": "scrollLine",
"type": "rule",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 40},
"x2": {"value": 300},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 2}
}
}
},
{
// Draw a triangle shape with a hover effect
// naming objects allows us to reference them later
"name": "handle",
"type": "path",
"properties": {
"enter": {
"x": {"value": 200},
"y": {"value": 40},
// path syntax is the same as SVG's path tag
"path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"},
"stroke": {"value": "#880"},
"strokeWidth": {"value": 2.5}
},
"update": {"fill": {"value": "#fff"}},
// Change fill color of the object on mouse hover
"hover": {"fill": {"value": "#f00"}}
}
}
]
}
</graph>but if you copy the contents of the <graph> tag to [[Special:GraphSandbox]] it will give you a graph error and not render. It's not clear from the error message given, but the reason is that GraphSandbox (apparently) expects pure JSON in the input box, and the above contains JavaScript-style // comments.