Forum Discussion
Another Deneb query - 2 data fields on one bar chart
- 4 years ago
Here's another approach, using a single legend, but using a fold transform to unpivot, and a calculate transform to assign a unique 'grouping' value that can be coloured accordingly. This solution uses a single mark also:
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"A": 10, "B": 20, "Z": "poop", "created": "2022/01/01"}, {"A": 10, "B": 10, "Z": "moop", "created": "2022/01/01"}, {"A": 10, "B": 5, "Z": "doop", "created": "2022/01/01"}, {"A": 13, "B": 12, "Z": "poop", "created": "2022/02/01"}, {"A": 33, "B": 10, "Z": "moop", "created": "2022/02/01"}, {"A": 0, "B": 5, "Z": "doop", "created": "2022/02/01"}, {"A": 13, "B": 5, "Z": "poop", "created": "2022/03/01"}, {"A": 3, "B": 2, "Z": "moop", "created": "2022/03/01"}, {"A": 20, "B": 7, "Z": "doop", "created": "2022/03/01"} ] }, "transform": [ {"timeUnit": "month", "field": "created", "as": "month"}, {"fold": ["A", "B"], "as": ["series", "value"]}, {"calculate": "datum.series + ': ' + datum.Z", "as": "grouping"} ], "mark": "bar", "encoding": { "x": {"timeUnit": "month", "field": "created", "type": "ordinal"}, "y": {"field": "value", "type": "quantitative"}, "color": {"field": "grouping"} } }Regards,
Daniel
EDIT: I think that this solution doesn't stack properly and series are overlaid. I'm having a think about that one.
Hi jonespossibly,
It's not entirely clear what you're asking for - perhaps a sketch or mockup may help for future questions.
I've taken a guess though, and hopefully what I've attempted might still get you there if it's not quite what you were envisioning.
If you want to use the inbuilt legend functionality, you're best splitting into layers and either using two different encoding channels for the colour, (e.g. color and fill), or specifying an independent scale resolution for each color channel so that the legend treats them separately (I've gone for this option in my spec below).
You will also need to specify a range for each color encoding's scale, as they will resolve the same color values if treated as nominal (due to them being the same across series).
I've also specified a manual title for each legend so that it's apparent as to what's what, as Vega-Lite will just title it with the field you're using if not specified:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"A": 10, "B": 20, "Z": "poop", "created": "2022/01/01"},
{"A": 10, "B": 10, "Z": "moop", "created": "2022/01/01"},
{"A": 10, "B": 5, "Z": "doop", "created": "2022/01/01"},
{"A": 13, "B": 12, "Z": "poop", "created": "2022/02/01"},
{"A": 33, "B": 10, "Z": "moop", "created": "2022/02/01"},
{"A": 0, "B": 5, "Z": "doop", "created": "2022/02/01"},
{"A": 13, "B": 5, "Z": "poop", "created": "2022/03/01"},
{"A": 3, "B": 2, "Z": "moop", "created": "2022/03/01"},
{"A": 20, "B": 7, "Z": "doop", "created": "2022/03/01"}
]
},
"resolve": {"scale": {"color": "independent"}},
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"timeUnit": "month", "field": "created", "type": "ordinal"},
"y": {"field": "A", "type": "quantitative"},
"color": {"field": "Z", "legend": {"title": "Z (A Series)"}}
}
},
{
"mark": "bar",
"encoding": {
"x": {"timeUnit": "month", "field": "created", "type": "ordinal"},
"y": {"field": "B", "type": "quantitative"},
"color": {
"field": "Z",
"legend": {"title": "Z (B Series)"},
"scale": {"range": ["red", "green", "blue"]}
}
}
}
]
}
Regards,
Daniel
Here's another approach, using a single legend, but using a fold transform to unpivot, and a calculate transform to assign a unique 'grouping' value that can be coloured accordingly. This solution uses a single mark also:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"A": 10, "B": 20, "Z": "poop", "created": "2022/01/01"},
{"A": 10, "B": 10, "Z": "moop", "created": "2022/01/01"},
{"A": 10, "B": 5, "Z": "doop", "created": "2022/01/01"},
{"A": 13, "B": 12, "Z": "poop", "created": "2022/02/01"},
{"A": 33, "B": 10, "Z": "moop", "created": "2022/02/01"},
{"A": 0, "B": 5, "Z": "doop", "created": "2022/02/01"},
{"A": 13, "B": 5, "Z": "poop", "created": "2022/03/01"},
{"A": 3, "B": 2, "Z": "moop", "created": "2022/03/01"},
{"A": 20, "B": 7, "Z": "doop", "created": "2022/03/01"}
]
},
"transform": [
{"timeUnit": "month", "field": "created", "as": "month"},
{"fold": ["A", "B"], "as": ["series", "value"]},
{"calculate": "datum.series + ': ' + datum.Z", "as": "grouping"}
],
"mark": "bar",
"encoding": {
"x": {"timeUnit": "month", "field": "created", "type": "ordinal"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "grouping"}
}
}
Regards,
Daniel