{ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A binned scatter plot example showing aggregate counts per binned cell.", "width": 200, "height": 200, "padding": 5, "autosize": "pad", "data": [ { "name": "source", "url": "data/cars.json", "transform": [ { "type": "filter", "expr": "datum['Horsepower'] != null && datum['Miles_per_Gallon'] != null && datum['Acceleration'] != null" } ] }, { "name": "summary", "source": "source", "transform": [ { "type": "extent", "field": "Horsepower", "signal": "hp_extent" }, { "type": "bin", "field": "Horsepower", "maxbins": 10, "extent": {"signal": "hp_extent"}, "as": ["hp0", "hp1"] }, { "type": "extent", "field": "Miles_per_Gallon", "signal": "mpg_extent" }, { "type": "bin", "field": "Miles_per_Gallon", "maxbins": 10, "extent": {"signal": "mpg_extent"}, "as": ["mpg0", "mpg1"] }, { "type": "aggregate", "groupby": ["hp0", "hp1", "mpg0", "mpg1"] } ] } ], "scales": [ { "name": "x", "type": "linear", "round": true, "nice": true, "zero": true, "domain": {"data": "source", "field": "Horsepower"}, "range": "width" }, { "name": "y", "type": "linear", "round": true, "nice": true, "zero": true, "domain": {"data": "source", "field": "Miles_per_Gallon"}, "range": "height" }, { "name": "size", "type": "linear", "zero": true, "domain": {"data": "summary", "field": "count"}, "range": [0,360] } ], "axes": [ { "scale": "x", "grid": true, "domain": false, "orient": "bottom", "tickCount": 5, "title": "Horsepower" }, { "scale": "y", "grid": true, "domain": false, "orient": "left", "titlePadding": 5, "title": "Miles_per_Gallon" } ], "legends": [ { "size": "size", "title": "Count", "format": "s", "symbolFillColor": "#4682b4", "symbolStrokeColor": "transparent", "symbolType": "circle" } ], "marks": [ { "name": "marks", "type": "symbol", "from": {"data": "summary"}, "encode": { "update": { "x": {"scale": "x", "signal": "(datum.hp0 + datum.hp1) / 2"}, "y": {"scale": "y", "signal": "(datum.mpg0 + datum.mpg1) / 2"}, "size": {"scale": "size", "field": "count"}, "shape": {"value": "circle"}, "fill": {"value": "#4682b4"} } } } ] }