diff --git a/examples/compiled/interactive_histogram_full_height_hover.png b/examples/compiled/interactive_histogram_full_height_hover.png new file mode 100644 index 0000000000..d4760769df Binary files /dev/null and b/examples/compiled/interactive_histogram_full_height_hover.png differ diff --git a/examples/compiled/interactive_histogram_full_height_hover.svg b/examples/compiled/interactive_histogram_full_height_hover.svg new file mode 100644 index 0000000000..99094db2a7 --- /dev/null +++ b/examples/compiled/interactive_histogram_full_height_hover.svg @@ -0,0 +1 @@ +1.02.03.04.05.06.07.08.09.010.0IMDB Rating (binned)02004006008001,000Count of Records \ No newline at end of file diff --git a/examples/compiled/interactive_histogram_full_height_hover.vg.json b/examples/compiled/interactive_histogram_full_height_hover.vg.json new file mode 100644 index 0000000000..0f2bab4cdd --- /dev/null +++ b/examples/compiled/interactive_histogram_full_height_hover.vg.json @@ -0,0 +1,228 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "background": "white", + "padding": 5, + "width": 200, + "height": 200, + "style": "cell", + "data": [ + { + "name": "hover_store", + "transform": [{"type": "collect", "sort": {"field": "_vgsid_"}}] + }, + { + "name": "source_0", + "url": "data/movies.json", + "format": {"type": "json"}, + "transform": [ + {"type": "identifier", "as": "_vgsid_"}, + { + "type": "extent", + "field": "IMDB Rating", + "signal": "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": "layer_1_bin_maxbins_10_IMDB_Rating_bins", + "extent": {"signal": "layer_1_bin_maxbins_10_IMDB_Rating_extent"}, + "maxbins": 10 + }, + { + "type": "aggregate", + "groupby": [ + "bin_maxbins_10_IMDB Rating", + "bin_maxbins_10_IMDB Rating_end" + ], + "ops": ["count"], + "fields": [null], + "as": ["__count"] + } + ] + }, + { + "name": "data_0", + "source": "source_0", + "transform": [ + {"type": "identifier", "as": "_vgsid_"}, + { + "type": "filter", + "expr": "isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) && isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])" + } + ] + }, + { + "name": "data_1", + "source": "source_0", + "transform": [ + { + "type": "filter", + "expr": "isValid(datum[\"bin_maxbins_10_IMDB Rating\"]) && isFinite(+datum[\"bin_maxbins_10_IMDB Rating\"])" + } + ] + } + ], + "signals": [ + { + "name": "unit", + "value": {}, + "on": [ + {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"} + ] + }, + { + "name": "hover", + "update": "vlSelectionResolve(\"hover_store\", \"union\", true, true)" + }, + { + "name": "hover_tuple", + "on": [ + { + "events": [{"source": "scope", "type": "mouseover"}], + "update": "datum && item().mark.marktype !== 'group' ? {unit: \"layer_0\", _vgsid_: (item().isVoronoi ? datum.datum : datum)[\"_vgsid_\"]} : null", + "force": true + }, + {"events": [{"source": "view", "type": "mouseout"}], "update": "null"} + ] + }, + { + "name": "hover_toggle", + "value": false, + "on": [ + { + "events": [{"source": "scope", "type": "mouseover"}], + "update": "event.shiftKey" + }, + {"events": [{"source": "view", "type": "mouseout"}], "update": "false"} + ] + }, + { + "name": "hover_modify", + "on": [ + { + "events": {"signal": "hover_tuple"}, + "update": "modify(\"hover_store\", hover_toggle ? null : hover_tuple, hover_toggle ? null : true, hover_toggle ? hover_tuple : null)" + } + ] + } + ], + "marks": [ + { + "name": "layer_0_marks", + "type": "rect", + "style": ["bar"], + "interactive": true, + "from": {"data": "data_0"}, + "encode": { + "update": { + "tooltip": { + "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\"], \"\"), \"Count of Records\": format(datum[\"__count\"], \"\")}" + }, + "fill": {"value": "#eee"}, + "opacity": [ + { + "test": "length(data(\"hover_store\")) && vlSelectionIdTest(\"hover_store\", datum)", + "value": 0.5 + }, + {"value": 0} + ], + "ariaRoleDescription": {"value": "bar"}, + "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\"], \"\")) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" + }, + "x2": { + "scale": "x", + "field": "bin_maxbins_10_IMDB Rating", + "offset": 1 + }, + "x": {"scale": "x", "field": "bin_maxbins_10_IMDB Rating_end"}, + "y": {"value": 0}, + "y2": {"field": {"group": "height"}} + } + } + }, + { + "name": "layer_1_marks", + "type": "rect", + "style": ["bar"], + "interactive": false, + "from": {"data": "data_1"}, + "encode": { + "update": { + "fill": {"value": "#4c78a8"}, + "ariaRoleDescription": {"value": "bar"}, + "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\"], \"\")) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" + }, + "x2": { + "scale": "x", + "field": "bin_maxbins_10_IMDB Rating", + "offset": 1 + }, + "x": {"scale": "x", "field": "bin_maxbins_10_IMDB Rating_end"}, + "y": {"scale": "y", "field": "__count"}, + "y2": {"scale": "y", "value": 0} + } + } + } + ], + "scales": [ + { + "name": "x", + "type": "linear", + "domain": { + "signal": "[layer_1_bin_maxbins_10_IMDB_Rating_bins.start, layer_1_bin_maxbins_10_IMDB_Rating_bins.stop]" + }, + "range": [0, {"signal": "width"}], + "bins": {"signal": "layer_1_bin_maxbins_10_IMDB_Rating_bins"}, + "zero": false + }, + { + "name": "y", + "type": "linear", + "domain": {"data": "data_1", "field": "__count"}, + "range": [{"signal": "height"}, 0], + "nice": true, + "zero": true + } + ], + "axes": [ + { + "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": "IMDB Rating (binned)", + "labelFlush": true, + "labelOverlap": true, + "tickCount": {"signal": "ceil(width/10)"}, + "zindex": 0 + }, + { + "scale": "y", + "orient": "left", + "grid": false, + "title": "Count of Records", + "labelOverlap": true, + "tickCount": {"signal": "ceil(height/40)"}, + "zindex": 0 + } + ] +} diff --git a/examples/specs/interactive_histogram_full_height_hover.vl.json b/examples/specs/interactive_histogram_full_height_hover.vl.json new file mode 100644 index 0000000000..4f09a40f56 --- /dev/null +++ b/examples/specs/interactive_histogram_full_height_hover.vl.json @@ -0,0 +1,30 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "data": {"url": "data/movies.json"}, + "layer": [ + { + "params": [ + { + "name": "hover", + "select": {"type": "point", "on": "mouseover", "clear": "mouseout"} + } + ], + "mark": {"type": "bar", "color": "#eee", "tooltip": true}, + "encoding": { + "x": {"bin": true, "field": "IMDB Rating"}, + "opacity": { + "condition": {"test": {"param": "hover", "empty": false}, "value": 0.5}, + "value": 0 + }, + "detail": [{"aggregate": "count"}] + } + }, + { + "mark": "bar", + "encoding": { + "x": {"bin": true, "field": "IMDB Rating"}, + "y": {"aggregate": "count"} + } + } + ] +} diff --git a/site/_data/examples.json b/site/_data/examples.json index dd8a0d65d5..093515eaca 100644 --- a/site/_data/examples.json +++ b/site/_data/examples.json @@ -791,6 +791,10 @@ "name": "interactive_bar_select_highlight", "title": "Bar Chart with Highlighting on Hover and Selection on Click" }, + { + "name": "interactive_histogram_full_height_hover", + "title": "Histogram with Full-Height Hover Targets for Tooltip" + }, { "name": "interactive_legend", "title": "Interactive Legend" diff --git a/site/_includes/docs_toc.md b/site/_includes/docs_toc.md index 8902f79e9c..a71657fc06 100644 --- a/site/_includes/docs_toc.md +++ b/site/_includes/docs_toc.md @@ -287,7 +287,6 @@ - [Nominal]({{site.baseurl}}/docs/type.html#nominal) - [GeoJSON]({{site.baseurl}}/docs/type.html#geojson) - [Value]({{site.baseurl}}/docs/value.html) - - [Examples]({{site.baseurl}}/docs/value.html#examples) - [Projection]({{site.baseurl}}/docs/projection.html) - [Documentation Overview]({{site.baseurl}}/docs/projection.html#documentation-overview) - [Projection Properties]({{site.baseurl}}/docs/projection.html#projection-properties) @@ -330,7 +329,6 @@ - [Using Parameters]({{site.baseurl}}/docs/parameter.html#using-parameters) - [Selection Configuration]({{site.baseurl}}/docs/parameter.html#config) - [Value]({{site.baseurl}}/docs/value.html) - - [Examples]({{site.baseurl}}/docs/value.html#examples) - [Expr]({{site.baseurl}}/docs/parameter.html) - [Documentation Overview]({{site.baseurl}}/docs/parameter.html#documentation-overview) - [Defining a Parameter]({{site.baseurl}}/docs/parameter.html#defining-a-parameter)