Skip to content

Instantly share code, notes, and snippets.

@keckelt
Created September 10, 2020 15:58
Show Gist options
  • Save keckelt/f160ae61fca8c7371fa347da9ddecc32 to your computer and use it in GitHub Desktop.
Save keckelt/f160ae61fca8c7371fa347da9ddecc32 to your computer and use it in GitHub Desktop.
Dragable marks in Voronoi Diagram
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"autosize": "none",
"signals": [
{
"name": "whichPoint",
"on": [
{
"events": "path:click, path:mousemove[event.buttons]{20}",
"update": "datum.datum"
}
]
},
{
"name": "newPointPosition",
"on": [
{
"events": "path:click, path:mousemove[event.buttons]{20}",
"update": "{u: invert('xscale', x()), v: invert('yscale', y())}"
}
]
}
],
"data": [
{
"name": "table",
"values": [
{"u": 0.1, "v": 0.1},
{"u": 0.9, "v": 0.1},
{"u": 0.1, "v": 0.9},
{"u": 0.9, "v": 0.9},
{"u": 0.5, "v": 0.5}
],
"on": [
{
"trigger": "whichPoint",
"modify": "whichPoint",
"values": "{u: newPointPosition.u, v:newPointPosition.v}"
}
]
}
],
"scales": [
{"name": "xscale", "domain": [0, 1], "range": "width"},
{"name": "yscale", "domain": [0, 1], "range": "height"}
],
"marks": [
{
"name": "points",
"type": "symbol",
"zindex": 1,
"from": {"data": "table"},
"encode": {
"enter": {
"fill": {"value": "black"},
"size": {"value": 36},
"x": {"scale": "xscale", "field": "u"},
"y": {"scale": "yscale", "field": "v"}
},
"update": {
"fill": {"value": "black"},
"size": {"value": 36},
"x": {"scale": "xscale", "field": "u"},
"y": {"scale": "yscale", "field": "v"}
}
}
},
{
"type": "path",
"from": {"data": "points"},
"encode": {
"enter": {
"stroke": {"value": "firebrick"},
"fill": {"value": "transparent"}
},
"update": {
"stroke": {"value": "firebrick"},
"fill": {"value": "transparent"}
}
},
"transform": [
{
"type": "voronoi",
"x": "datum.x",
"y": "datum.y",
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment