User:Psephomancy/Sandbox: Difference between revisions
Content added Content deleted
Psephomancy (talk | contribs) No edit summary |
Psephomancy (talk | contribs) (→Graphs) |
||
Line 192: | Line 192: | ||
"cornerRadius": {"signal": "cornerRadius"} |
"cornerRadius": {"signal": "cornerRadius"} |
||
} |
} |
||
} |
|||
} |
|||
] |
|||
} |
|||
</graph> |
|||
== Interactive == |
|||
<graph> |
|||
{ |
|||
// 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"} } |
|||
} |
} |
||
} |
} |