Skip to content

Instantly share code, notes, and snippets.

@djbarnwal
Created May 7, 2019 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save djbarnwal/c0c5a6d88ea6eb6fb19f2e82d36b8929 to your computer and use it in GitHub Desktop.
Save djbarnwal/c0c5a6d88ea6eb6fb19f2e82d36b8929 to your computer and use it in GitHub Desktop.
Clamp with making zoom:1
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": "pad",
"padding": 5,
"width": 200,
"height": 200,
"style": "cell",
"data": [
{"name": "grid_store"},
{
"name": "source_0",
"url": "data/cars.json",
"format": {"type": "json"},
"transform": [
{
"type": "filter",
"expr": "datum[\"Horsepower\"] !== null && !isNaN(datum[\"Horsepower\"]) && datum[\"Miles_per_Gallon\"] !== null && !isNaN(datum[\"Miles_per_Gallon\"]) && datum[\"Cylinders\"] !== null && !isNaN(datum[\"Cylinders\"])"
}
]
}
],
"signals": [
{
"name": "unit",
"value": {},
"on": [
{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
]
},
{"name": "sample", "update": "span(domain(\"x\"))/span(domain(\"y\"))"},
{"name": "grid", "update": "vlSelectionResolve(\"grid_store\")"},
{"name": "reachedExtent", "react": true, "update": "span(domain(\"x\")) >= 250"},
{
"name": "grid_Horsepower",
"on": [
{
"events": {"signal": "grid_translate_delta"},
"update": "clampRange(panLinear(grid_translate_anchor.extent_x, -grid_translate_delta.x / width), 0, 250) "
},
{
"events": {"signal": "grid_zoom_delta"},
"update": "clampRange(zoomLinear(domain(\"x\"), grid_zoom_anchor.x, grid_zoom_delta), 0, 250)"
},
{"events": [{"source": "scope", "type": "dblclick"}], "update": "null"}
]
},
{
"name": "grid_Miles_per_Gallon",
"on": [
{
"events": {"signal": "grid_translate_delta"},
"update": "panLinear(grid_translate_anchor.extent_y, grid_translate_delta.y / height)"
},
{
"events": [{"signal": "grid_zoom_delta"}],
"force": true,
"update": "zoomLinear(domain(\"y\"), grid_zoom_anchor.y, grid_zoom_delta)"
},
{"events": [{"source": "scope", "type": "dblclick"}], "update": "null"}
]
},
{
"name": "grid_tuple",
"on": [
{
"events": [{"signal": "grid_Horsepower || grid_Miles_per_Gallon"}],
"update": "grid_Horsepower && grid_Miles_per_Gallon ? {unit: \"\", fields: grid_tuple_fields, values: [grid_Horsepower,grid_Miles_per_Gallon]} : null"
}
]
},
{
"name": "grid_tuple_fields",
"value": [
{"field": "Horsepower", "channel": "x", "type": "R"},
{"field": "Miles_per_Gallon", "channel": "y", "type": "R"}
]
},
{
"name": "grid_translate_anchor",
"value": {},
"on": [
{
"events": [{"source": "scope", "type": "mousedown"}],
"update": "{x: x(unit), y: y(unit), extent_x: domain(\"x\"), extent_y: domain(\"y\")}"
}
]
},
{
"name": "grid_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{"source": "scope", "type": "mousedown"},
{"source": "window", "type": "mouseup"}
]
}
],
"update": "{x: grid_translate_anchor.x - x(unit), y: grid_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "grid_zoom_anchor",
"on": [
{
"events": [{"source": "scope", "type": "wheel", "consume": true}],
"update": "{x: invert(\"x\", x(unit)), y: invert(\"y\", y(unit))}"
}
]
},
{
"name": "grid_zoom_delta",
"on": [
{
"events": [{"source": "scope", "type": "wheel", "consume": true}],
"force": true,
"update": "reachedExtent ? clamp(pow(1.001, event.deltaY * pow(16, event.deltaMode)), 0, 1) : pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "grid_modify",
"update": "modify(\"grid_store\", grid_tuple, true)"
}
],
"marks": [
{
"name": "marks",
"type": "symbol",
"clip": true,
"style": ["circle"],
"from": {"data": "source_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "#4c78a8"},
"tooltip": {
"signal": "{\"Horsepower\": format(datum[\"Horsepower\"], \"\"), \"Miles_per_Gallon\": format(datum[\"Miles_per_Gallon\"], \"\"), \"Cylinders\": format(datum[\"Cylinders\"], \"\")}"
},
"x": [
{
"test": "datum[\"Horsepower\"] === null || isNaN(datum[\"Horsepower\"])",
"value": 0
},
{"scale": "x", "field": "Horsepower"}
],
"y": [
{
"test": "datum[\"Miles_per_Gallon\"] === null || isNaN(datum[\"Miles_per_Gallon\"])",
"field": {"group": "height"}
},
{"scale": "y", "field": "Miles_per_Gallon"}
],
"size": {"scale": "size", "field": "Cylinders"},
"shape": {"value": "circle"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": [75, 150],
"domainRaw": {"signal": "grid[\"Horsepower\"]"},
"range": [0, {"signal": "width"}],
"nice": true,
"zero": false
},
{
"name": "y",
"type": "linear",
"domain": [20, 40],
"domainRaw": {"signal": "grid[\"Miles_per_Gallon\"]"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": false
},
{
"name": "size",
"type": "linear",
"domain": {"data": "source_0", "field": "Cylinders"},
"range": [0, 361],
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "Horsepower",
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 1
},
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Miles_per_Gallon",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 1
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
}
],
"legends": [
{
"size": "size",
"gradientLength": {"signal": "clamp(height, 64, 200)"},
"symbolType": "circle",
"title": "Cylinders",
"encode": {
"symbols": {
"update": {
"fill": {"value": "#4c78a8"},
"shape": {"value": "circle"},
"opacity": {"value": 0.7},
"stroke": {"value": "transparent"}
}
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment