Extension:Graph/Interactive Graph Tutorial/5
From Linux Web Expert
<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",
"signals": [ { "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "mouseup","expr": "false"} ] }, { "name": "handlePosition", "init": 200, "streams": [ { "type": "mousemove[isDragging]", "expr": "eventX()" } ] }, { "name": "scaledHandlePosition", "expr": "handlePosition", "scale": {"name": "yearsScale","invert": true} }, { "name": "currentYear", "init": 2000, "expr": "clamp(parseInt(scaledHandlePosition),1960,2013)" } ],
"scales": [ { "name": "yearsScale", "type": "linear", "zero": false, "domain": [1960, 2013], "range": "width" } ],
"marks": [ { // draw the year label in the upper left corner "name": "yearLabel", "type": "text", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 25}, "fontSize": {"value": 32}, "fontWeight": {"value": "bold"}, "fill": {"value": "steelblue"} }, "update": {"text": {"signal": "currentYear"} } } }, { // 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": { "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": { "x": {"scale": "yearsScale","signal": "currentYear"}, "fill": {"value": "#fff"} }, // Change fill color of the object on mouse hover "hover": {"fill": {"value": "#f00"} } } }, { "name": "debugIsDragging", "type": "text", "properties": { "enter": { "x": {"value": 250}, "y": {"value": 0}, "fill": {"value": "black"} }, "update": {"text": {"signal": "isDragging"} } } }, { "name": "debugHandlePosition", "type": "text", "properties": { "enter": { "x": {"value": 250}, "y": {"value": 14}, "fill": {"value": "black"} }, "update": {"text": {"signal": "handlePosition"} } } }, { "name": "debugScaledHandlePosition", "type": "text", "properties": { "enter": { "x": {"value": 250}, "y": {"value": 28}, "fill": {"value": "black"} }, "update": {"text": {"signal": "scaledHandlePosition"} } } } ]
}
</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",
"signals": [
{
"name": "isDragging",
"init": false,
"streams": [
{"type": "@handle:mousedown","expr": "true"},
{"type": "mouseup","expr": "false"}
]
},
{
"name": "handlePosition",
"init": 200,
"streams": [
{
"type": "mousemove[isDragging]",
"expr": "eventX()"
}
]
},
{
"name": "scaledHandlePosition",
"expr": "handlePosition",
"scale": {"name": "yearsScale","invert": true}
},
{
"name": "currentYear",
"init": 2000,
"expr": "clamp(parseInt(scaledHandlePosition),1960,2013)"
}
],
"scales": [
{
"name": "yearsScale",
"type": "linear",
"zero": false,
"domain": [1960, 2013],
"range": "width"
}
],
"marks": [
{
// draw the year label in the upper left corner
"name": "yearLabel",
"type": "text",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 25},
"fontSize": {"value": 32},
"fontWeight": {"value": "bold"},
"fill": {"value": "steelblue"}
},
"update": {"text": {"signal": "currentYear"} }
}
},
{
// 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": {
"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": {
"x": {"scale": "yearsScale","signal": "currentYear"},
"fill": {"value": "#fff"}
},
// Change fill color of the object on mouse hover
"hover": {"fill": {"value": "#f00"} }
}
},
{
"name": "debugIsDragging",
"type": "text",
"properties": {
"enter": {
"x": {"value": 250},
"y": {"value": 0},
"fill": {"value": "black"}
},
"update": {"text": {"signal": "isDragging"} }
}
},
{
"name": "debugHandlePosition",
"type": "text",
"properties": {
"enter": {
"x": {"value": 250},
"y": {"value": 14},
"fill": {"value": "black"}
},
"update": {"text": {"signal": "handlePosition"} }
}
},
{
"name": "debugScaledHandlePosition",
"type": "text",
"properties": {
"enter": {
"x": {"value": 250},
"y": {"value": 28},
"fill": {"value": "black"}
},
"update": {"text": {"signal": "scaledHandlePosition"} }
}
}
]
}
</graph>