Skip to content

Instantly share code, notes, and snippets.

@keckelt
Created September 10, 2020 16:45
Show Gist options
  • Save keckelt/8e059f0da4ec127819217c4d99325710 to your computer and use it in GitHub Desktop.
Save keckelt/8e059f0da4ec127819217c4d99325710 to your computer and use it in GitHub Desktop.
Density with dynamic split rules
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "white",
"padding": 5,
"width": 400,
"height": 300,
"style": "cell",
"data": [
{
"name": "source_0",
"url": "data/cars.json",
"format": {"type": "json"},
"transform": [
{
"type": "kde",
"field": "Horsepower",
"counts": true,
"steps": 100,
"as": ["value", "density"]
}
]
},
{
"name": "splitvalues",
"values": [
{"x": 80},
{"x": 160}
],
"on": [
{
"trigger": "draggedMark",
"modify": "draggedMark",
"values": "dragTo"
},
{
"trigger": "addMark",
"insert": "addMark"
},
{
"trigger": "remMark",
"remove": "remMark"
}
]
}
],
"signals": [
{
"name": "dragTo",
"on": [{
"events": "[@right_grabber:mousedown, window:mouseup] > window:mousemove",
"update": "{x: invert('x',x())}"
}]
},
{
"name": "draggedMark",
"on": [{
"events": "@right_grabber:mousedown",
"update": "group().datum"
}]
},
{
"name": "addMark",
"on": [
{
"events": [
{
"source": "view",
"type": "mousedown",
"filter": "item().mark.name === 'root'"
}
],
"update": "{x: invert('x',x())}"
}
]
},
{
"name": "remMark",
"on": [{
"events": "@right_grabber:dblclick",
"update": "group().datum"
}]
}
],
"marks": [
{
"name": "layer_0_marks",
"type": "line",
"style": ["line"],
"sort": {"field": "datum[\"value\"]"},
"from": {"data": "source_0"},
"encode": {
"update": {
"stroke": {"value": "#4c78a8"},
"description": {
"signal": "\"density: \" + (format(datum[\"density\"], \"\")) + \"; Horsepower: \" + (format(datum[\"value\"], \"\"))"
},
"x": {"scale": "x", "field": "value"},
"y": {"scale": "y", "field": "density"},
"defined": {
"signal": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"]) && isValid(datum[\"density\"]) && isFinite(+datum[\"density\"])"
}
}
}
},
{
"name": "splitmarks",
"type": "group",
"from": {"data": "splitvalues"},
"encode": {
"enter": {"height": {"field": {"group": "height"}}},
"update": {
"x": [
{
"test": "!isValid(datum[\"x\"]) || !isFinite(+datum[\"x\"])",
"value": 0
},
{"scale": "x", "field": "x"}
]
}
},
"marks": [
{
"name": "layer_1_marks",
"type": "rule",
"style": ["rule"],
"encode": {
"update": {
"strokeDash": {"value": [4, 6]},
"stroke": {"value": "black"},
"y": {"value": 0},
"y2": {"field": {"group": "height"}}
}
}
},
{
"type": "path",
"name": "right_grabber",
"encode": {
"enter": {
"y": {"field": {"group": "height"}, "mult": 0.5, "offset": -50},
"fill": {"value": "#fff"},
"stroke": {"value": "#666"},
"cursor": {"value": "ew-resize"}
},
"update": {
"path": {
"signal": "'M0.5,33.333333333333336A6,6 0 0 1 6.5,39.333333333333336V60.66666666666667A6,6 0 0 1 0.5,66.66666666666667ZM2.5,41.333333333333336V58.66666666666667M4.5,41.333333333333336V58.66666666666667'"
}
}
}
}
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "source_0", "field": "value"},
"range": [0, {"signal": "width"}],
"nice": true,
"zero": false
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "field": "density"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "value, data",
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "density",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment