PLANNING CONSULTATION DEADLINE Midnight on Monday 8 August 2022
See application details and impacts here !
Template:Graph:GraphTest
Jump to navigation
Jump to search
{
// 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": "scaledHandlePosition", "streams": [ { "type": "mousemove[isDragging]", "expr": "eventX()", "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"} } } } ]
}