{ "$schema": "https://vega.github.io/schema/vega/v5.json", "background": "white", "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": "isValid(datum[\"Horsepower\"]) && isFinite(+datum[\"Horsepower\"]) && isValid(datum[\"Miles_per_Gallon\"]) && isFinite(+datum[\"Miles_per_Gallon\"]) && isValid(datum[\"Cylinders\"]) && isFinite(+datum[\"Cylinders\"])" } ] } ], "signals": [ { "name": "unit", "value": {}, "on": [ {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"} ] }, {"name": "grid", "update": "vlSelectionResolve(\"grid_store\", \"union\")"}, { "name": "grid_Horsepower", "on": [ { "events": {"signal": "grid_translate_delta"}, "update": "panLinear(grid_translate_anchor.extent_x, -grid_translate_delta.x / width)" }, { "events": {"signal": "grid_zoom_delta"}, "update": "zoomLinear(domain(\"x\"), grid_zoom_anchor.x, grid_zoom_delta)" }, {"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"}, "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": "pow(1.001, event.deltaY * pow(16, event.deltaMode))" } ] }, { "name": "grid_modify", "on": [ { "events": {"signal": "grid_tuple"}, "update": "modify(\"grid_store\", grid_tuple, true)" } ] } ], "marks": [ { "name": "marks", "type": "symbol", "clip": true, "style": ["circle"], "interactive": true, "from": {"data": "source_0"}, "encode": { "update": { "opacity": {"value": 0.7}, "fill": {"value": "#4c78a8"}, "ariaRoleDescription": {"value": "circle"}, "description": { "signal": "\"Horsepower: \" + (format(datum[\"Horsepower\"], \"\")) + \"; Miles_per_Gallon: \" + (format(datum[\"Miles_per_Gallon\"], \"\")) + \"; Cylinders: \" + (format(datum[\"Cylinders\"], \"\"))" }, "x": [ { "test": "!isValid(datum[\"Horsepower\"]) || !isFinite(+datum[\"Horsepower\"])", "value": 0 }, {"scale": "x", "field": "Horsepower"} ], "y": [ { "test": "!isValid(datum[\"Miles_per_Gallon\"]) || !isFinite(+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", "gridScale": "y", "grid": true, "tickCount": {"signal": "ceil(width/40)"}, "domain": false, "labels": false, "aria": false, "maxExtent": 0, "minExtent": 0, "ticks": false, "zindex": 0 }, { "scale": "y", "orient": "left", "gridScale": "x", "grid": true, "tickCount": {"signal": "ceil(height/40)"}, "domain": false, "labels": false, "aria": false, "maxExtent": 0, "minExtent": 0, "ticks": false, "zindex": 0 }, { "scale": "x", "orient": "bottom", "grid": false, "title": "Horsepower", "labelFlush": true, "labelOverlap": true, "tickCount": {"signal": "ceil(width/40)"}, "zindex": 0 }, { "scale": "y", "orient": "left", "grid": false, "title": "Miles_per_Gallon", "labelOverlap": true, "tickCount": {"signal": "ceil(height/40)"}, "zindex": 0 } ], "legends": [ { "size": "size", "symbolType": "circle", "title": "Cylinders", "encode": { "symbols": { "update": { "fill": {"value": "#4c78a8"}, "opacity": {"value": 0.7}, "stroke": {"value": "transparent"} } } } } ]}