Skip to content

Commit

Permalink
docs(examples): Multi Series Line Chart with an Interactive Point Hig…
Browse files Browse the repository at this point in the history 
…hlight (vega#8227)

Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>
  • Loading branch information
@kanitw @BradyJ27
2 people authored and BradyJ27 committed Oct 19, 2023
1 parent f7932b7 commit 49aee3c
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 3 deletions.
Binary file added examples/compiled/interactive_line_point_hover.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions examples/compiled/interactive_line_point_hover.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
249 changes: 249 additions & 0 deletions examples/compiled/interactive_line_point_hover.vg.json
View file
@@ -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}}}}
}
]
}
29 changes: 29 additions & 0 deletions examples/specs/interactive_line_point_hover.vl.json
View file
@@ -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
}
}
}]
}
40 changes: 40 additions & 0 deletions examples/specs/normalized/interactive_line_point_hover_normalized.vl.json
View file
@@ -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
}
}
}
]
}
6 changes: 5 additions & 1 deletion site/_data/examples.json
View file
Expand Up @@ -832,9 +832,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",
Expand Down
2 changes: 0 additions & 2 deletions site/_includes/docs_toc.md
View file
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down

0 comments on commit 49aee3c

Please sign in to comment.