Skip to content

Commit

Permalink
docs(examples): Bar Chart with Full-Height Hover Targets for Tooltip (v…
Browse files Browse the repository at this point in the history 
…ega#8225)

* docs(examples): Bar Chart with Full-Height Hover Targets for Tooltip

* fix names

* chore: update TOC [CI]

* chore: update examples [CI]

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 e1b07ec commit a679f18
Show file tree
Hide file tree
Showing 5 changed files with 263 additions and 0 deletions.
Binary file added examples/compiled/interactive_histogram_full_height_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_histogram_full_height_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.
228 changes: 228 additions & 0 deletions examples/compiled/interactive_histogram_full_height_hover.vg.json
View file
@@ -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
}
]
}
30 changes: 30 additions & 0 deletions examples/specs/interactive_histogram_full_height_hover.vl.json
View file
@@ -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"}
}
}
]
}
4 changes: 4 additions & 0 deletions site/_data/examples.json
View file
Expand Up @@ -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"
Expand Down

0 comments on commit a679f18

Please sign in to comment.