Created
April 27, 2017 21:58
-
-
Save mattijn/5bb0e0275bbbfddf823bec072c78e838 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"schema": { | |
"language": "vega", | |
"version": "3.0" | |
}, | |
"width": 500, | |
"height": 300, | |
"padding": { | |
"top": 0, | |
"left": 0, | |
"right": 0, | |
"bottom": 0 | |
}, | |
"data": [ | |
{ | |
"name": "points", | |
"values": [ | |
{ | |
"y": 12.4170319576795, | |
"x": 0 | |
}, | |
{ | |
"y": 12.4109357870691, | |
"x": 88.9614410400391 | |
}, | |
{ | |
"y": 12.3945203385525, | |
"x": 184.100845336914 | |
}, | |
{ | |
"y": 11.8083666526, | |
"x": 6192.1513671875 | |
}, | |
{ | |
"y": 11.8051002542331, | |
"x": 6283.50830078125 | |
}, | |
{ | |
"y": 11.7973330290699, | |
"x": 6399.3203125 | |
}, | |
{ | |
"y": 11.7882028625082, | |
"x": 6474.4404296875 | |
}, | |
{ | |
"y": 11.7656334543274, | |
"x": 6588.189453125 | |
}, | |
{ | |
"y": 11.7574903988547, | |
"x": 6647.6435546875 | |
}, | |
{ | |
"y": 11.7535781131197, | |
"x": 6759.55517578125 | |
}, | |
{ | |
"y": 11.0454243235589, | |
"x": 14630.8974609375 | |
}, | |
{ | |
"y": 11.0252979743922, | |
"x": 14707.9677734375 | |
}, | |
{ | |
"y": 10.9900775292495, | |
"x": 14776.662109375 | |
}, | |
{ | |
"y": 10.9302863942139, | |
"x": 14846.869140625 | |
}, | |
{ | |
"y": 10.9204433580521, | |
"x": 14922.287109375 | |
}, | |
{ | |
"y": 10.8230372229757, | |
"x": 15897.8515625 | |
}, | |
{ | |
"y": 10.7648223647783, | |
"x": 16008.3720703125 | |
}, | |
{ | |
"y": 10.6962034244892, | |
"x": 16058.4267578125 | |
}, | |
{ | |
"y": 10.6376802887262, | |
"x": 16188.693359375 | |
}, | |
{ | |
"y": 10.6199983919398, | |
"x": 16283.7763671875 | |
}, | |
{ | |
"y": 10.6022272519199, | |
"x": 16376.369140625 | |
}, | |
{ | |
"y": 10.5753892390826, | |
"x": 16456.435546875 | |
}, | |
{ | |
"y": 10.5624972732861, | |
"x": 16564.341796875 | |
}, | |
{ | |
"y": 10.0325243628877, | |
"x": 19695.00390625 | |
}, | |
{ | |
"y": 9.51042999377265, | |
"x": 23853.560546875 | |
}, | |
{ | |
"y": 9.50921993827172, | |
"x": 23954.83203125 | |
}, | |
{ | |
"y": 9.50630172217763, | |
"x": 24101.6875 | |
}, | |
{ | |
"y": 9.47925400071335, | |
"x": 24175.904296875 | |
}, | |
{ | |
"y": 9.47346451713558, | |
"x": 24311.408203125 | |
}, | |
{ | |
"y": 9.47221753147811, | |
"x": 24409.978515625 | |
}, | |
{ | |
"y": 9.22677334334364, | |
"x": 24523.32421875 | |
}, | |
{ | |
"y": 8.88240487678761, | |
"x": 32115.34765625 | |
}, | |
{ | |
"y": 8.87944545397573, | |
"x": 32214.322265625 | |
}, | |
{ | |
"y": 8.87495183929406, | |
"x": 32310.25390625 | |
}, | |
{ | |
"y": 8.68576461191986, | |
"x": 33685.5 | |
} | |
], | |
"transform": [ | |
{ | |
"type": "formula", | |
"expr": "'(' + datum.x + '), (' + datum.y + ')'", | |
"as": "tooltip" | |
} | |
] | |
}, | |
{ | |
"name": "highlightedPoint", | |
"source": "points", | |
"transform": [ | |
{ | |
"type": "filter", | |
"expr": "hover && hover.datum.x === datum.x && hover.datum.y === datum.y" | |
} | |
] | |
} | |
], | |
"signals": [ | |
{ | |
"name": "hover", | |
"value": null, | |
"on": [ | |
{ | |
"events": "@cell:mouseover", | |
"update": "datum" | |
}, | |
{ | |
"events": "@cell:mouseout", | |
"update": "null" | |
} | |
] | |
}, | |
{ | |
"name": "title", | |
"value": "x y", | |
"update": "hover ? 'x: ' + format(hover.x, ',.2f') + ' y: ' + format(hover.y, ',.2f') : 'hover for value'" | |
}, | |
{ | |
"name": "yLocationHighligthed", | |
"value": "y", | |
"update": "hover ? - height + hover.y : 0" | |
}, | |
{ | |
"name": "xLocationHighligthed", | |
"value": "x", | |
"update": "hover ? width - hover.x : 0" | |
}, | |
{ | |
"name": "x_scale_move", | |
"value": 4, | |
"on": [ | |
{ | |
"events": "mousemove", | |
"update": "invert('xscale', clamp(x(), 0, width))" | |
} | |
] | |
}, | |
{ | |
"name": "cell_stroke", | |
"value": null, | |
"on": [ | |
{"events": "dblclick", "update": "cell_stroke ? null : 'brown'"}, | |
{"events": "mousedown!", "update": "cell_stroke"} | |
] | |
} | |
], | |
"marks": [ | |
{ | |
"name": "symbols", | |
"type": "symbol", | |
"role": "point", | |
"from": { | |
"data": "points" | |
}, | |
"interactive": false, | |
"encode": { | |
"enter": { | |
"x": { | |
"scale": "xscale", | |
"field": "x" | |
}, | |
"y": { | |
"scale": "yscale", | |
"field": "y" | |
}, | |
"size": { | |
"value": 100 | |
}, | |
"shape": { | |
"value": "circle" | |
}, | |
"opacity": { | |
"value": 1.0 | |
}, | |
"strokeWidth": { | |
"value": 1.5 | |
}, | |
"stroke": { | |
"value": "white" | |
}, | |
"fill": { | |
"value": "steelblue" | |
}, | |
"fillOpacity": { | |
"value": "0.5" | |
} | |
} | |
} | |
}, | |
{ | |
"type": "path", | |
"name": "cell", | |
"from": { | |
"data": "symbols" | |
}, | |
"encode": { | |
"enter": { | |
"fill": { | |
"value": "transparent" | |
}, | |
"stroke": { | |
"value": "red" | |
}, | |
"strokeWidth": { | |
"value": 0.35 | |
} | |
}, | |
"update": { | |
"path": { | |
"field": "path" | |
}, | |
"stroke": { | |
"signal": "cell_stroke" | |
}, | |
"fill": {"value": "rgba(0,0,0,0)"} | |
} | |
}, | |
"transform": [ | |
{ | |
"type": "voronoi", | |
"x": "datum.x", | |
"y": "datum.y", | |
"size": [ | |
{ | |
"signal": "width" | |
}, | |
{ | |
"signal": "height" | |
} | |
] | |
} | |
] | |
}, | |
{ | |
"type": "symbol", | |
"from": {"data": "highlightedPoint"}, | |
"interactive": false, | |
"encode": { | |
"enter": { | |
"x": {"scale": "xscale","field": "x"}, | |
"y": {"scale": "yscale","field": "y"}, | |
"strokeWidth": { | |
"value": 30 | |
}, | |
"size": { | |
"value": 250 | |
}, | |
"stroke": { | |
"value": "#00B4AA" | |
}, | |
"strokeOpacity": { | |
"value": 0.3 | |
}, | |
"tooltip": { | |
"field": "tooltip" | |
} | |
} | |
} | |
}, | |
{ | |
"type": "rule", | |
"interactive": false, | |
"encode": { | |
"update": { | |
"x": { | |
"scale": "xscale", | |
"signal": "x_scale_move", | |
"offset": 0.5 | |
}, | |
"y": { | |
"value": 0 | |
}, | |
"y2": { | |
"signal": "height" | |
}, | |
"stroke": { | |
"value": "orange" | |
}, | |
"strokeWidth": { | |
"value": 2 | |
}, | |
"opacity": { | |
"value": 1 | |
} | |
} | |
} | |
}, | |
{ | |
"type": "group", | |
"encode": { | |
"update": { | |
"x": { | |
"scale": "xscale", | |
"signal": "x_scale_move", | |
"offset": 10 | |
}, | |
"y2": { | |
"field": { | |
"group": "height" | |
}, | |
"offset": 10 | |
} | |
} | |
}, | |
"marks": [ | |
{ | |
"type": "text", | |
"encode": { | |
"update": { | |
"x": { | |
"field": "tooltip" | |
}, | |
"y": { | |
"signal":"yLocationHighligthed" | |
}, | |
"text": { | |
"signal": "title" | |
}, | |
"fontSize": { | |
"value": 16 | |
}, | |
"align": { | |
"value": "left" | |
} | |
} | |
} | |
} | |
] | |
}, | |
{ | |
"type": "line", | |
"from": { | |
"data": "points" | |
}, | |
"interactive": false, | |
"encode": { | |
"enter": { | |
"x": { | |
"scale": "xscale", | |
"field": "x" | |
}, | |
"y": { | |
"scale": "yscale", | |
"field": "y" | |
}, | |
"stroke": { | |
"value": "#00B4AA" | |
} | |
} | |
} | |
} | |
], | |
"scales": [ | |
{ | |
"name": "xscale", | |
"type": "linear", | |
"range": "width", | |
"zero": false, | |
"domain": { | |
"data": "points", | |
"field": "x" | |
} | |
}, | |
{ | |
"name": "yscale", | |
"type": "linear", | |
"range": "height", | |
"round": true, | |
"nice": true, | |
"zero": false, | |
"domain": { | |
"data": "points", | |
"field": "y" | |
} | |
} | |
], | |
"axes": [ | |
{ | |
"orient": "bottom", | |
"format": "f", | |
"scale": "xscale", | |
"title": "x", | |
"titlePadding": -4, | |
"offset": 10, | |
"grid": true, | |
"zindex": 0 | |
}, | |
{ | |
"scale": "yscale", | |
"format": "f", | |
"orient": "left", | |
"title": "y", | |
"grid": true, | |
"offset": 10, | |
"zindex": 0 | |
}, | |
{ | |
"scale": "yscale", | |
"domain": false, | |
"format": "s", | |
"offset": 10, | |
"labels": false, | |
"grid": true, | |
"orient": "left", | |
"ticks": true, | |
"tickSize": 3, | |
"zindex": 0, | |
"gridScale": "xscale" | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment