Skip to content

Instantly share code, notes, and snippets.

@domoritz
Last active August 1, 2023 13:43
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save domoritz/cd636b15fa0e187b51b73fc60b4d3014 to your computer and use it in GitHub Desktop.
Vega Bl.ocks example
license: bsd-3-clause
{
"$schema": "https://vega.github.io/schema/vega/v4.0.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width"
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category", "offset": 1},
"width": {"scale": "xscale", "band": 1, "offset": -1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "bar.vg.json";
vegaEmbed("#vis", spec)
// result.view provides access to the Vega View API
.then(result => console.log(result))
.catch(console.warn);
</script>
</body>
@ogecece
Copy link

ogecece commented Nov 5, 2017

Hi, @domoritz! Really liked your tutorial. It helped me get the grasp of a lot of concepts even being that simple.
When I was toying with the spec I noticed one issue:
In the "update" set of the text, there's this condition:

"fillOpacity": [
    {"test": "datum === tooltip", "value": 0},
    {"value": 1}
]

The issue is that datum === tooltip is never true. So after a bunch of searching I changed the condition to this...

"fillOpacity": [
    {"test": "isNumber(tooltip.amount)", "value": 1},
    {"value": 0}
]

And it worked!
I did not fully understand what input datum is referencing. I started to think it was the text mark itself, but I'm new to Vega. So... I don't know yet, but I would like to :)
Sorry if this is the wrong place to report this issue, I was not sure if it would be better to report it here or in the Vega repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment