I am trying to make a stacked barchart in Vega and have hit a wall where I swear that my code should work, based on the several examples I've been cross referencing, but instead I keep getting perfect axes...with no bars.
The way it's supposed to work in this example is that Alamo's "Operations" "Debt" and "Below Cap" should stack, with State Average having the same categories of data stacked in the same order next to it. Both should sum to the same level (1). The transformed data looks to be in good shape, as the y0/y1 and order are correct.
I initially assumed the problem is in the marks section since that's where the bars are defined but I can't identify what the issue is there, so now I'm wondering if it's something else. But I don't know what else to try.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A stacked bar chart describing ad valorem taxes in Texas community college districts.",
"width": 300,
"height": 300,
"padding": 5,
"background": "white",
"style": "cell",
"data": [
{
"name": "source_0",
"values": [
{
"name": "Operations (MO)",
"amount": 0.1078,
"district": "Alamo",
"sort": 1,
"y0": 0,
"y1": 0.1078
},
{
"name": "Debt (IS)",
"amount": 0.0414,
"district": "Alamo",
"sort": 2,
"y0": 0.1078,
"y1": 0.1492
},
{
"name": "Below Cap",
"amount": 0.8508,
"district": "Alamo",
"sort": 3,
"y0": 0.1492,
"y1": 1
},
{
"name": "Operations (MO)",
"amount": 0.152,
"district": "State Average",
"sort": 1,
"y0": 0,
"y1": 0.152
},
{
"name": "Debt (IS)",
"amount": 0.027,
"district": "State Average",
"sort": 2,
"y0": 0.152,
"y1": 0.179
},
{
"name": "Below Cap",
"amount": 0.821,
"district": "State Average",
"sort": 3,
"y0": 0.179,
"y1": 1
}
],
"format": {"type": "json"},
"transform": [
{
"type": "stack",
"groupby": ["district"],
"sort": {"field": "sort"},
"field": "amount"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "source_0", "field": "district"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "source_0", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "source_0", "field": "name"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "rect",
"from": {"data": "source_0"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "district"},
"width": {"scale": "x", "band": 1},
"y": {"scale": "y", "field": "y1"},
"y2": {"scale": "y", "value": "y0"},
"fill": {"scale": "color", "field": "name"}
}
}
}
]
}
Change your y2 from value to field. Editor
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A stacked bar chart describing ad valorem taxes in Texas community college districts.",
"width": 300,
"height": 300,
"padding": 5,
"background": "white",
"style": "cell",
"data": [
{
"name": "source_0",
"values": [
{
"name": "Operations (MO)",
"amount": 0.1078,
"district": "Alamo",
"sort": 1,
"y0": 0,
"y1": 0.1078
},
{
"name": "Debt (IS)",
"amount": 0.0414,
"district": "Alamo",
"sort": 2,
"y0": 0.1078,
"y1": 0.1492
},
{
"name": "Below Cap",
"amount": 0.8508,
"district": "Alamo",
"sort": 3,
"y0": 0.1492,
"y1": 1
},
{
"name": "Operations (MO)",
"amount": 0.152,
"district": "State Average",
"sort": 1,
"y0": 0,
"y1": 0.152
},
{
"name": "Debt (IS)",
"amount": 0.027,
"district": "State Average",
"sort": 2,
"y0": 0.152,
"y1": 0.179
},
{
"name": "Below Cap",
"amount": 0.821,
"district": "State Average",
"sort": 3,
"y0": 0.179,
"y1": 1
}
],
"format": {"type": "json"},
"transform": [
{
"type": "stack",
"groupby": ["district"],
"sort": {"field": "sort"},
"field": "amount"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "source_0", "field": "district"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "source_0", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "source_0", "field": "name"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "rect",
"from": {"data": "source_0"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "district"},
"width": {"scale": "x", "band": 1},
"y": {"scale": "y", "field": "y1"},
"y2": {"scale": "y", "field": "y0"},
"fill": {"scale": "color", "field": "name"}
}
}
}
]
}
Related
In the old vega-label documentation there is reference to a labeled stacked bar chart example. The example spec doesn’t work in the online Vega editor, throwing an error that a.map is not a function.
I am trying to do almost exactly what is referenced in the above example: create a vertically-stacked bar chart where each segment is labeled with its value. I have seen a few examples of this in Vega-Lite with layers, but how can it be achieved in Vega?
I’ve attempted to recreate the above spec using a group containing the rect mark and the text mark, but I’m not getting it right. I also see how to display the value as a tooltip on hover, but I’d like it displayed in the rectangle of each segment of the bar itself.
Ideally I would end up with a chart like this:
Here’s the spec I’ve been working with:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic stacked bar chart example.",
"width": 294,
"height": 200,
"padding": 5,
"autosize": {"type": "fit-x", "contains": "padding"},
"data": [
{
"name": "categories",
"values": [
{"y": 5, "c": 0, "name": "other"},
{"y": 7, "c": 1, "name": "corn"},
{"y": 22, "c": 2, "name": "pasture/hay"},
{"y": 31, "c": 3, "name": "developed"},
{"y": 35, "c": 4, "name": "forest"}
],
"transform": [
{
"type": "stack",
"field": "y"
}
]
}
],
"scales": [
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true, "zero": true,
"domain": {"data": "categories", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "categories", "field": "c"}
}
],
"axes": [
],
"marks": [
{
"name": "categoriesBars",
"type": "group",
"from": {"data": "categories"},
"zindex": 1,
"marks": [
{
"type": "rect",
"from": {"data": "categories"},
"encode": {
"enter": {
"x": {"value": 0},
"width": {"value": 294},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
},
"update": {
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"y": {"field": {"parent": "y"}},
"x": {"value": 130},
"fill": [
{"test": "contrast('white', datum.fill) > contrast('black', datum.fill)", "value": "white"},
{"value": "black"}
],
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"field": {"parent": "name"}}
}
}
}
]
}
]
}
Is this what you're after?
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic stacked bar chart example.",
"width": 294,
"height": 200,
"padding": 5,
"autosize": {"type": "fit-x", "contains": "padding"},
"data": [
{
"name": "categories",
"values": [
{"y": 5, "c": 0, "name": "other"},
{"y": 7, "c": 1, "name": "corn"},
{"y": 22, "c": 2, "name": "pasture/hay"},
{"y": 31, "c": 3, "name": "developed"},
{"y": 35, "c": 4, "name": "forest"}
],
"transform": [{"type": "stack", "field": "y"}]
}
],
"scales": [
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "categories", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": {"scheme": "pastel2"},
"domain": {"data": "categories", "field": "c"}
}
],
"axes": [],
"marks": [
{
"name": "i",
"type": "rect",
"from": {"data": "categories"},
"encode": {
"enter": {
"x": {"value": 0},
"width": {"value": 294},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
},
"update": {"fillOpacity": {"value": 1}},
"hover": {"fillOpacity": {"value": 0.5}}
}
},
{
"type": "text",
"from": {"data": "i"},
"encode": {
"update": {
"y": {"field": "y"},
"dy": {"signal": "(datum.y2 - datum.y)/2"},
"x": {"signal": "width/2"},
"fill": [
{
"test": "contrast('white', datum.fill) > contrast('black', datum.fill)",
"value": "white"
},
{"value": "black"}
],
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"field": "datum.name"}
}
}
}
]
}
This sample code from vega transformations is not working.
I am not getting the expected results.
Can you please help me run this example in the vega editor?
[
{"foo": {"a": 5, "b": "abc"}, "bar": 0},
{"foo": {"a": 6, "b": "def"}, "bar": 1},
{"foo": {"a": 7, "b": "ghi"}, "bar": 2}
]
To extract the "bar" field along with the "a" and "b" sub-fields into new objects, use the transform:
{
"type": "project",
"fields": ["bar", "foo.a", "foo.b"],
"as": ["bar", "a", "b"]
}
This produces the following output:
[
{"bar":0, "a":5, "b":"abc"},
{"bar":1, "a":6, "b":"def"},
{"bar":2, "a":7, "b":"ghi"}
]
Ok, I used the very first sample in the editor (the bar chart one) to demonstrate the transformation for you. Here is the modified code you can paste in the editor:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"foo": {"a": 5, "b": "abc"}, "bar": 0},
{"foo": {"a": 6, "b": "def"}, "bar": 1},
{"foo": {"a": 7, "b": "ghi"}, "bar": 2}
],
"transform": [
{
"type": "project",
"fields": ["bar", "foo.a", "foo.b"],
"as": ["bar", "a", "b"]
}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "bar"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "a"},
"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": "bar"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "a"},
"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.bar", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.a", "offset": -2},
"text": {"signal": "tooltip.b"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
And here would be the expected result:
As you can see in the data viewer of the editor, "bar" "a" and "b" have the correct values, and I have changed the bar chart so it uses those values to show the bars, the appropriate height, as well as the tooltip when you hover over a bar.
I have a question about facet visualizations in vega.
I have a pretty similar problem as the nested bar char example.
Here I changed the order of the tuple values. as intended, the order in the visualization is changing to.
But I want the 3 facets ordered ascending for value "a".
I don't really understand, if there is a "scale" for the facets, or where to order them.
Second part would be to have an axes for the value "a" shown below/above the bar chart.
Hope someone can help me.
Greetings
Christian
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A nested bar chart example, with bars grouped by category.",
"width": 300,
"padding": 5,
"autosize": "pad",
"signals": [
{
"name": "rangeStep", "value": 20,
"bind": {"input": "range", "min": 5, "max": 50, "step": 1}
},
{
"name": "innerPadding", "value": 0.1,
"bind": {"input": "range", "min": 0, "max": 0.7, "step": 0.01}
},
{
"name": "outerPadding", "value": 0.2,
"bind": {"input": "range", "min": 0, "max": 0.4, "step": 0.01}
},
{
"name": "height",
"update": "trellisExtent[1]"
}
],
"data": [
{
"name": "tuples",
"values": [
{"a": 1, "b": "b", "c": 4.4},
{"a": 0, "b": "c", "c": 5.1},
{"a": 0, "b": "a", "c": 6.3},
{"a": 0, "b": "a", "c": 4.2},
{"a": 0, "b": "b", "c": 6.8},
{"a": 2, "b": "b", "c": 3.5},
{"a": 2, "b": "c", "c": 6.2}
],
"transform": [
{
"type": "aggregate",
"groupby": ["a", "b"],
"fields": ["c"],
"ops": ["average"],
"as": ["c"]
}
]
},
{
"name": "trellis",
"source": "tuples",
"transform": [
{
"type": "aggregate",
"groupby": ["a"]
},
{
"type": "formula", "as": "span",
"expr": "rangeStep * bandspace(datum.count, innerPadding, outerPadding)"
},
{
"type": "stack",
"field": "span"
},
{
"type": "extent",
"field": "y1",
"signal": "trellisExtent"
}
]
}
],
"scales": [
{
"name": "xscale",
"domain": {"data": "tuples", "field": "c"},
"nice": true,
"zero": true,
"round": true,
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "trellis", "field": "a"}
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale", "domain": true }
],
"marks": [
{
"type": "group",
"from": {
"data": "trellis",
"facet": {
"name": "faceted_tuples",
"data": "tuples",
"groupby": "a"
}
},
"encode": {
"enter": {
"x": {"value": 0},
"width": {"signal": "width"}
},
"update": {
"y": {"field": "y0"},
"y2": {"field": "y1"}
}
},
"scales": [
{
"name": "yscale",
"type": "band",
"paddingInner": {"signal": "innerPadding"},
"paddingOuter": {"signal": "outerPadding"},
"round": true,
"domain": {"data": "faceted_tuples", "field": "b"},
"range": {"step": {"signal": "rangeStep"}}
}
],
"axes": [
{ "orient": "left", "scale": "yscale",
"ticks": false, "domain": false, "labelPadding": 4 }
],
"marks": [
{
"type": "rect",
"from": {"data": "faceted_tuples"},
"encode": {
"enter": {
"x": {"value": 0},
"x2": {"scale": "xscale", "field": "c"},
"fill": {"scale": "color", "field": "a"},
"strokeWidth": {"value": 2}
},
"update": {
"y": {"scale": "yscale", "field": "b"},
"height": {"scale": "yscale", "band": 1},
"stroke": {"value": null},
"zindex": {"value": 0}
},
"hover": {
"stroke": {"value": "firebrick"},
"zindex": {"value": 1}
}
}
}
]
}
]
}
What I have tried:
I included a range slider. This range slider is meant to change the way the data is filtered (see transform). (Almost like in this example https://vega.github.io/vega/examples/population-pyramid/)
The Issue:
When I change the slider's position on the graph, there is no change in the graph's input.
Question:
How could I change the code, so that my input parameters are changed through the user's interaction with the range slider?
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 20,
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
},
{
"name": "Y_Value",
"bind":{"input": "range", "min": 0, "max": 100, "step": 1},
"value": 100
}
],
"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}
]
},
{
"name": "range",
"source": "table",
"transform": [
{"type": "filter", "expr": "datum.amount <= Y_Value"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"encode": {
"labels": {
"interactive": true,
"update": {
"tooltip": {"signal": "datum.label"}
}
}
}
},
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 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}
]
}
}
}
]
}
After some time I have figured this:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 20,
"title": {"text":"A title", "anchor":"middle"},
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
},
{
"name": "Threshold",
"bind":{"input": "range", "min": 0, "max": 100, "step": 1},
"value": 0
}
],
"data": [
{
"name": "table",
"values": [
{"category": "Mon", "amount": 28},
{"category": "Tue", "amount": 55},
{"category": "wed", "amount": 43},
{"category": "Thu", "amount": 91},
{"category": "Fri", "amount": 81},
{"category": "Sat", "amount": 53},
{"category": "Sun", "amount": 19}
]
},
{
"name": "range",
"source": "table",
"transform": [
{"type": "filter", "expr": "datum.amount >= Threshold"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"encode": {
"labels": {
"interactive": true,
"update": {
"tooltip": {"signal": "datum.label"}
}
}
}
},
{ "orient": "left", "scale": "yscale", "title": "Y Title" }
],
"marks": [
{
"type": "rect",
"from": {"data":"range"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 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}
],
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
}
}
}
]
}
I'm trying to brush/link two plots in vega, more specifically a node-link diagram and a couple of scatterplots. Based on how dragging works with signals in the node-link diagram I did get quite far, but not far enough...
For the sake of simplicity, I'll provide a little test code here using just two scatterplots:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"padding": 0,
"autosize": "none",
"width": 800,
"height": 400,
"signals": [
{ "description": "Any datapoint is activated",
"name": "datapoint_is_activated", "value": false,
"on": [
{
"events": "symbol:mouseover",
"update": "true"
},
{
"events": "symbol:mouseout",
"update": "false"
}
]
},
{ "description": "Active datapoint",
"name": "activated_datapoint", "value": null,
"on": [
{
"events": "symbol:mouseover",
"update": "item()"
},
{
"events": "symbol:mouseout",
"update": "null"
}
]
}
],
"data": [
{
"name": "table",
"values": [
{"name": "point A", "a": 1, "b": 2, "c": 3},
{"name": "point B", "a": 4, "b": 5, "c": 6},
{"name": "point C", "a": 9, "b": 8, "c": 7}
]
}
],
"scales": [
{ "name": "xscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
},
{ "name": "yscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
}
],
"layout": {"padding": 20},
"marks": [
{ "name": "plot1",
"type": "group",
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "right", "scale": "yscale"}
],
"marks": [
{
"type": "symbol",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"field": "a", "scale": "xscale"},
"y": {"field": "b", "scale": "yscale"},
"tooltip": {"field": "name"}
},
"update": {
"size": {"value": 100},
"fill": {"value": "grey"}
}
}
}
]
},
{ "name": "plot2",
"type": "group",
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "right", "scale": "yscale"}
],
"marks": [
{
"type": "symbol",
"from": {"data": "table"},
"on": [
{
"trigger": "datapoint_is_activated",
"modify": "activated_datapoint",
"values": "{fill: \"red\"}"
},
{
"trigger": "!datapoint_is_activated",
"modify": "activated_datapoint",
"values": "{fill: \"grey\"}"
}
],
"encode": {
"enter": {
"x": {"field": "a", "scale": "xscale"},
"y": {"field": "c", "scale": "yscale"},
"size": {"value": 100},
"tooltip": {"field": "name"}
},
"update": {
"fill": {"value": "grey"}
}
}
}
]
}
]
}
The resulting image looks like this:
The idea is that hovering over a datapoint in the left plot will highlight the corresponding datapoint in the right plot. I know this is straightforward in vega-lite, but that does not (yet) support node-link diagrams. Hence: vega.
My approach in the code is to:
create a signal in the outer scope that tracks (a) if there is a point activated, and (b) which point this is
in plot 2 to have a trigger that takes the activated datapoint and changes its colour to 'red'.
I have an inkling feeling that it has to do with my definition of the modify and values part, but I can't figure it out.
Any help very much appreciated!
Thank you,
jan.
After a lot of trial and error, I did find a way to do this. Instead of using a trigger (which I believe would be the canonical way of doing this), I merely use a test in the fill section: datapoint_is_activated && datum === activated_datapoint.datum. See code and image below.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"padding": 0,
"autosize": "none",
"width": 800,
"height": 400,
"signals": [
{ "description": "Any datapoint is activated",
"name": "datapoint_is_activated", "value": false,
"on": [
{
"events": "symbol:mouseover",
"update": "true"
},
{
"events": "symbol:mouseout",
"update": "false"
}
]
},
{ "description": "Active datapoint",
"name": "activated_datapoint", "value": null,
"on": [
{
"events": "symbol:mouseover",
"update": "item()"
},
{
"events": "symbol:mouseout",
"update": "null"
}
]
}
],
"data": [
{
"name": "table",
"values": [
{"name": "point A", "a": 2, "b": 2, "c": 4},
{"name": "point B", "a": 4, "b": 5, "c": 6},
{"name": "point C", "a": 5, "b": 3, "c": 5}
]
}
],
"scales": [
{ "name": "xscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
},
{ "name": "yscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
}
],
"layout": {"padding": 20},
"marks": [
{ "name": "plot1",
"type": "group",
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "right", "scale": "yscale"}
],
"marks": [
{
"type": "symbol",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"field": "a", "scale": "xscale"},
"y": {"field": "b", "scale": "yscale"},
"tooltip": {"field": "name"},
"size": {"value": 200}
},
"update": {
"fill": [
{"test": "datapoint_is_activated && datum === activated_datapoint.datum",
"value": "red"},
{"value": "lightgrey"}
]
}
}
}
]
},
{ "name": "plot2",
"type": "group",
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "right", "scale": "yscale"}
],
"marks": [
{
"type": "symbol",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"field": "a", "scale": "xscale"},
"y": {"field": "c", "scale": "yscale"},
"size": {"value": 200},
"tooltip": {"field": "name"}
},
"update": {
"fill": [
{"test": "datapoint_is_activated && datum === activated_datapoint.datum",
"value": "red"},
{"value": "lightgrey"}
]
}
}
}
]
}
]
}