Module

x/vega_lite/examples/compiled/interactive_concat_layer.vg.json

A concise grammar of interactive graphics, built on Vega.
Latest
File
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A dashboard with cross-highlighting.", "background": "white", "padding": 5, "data": [ {"name": "pts_store"}, {"name": "source_0", "url": "data/movies.json", "format": {"type": "json"}}, { "name": "data_0", "source": "source_0", "transform": [ { "type": "extent", "field": "IMDB Rating", "signal": "concat_0_layer_1_bin_maxbins_10_IMDB_Rating_extent" }, { "type": "bin", "field": "IMDB Rating", "as": [ "bin_maxbins_10_IMDB Rating", "bin_maxbins_10_IMDB Rating_end" ], "signal": "concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins", "extent": { "signal": "concat_0_layer_1_bin_maxbins_10_IMDB_Rating_extent" }, "maxbins": 10 }, { "type": "extent", "field": "Rotten Tomatoes Rating", "signal": "concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_extent" }, { "type": "bin", "field": "Rotten Tomatoes Rating", "as": [ "bin_maxbins_10_Rotten Tomatoes Rating", "bin_maxbins_10_Rotten Tomatoes Rating_end" ], "signal": "concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins", "extent": { "signal": "concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_extent" }, "maxbins": 10 } ] }, { "name": "data_1", "source": "data_0", "transform": [ { "type": "filter", "expr": "!(length(data(\"pts_store\"))) || (vlSelectionTest(\"pts_store\", datum))" }, { "type": "aggregate", "groupby": [ "bin_maxbins_10_IMDB Rating", "bin_maxbins_10_IMDB Rating_end", "bin_maxbins_10_Rotten Tomatoes Rating", "bin_maxbins_10_Rotten Tomatoes Rating_end" ], "ops": ["count"], "fields": [null], "as": ["__count"] }, { "type": "filter", "expr": "isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) && isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) && isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) && isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"])" } ] }, { "name": "data_2", "source": "data_0", "transform": [ { "type": "aggregate", "groupby": [ "bin_maxbins_10_IMDB Rating", "bin_maxbins_10_IMDB Rating_end", "bin_maxbins_10_Rotten Tomatoes Rating", "bin_maxbins_10_Rotten Tomatoes Rating_end" ], "ops": ["count"], "fields": [null], "as": ["__count"] }, { "type": "filter", "expr": "isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) && isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) && isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) && isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"])" } ] }, { "name": "data_3", "source": "source_0", "transform": [ { "type": "aggregate", "groupby": ["Major Genre"], "ops": ["count"], "fields": [null], "as": ["__count"] } ] } ], "signals": [ {"name": "concat_0_width", "value": 200}, {"name": "concat_0_height", "value": 200}, {"name": "concat_1_width", "value": 330}, {"name": "concat_1_height", "value": 120}, { "name": "unit", "value": {}, "on": [ {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"} ] }, {"name": "pts", "update": "vlSelectionResolve(\"pts_store\", \"union\")"} ], "layout": {"padding": 20, "columns": 1, "bounds": "full", "align": "each"}, "marks": [ { "type": "group", "name": "concat_0_group", "style": "cell", "encode": { "update": { "width": {"signal": "concat_0_width"}, "height": {"signal": "concat_0_height"} } }, "marks": [ { "name": "concat_0_layer_0_marks", "type": "rect", "style": ["rect"], "interactive": false, "from": {"data": "data_2"}, "encode": { "update": { "fill": {"scale": "color", "field": "__count"}, "description": { "signal": "\"IMDB Rating (binned): \" + (!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_IMDB Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_IMDB Rating_end\"], \"\")) + \"; Rotten Tomatoes Rating (binned): \" + (!isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_Rotten Tomatoes Rating_end\"], \"\")) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" }, "x2": [ { "test": "!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])", "value": 0 }, { "scale": "concat_0_x", "field": "bin_maxbins_10_IMDB Rating", "offset": 0.5 } ], "x": [ { "test": "!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])", "value": 0 }, { "scale": "concat_0_x", "field": "bin_maxbins_10_IMDB Rating_end", "offset": 0.5 } ], "y2": [ { "test": "!isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"])", "field": {"group": "height"} }, { "scale": "concat_0_y", "field": "bin_maxbins_10_Rotten Tomatoes Rating", "offset": 0.5 } ], "y": [ { "test": "!isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"])", "field": {"group": "height"} }, { "scale": "concat_0_y", "field": "bin_maxbins_10_Rotten Tomatoes Rating_end", "offset": 0.5 } ] } } }, { "name": "concat_0_layer_1_marks", "type": "symbol", "style": ["point"], "interactive": false, "from": {"data": "data_1"}, "encode": { "update": { "fill": {"value": "transparent"}, "stroke": {"value": "#666"}, "ariaRoleDescription": {"value": "point"}, "description": { "signal": "\"IMDB Rating (binned): \" + (!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_IMDB Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_IMDB Rating_end\"], \"\")) + \"; Rotten Tomatoes Rating (binned): \" + (!isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) ? \"null\" : format(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"], \"\") + \" – \" + format(datum[\"bin_maxbins_10_Rotten Tomatoes Rating_end\"], \"\")) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" }, "x": [ { "test": "!isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])", "value": 0 }, { "signal": "scale(\"concat_0_x\", 0.5 * datum[\"bin_maxbins_10_IMDB Rating\"] + 0.5 * datum[\"bin_maxbins_10_IMDB Rating_end\"])" } ], "y": [ { "test": "!isValid(datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"]) || !isFinite(+datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"])", "field": {"group": "height"} }, { "signal": "scale(\"concat_0_y\", 0.5 * datum[\"bin_maxbins_10_Rotten Tomatoes Rating\"] + 0.5 * datum[\"bin_maxbins_10_Rotten Tomatoes Rating_end\"])" } ], "size": {"scale": "size", "field": "__count"} } } } ], "axes": [ { "scale": "concat_0_x", "orient": "bottom", "grid": false, "title": "IMDB Rating (binned)", "labelFlush": true, "labelOverlap": true, "tickCount": {"signal": "ceil(concat_0_width/10)"}, "zindex": 1 }, { "scale": "concat_0_y", "orient": "left", "grid": false, "title": "Rotten Tomatoes Rating (binned)", "labelOverlap": true, "tickCount": {"signal": "ceil(concat_0_height/10)"}, "zindex": 1 } ], "legends": [ { "direction": "horizontal", "gradientLength": 120, "title": "All Movies Count", "fill": "color" }, { "title": "Selected Category Count", "size": "size", "symbolType": "circle", "encode": { "symbols": { "update": { "fill": {"value": "transparent"}, "stroke": {"value": "#666"} } } } } ] }, { "type": "group", "name": "concat_1_group", "style": "cell", "encode": { "update": { "width": {"signal": "concat_1_width"}, "height": {"signal": "concat_1_height"} } }, "signals": [ { "name": "pts_tuple", "on": [ { "events": [{"source": "scope", "type": "click"}], "update": "datum && item().mark.marktype !== 'group' ? {unit: \"concat_1\", fields: pts_tuple_fields, values: [(item().isVoronoi ? datum.datum : datum)[\"Major Genre\"]]} : null", "force": true }, { "events": [{"source": "scope", "type": "dblclick"}], "update": "null" } ] }, { "name": "pts_tuple_fields", "value": [{"field": "Major Genre", "channel": "x", "type": "E"}] }, { "name": "pts_modify", "on": [ { "events": {"signal": "pts_tuple"}, "update": "modify(\"pts_store\", pts_tuple, true)" } ] } ], "marks": [ { "name": "concat_1_marks", "type": "rect", "style": ["bar"], "interactive": true, "from": {"data": "data_3"}, "encode": { "update": { "fill": [ { "test": "!(length(data(\"pts_store\"))) || (vlSelectionTest(\"pts_store\", datum))", "value": "steelblue" }, {"value": "grey"} ], "ariaRoleDescription": {"value": "bar"}, "description": { "signal": "\"Major Genre: \" + (isValid(datum[\"Major Genre\"]) ? datum[\"Major Genre\"] : \"\"+datum[\"Major Genre\"]) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" }, "x": {"scale": "concat_1_x", "field": "Major Genre"}, "width": {"scale": "concat_1_x", "band": 1}, "y": {"scale": "concat_1_y", "field": "__count"}, "y2": {"scale": "concat_1_y", "value": 0} } } } ], "axes": [ { "scale": "concat_1_y", "orient": "left", "gridScale": "concat_1_x", "grid": true, "tickCount": {"signal": "ceil(concat_1_height/40)"}, "domain": false, "labels": false, "aria": false, "maxExtent": 0, "minExtent": 0, "ticks": false, "zindex": 0 }, { "scale": "concat_1_x", "orient": "bottom", "grid": false, "title": "Major Genre", "labelAngle": 320, "labelAlign": "right", "labelBaseline": "top", "zindex": 0 }, { "scale": "concat_1_y", "orient": "left", "grid": false, "title": "Count of Records", "labelOverlap": true, "tickCount": {"signal": "ceil(concat_1_height/40)"}, "zindex": 0 } ] } ], "scales": [ { "name": "color", "type": "linear", "domain": {"data": "data_2", "field": "__count"}, "range": "heatmap", "interpolate": "hcl", "zero": false }, { "name": "size", "type": "linear", "domain": {"data": "data_1", "field": "__count"}, "range": [ 0, { "signal": "pow(0.95 * min(concat_0_width / ((concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins.stop - concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins.start) / concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins.step), concat_0_height / ((concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins.stop - concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins.start) / concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins.step)), 2)" } ], "zero": true }, { "name": "concat_0_x", "type": "linear", "domain": { "signal": "[concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins.start, concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins.stop]" }, "range": [0, {"signal": "concat_0_width"}], "bins": {"signal": "concat_0_layer_1_bin_maxbins_10_IMDB_Rating_bins"}, "zero": false }, { "name": "concat_0_y", "type": "linear", "domain": { "signal": "[concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins.start, concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins.stop]" }, "range": [{"signal": "concat_0_height"}, 0], "bins": { "signal": "concat_0_layer_1_bin_maxbins_10_Rotten_Tomatoes_Rating_bins" }, "zero": false }, { "name": "concat_1_x", "type": "band", "domain": {"data": "data_3", "field": "Major Genre", "sort": true}, "range": [0, {"signal": "concat_1_width"}], "paddingInner": 0.1, "paddingOuter": 0.05 }, { "name": "concat_1_y", "type": "linear", "domain": {"data": "data_3", "field": "__count"}, "range": [{"signal": "concat_1_height"}, 0], "nice": true, "zero": true } ]}