Skip to content

Instantly share code, notes, and snippets.

@jdarling
Last active May 9, 2019 13:43
Show Gist options
  • Save jdarling/4998499924300ef8d91f6f87259d5c20 to your computer and use it in GitHub Desktop.
Save jdarling/4998499924300ef8d91f6f87259d5c20 to your computer and use it in GitHub Desktop.
Trying to figure out how to highlight the proper bar and put in the tooltip based on mouse position.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 240,
"height": 240,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{
"name": "Facebook",
"total": 2,
"unique": 2
},
{
"name": "Twitter",
"total": 4,
"unique": 2
},
{
"name": "visit",
"total": 143,
"unique": 72
},
{
"name": "request info",
"total": 73,
"unique": 72
},
{
"name": "Apply",
"total": 72,
"unique": 72
},
{
"name": "banner",
"total": 74,
"unique": 73
}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{
"events": "rect:mouseover",
"update": "datum"
},
{
"events": "rect:mouseout",
"update": "{}"
}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "table",
"field": "name"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": {
"data": "table",
"field": "total"
},
"range": "height",
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "table",
"field": "name"
},
"range": {
"scheme": "category20"
}
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"zindex": 1
},
{
"orient": "bottom",
"scale": "xscale",
"zindex": 1
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "name"
},
"width": {
"scale": "xscale",
"band": 1
},
"y": {
"scale": "yscale",
"band": 1
},
"y2": {
"scale": "yscale",
"value": 0
},
"fill": {
"value": "red"
},
"fillOpacity": {
"value": 0
},
"zindex": 0
}
}
},
{
"type": "rect",
"from": {
"data": "table"
},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "name"
},
"width": {
"scale": "xscale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "total"
},
"y2": {
"scale": "yscale",
"value": 0
},
"fill": {
"scale": "color",
"field": "name"
},
"fillOpacity": {
"value": 0.5
},
"zindex": 1
}
}
},
{
"type": "rect",
"from": {
"data": "table"
},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "name"
},
"width": {
"scale": "xscale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "unique"
},
"y2": {
"scale": "yscale",
"value": 0
},
"fill": {
"scale": "color",
"field": "name"
},
"zindex": 2
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {
"value": "center"
},
"baseline": {
"value": "bottom"
},
"fill": {
"value": "#333"
}
},
"update": {
"x": {
"scale": "xscale",
"signal": "tooltip.name",
"band": 0.5
},
"y": {
"scale": "yscale",
"signal": "tooltip.total",
"offset": -2
},
"text": {
"signal": "tooltip&&tooltip.total?\"u\"+tooltip.unique+\" t\"+tooltip.total:\"\""
},
"fillOpacity": [
{
"test": "datum === tooltip",
"value": 0
},
{
"value": 1
}
]
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment