diff --git a/examples/compiled/interactive_line_point_hover.png b/examples/compiled/interactive_line_point_hover.png new file mode 100644 index 0000000000..9d0be7bb74 Binary files /dev/null and b/examples/compiled/interactive_line_point_hover.png differ diff --git a/examples/compiled/interactive_line_point_hover.svg b/examples/compiled/interactive_line_point_hover.svg new file mode 100644 index 0000000000..9c4e701dea --- /dev/null +++ b/examples/compiled/interactive_line_point_hover.svg @@ -0,0 +1 @@ +200020022004200620082010date0200400600800priceAAPLAMZNGOOGIBMMSFTsymbol \ No newline at end of file diff --git a/examples/compiled/interactive_line_point_hover.vg.json b/examples/compiled/interactive_line_point_hover.vg.json new file mode 100644 index 0000000000..7058d2c3b1 --- /dev/null +++ b/examples/compiled/interactive_line_point_hover.vg.json @@ -0,0 +1,249 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "Stock prices of 5 Tech Companies over Time, with a point marker on hover. Note that the hidden markers are intentionally bigger to make it easier for readers to hover.", + "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/stocks.csv", + "format": {"type": "csv", "parse": {"date": "date"}}, + "transform": [{"type": "identifier", "as": "_vgsid_"}] + }, + { + "name": "data_0", + "source": "source_0", + "transform": [ + { + "type": "filter", + "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])" + } + ] + } + ], + "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_1\", _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_pathgroup", + "type": "group", + "from": { + "facet": { + "name": "faceted_path_layer_0_main", + "data": "source_0", + "groupby": ["symbol"] + } + }, + "encode": { + "update": { + "width": {"field": {"group": "width"}}, + "height": {"field": {"group": "height"}} + } + }, + "marks": [ + { + "name": "layer_0_marks", + "type": "line", + "style": ["line"], + "sort": {"field": "datum[\"date\"]"}, + "interactive": false, + "from": {"data": "faceted_path_layer_0_main"}, + "encode": { + "update": { + "stroke": {"scale": "color", "field": "symbol"}, + "description": { + "signal": "\"date: \" + (timeFormat(datum[\"date\"], '%b %d, %Y')) + \"; price: \" + (format(datum[\"price\"], \"\")) + \"; symbol: \" + (isValid(datum[\"symbol\"]) ? datum[\"symbol\"] : \"\"+datum[\"symbol\"])" + }, + "x": {"scale": "x", "field": "date"}, + "y": {"scale": "y", "field": "price"}, + "defined": { + "signal": "isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])" + } + } + } + } + ] + }, + { + "name": "layer_1_marks", + "type": "symbol", + "style": ["circle"], + "interactive": true, + "from": {"data": "data_0"}, + "encode": { + "update": { + "opacity": [ + { + "test": "length(data(\"hover_store\")) && vlSelectionIdTest(\"hover_store\", datum)", + "value": 1 + }, + {"value": 0} + ], + "tooltip": { + "signal": "{\"date\": timeFormat(datum[\"date\"], '%b %d, %Y'), \"price\": format(datum[\"price\"], \"\"), \"symbol\": isValid(datum[\"symbol\"]) ? datum[\"symbol\"] : \"\"+datum[\"symbol\"]}" + }, + "fill": {"scale": "color", "field": "symbol"}, + "ariaRoleDescription": {"value": "circle"}, + "description": { + "signal": "\"date: \" + (timeFormat(datum[\"date\"], '%b %d, %Y')) + \"; price: \" + (format(datum[\"price\"], \"\")) + \"; symbol: \" + (isValid(datum[\"symbol\"]) ? datum[\"symbol\"] : \"\"+datum[\"symbol\"])" + }, + "x": {"scale": "x", "field": "date"}, + "y": {"scale": "y", "field": "price"}, + "size": [ + { + "test": "length(data(\"hover_store\")) && vlSelectionIdTest(\"hover_store\", datum)", + "value": 48 + }, + {"value": 100} + ], + "shape": {"value": "circle"} + } + } + } + ], + "scales": [ + { + "name": "x", + "type": "time", + "domain": { + "fields": [ + {"data": "source_0", "field": "date"}, + {"data": "data_0", "field": "date"} + ] + }, + "range": [0, {"signal": "width"}] + }, + { + "name": "y", + "type": "linear", + "domain": { + "fields": [ + {"data": "source_0", "field": "price"}, + {"data": "data_0", "field": "price"} + ] + }, + "range": [{"signal": "height"}, 0], + "nice": true, + "zero": true + }, + { + "name": "color", + "type": "ordinal", + "domain": { + "fields": [ + {"data": "source_0", "field": "symbol"}, + {"data": "data_0", "field": "symbol"} + ], + "sort": true + }, + "range": "category" + } + ], + "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": "date", + "labelFlush": true, + "labelOverlap": true, + "tickCount": {"signal": "ceil(width/40)"}, + "zindex": 0 + }, + { + "scale": "y", + "orient": "left", + "grid": false, + "title": "price", + "labelOverlap": true, + "tickCount": {"signal": "ceil(height/40)"}, + "zindex": 0 + } + ], + "legends": [ + { + "stroke": "color", + "symbolType": "circle", + "title": "symbol", + "fill": "color", + "encode": {"symbols": {"update": {"opacity": {"value": 1}}}} + } + ] +} diff --git a/examples/specs/interactive_line_point_hover.vl.json b/examples/specs/interactive_line_point_hover.vl.json new file mode 100644 index 0000000000..99d08dfdae --- /dev/null +++ b/examples/specs/interactive_line_point_hover.vl.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Stock prices of 5 Tech Companies over Time, with a point marker on hover. Note that the hidden markers are intentionally bigger to make it easier for readers to hover.", + "data": {"url": "data/stocks.csv"}, + "encoding": { + "x": {"field": "date", "type": "temporal"}, + "y": {"field": "price", "type": "quantitative"}, + "color": {"field": "symbol", "type": "nominal"} + }, + "layer": [{ + "mark": "line" + }, { + "params": [{ + "name": "hover", + "select": {"type": "point", "on": "mouseover", "clear": "mouseout"} + }], + "mark": {"type": "circle", "tooltip": true}, + "encoding": { + "opacity": { + "condition": {"test": {"param": "hover", "empty": false}, "value": 1}, + "value": 0 + }, + "size": { + "condition": {"test": {"param": "hover", "empty": false}, "value": 48}, + "value": 100 + } + } + }] +} diff --git a/examples/specs/normalized/interactive_line_point_hover_normalized.vl.json b/examples/specs/normalized/interactive_line_point_hover_normalized.vl.json new file mode 100644 index 0000000000..3b055ad9fd --- /dev/null +++ b/examples/specs/normalized/interactive_line_point_hover_normalized.vl.json @@ -0,0 +1,40 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Stock prices of 5 Tech Companies over Time, with a point marker on hover. Note that the hidden markers are intentionally bigger to make it easier for readers to hover.", + "data": {"url": "data/stocks.csv"}, + "layer": [ + { + "mark": "line", + "encoding": { + "x": {"field": "date", "type": "temporal"}, + "y": {"field": "price", "type": "quantitative"}, + "color": {"field": "symbol", "type": "nominal"} + } + }, + { + "params": [ + { + "name": "hover", + "select": {"type": "point", "on": "mouseover", "clear": "mouseout"} + } + ], + "mark": {"type": "circle", "tooltip": true}, + "encoding": { + "x": {"field": "date", "type": "temporal"}, + "y": {"field": "price", "type": "quantitative"}, + "color": {"field": "symbol", "type": "nominal"}, + "opacity": { + "condition": {"value": 1, "test": {"param": "hover", "empty": false}}, + "value": 0 + }, + "size": { + "condition": { + "value": 48, + "test": {"param": "hover", "empty": false} + }, + "value": 100 + } + } + } + ] +} \ No newline at end of file diff --git a/site/_data/examples.json b/site/_data/examples.json index dd8a0d65d5..260129f9f6 100644 --- a/site/_data/examples.json +++ b/site/_data/examples.json @@ -828,9 +828,13 @@ }, { "name": "interactive_line_hover", - "title": "Multi Series Line Chart with Interactive Highlight", + "title": "Multi Series Line Chart with an Interactive Line Highlight", "description": "The plot below uses argmax to position text labels at the end of line. It also applies single selection to highlight a hovered line. Note that we can hidden thick lines to make it easier to hover." }, + { + "name": "interactive_line_point_hover", + "title": "Multi Series Line Chart with an Interactive Point Highlight" + }, { "name": "interactive_multi_line_label", "title": "Multi Series Line Chart with Labels", 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)