Advertisements
I am attempting to encode specific colours to circle marks plotted on a second Y-Axis. However, it seems as if the color encoding is inherited from an encoding declared in a preceding layer.
This is the intended outcome:
However, my specification is returning this output (yellow being applied to both circle marks):
Here is a snippet of the encoding:
{
"name": "Production PY",
"mark": {
"type": "circle", "filled": true,
"tooltip": true
},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"sort": null
},
"y": {
"field": "Production PY",
"scale": {"zero": false},
"type": "quantitative",
"axis": null,
"format": ","
},
"fill": {
"field": "Production PY Legend",
"scale": {
"range": ["red"]
},
"legend": {
"title": ""
}
}
}
},
What changes to the spec can I apply to achieve the intended outcome?
>Solution :
Like this? If so, set resolve -> fill to independent.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"Financial Year": 2023,
"KPI Name": "Non-Renewables",
"Usage CY": 98.522,
"Usage PY": 88.556,
"Target": 82.756,
"Production CY": 57477,
"Production PY": 52805
},
{
"Financial Year": 2023,
"KPI Name": "Renewables",
"Usage CY": 31.618,
"Usage PY": 38.942,
"Target": 36.392,
"Production CY": 57477,
"Production PY": 52805
}
]
},
"height": 400,
"width": 500,
"transform": [
{"calculate": "'Production Current FY'", "as": "Production CY Legend"},
{"calculate": "'Production Prior FY'", "as": "Production PY Legend"},
{"calculate": "'Electricity Target'", "as": "Target Legend"},
{"calculate": "datum['KPI Name'] + ' Prior FY'", "as": "CategoryPY"},
{"calculate": "datum['KPI Name'] + ' Current FY'", "as": "CategoryCY"},
{
"calculate": "datum['Production CY'] > 10000? format(datum['Production CY'],'.4s') :datum['Production CY'] ",
"as": "label1"
},
{
"calculate": "datum['Production PY'] > 10000? format(datum['Production PY'],'.4s') :datum['Production PY'] ",
"as": "label2"
}
],
"autosize": {"type": "fit", "contains": "padding"},
"config": {
"legend": {
"orient": "bottom",
"labelFontSize": 8,
"columns": 2,
"layout": {"bottom": {"anchor": "middle"}}
}
},
"layer": [
{
"layer": [
{
"name": "Electricity CY",
"mark": {"type": "bar", "xOffset": 0, "size": 30, "tooltip": true},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"axis": {"labelAngle": 0},
"sort": null
},
"y": {
"field": "Usage CY",
"type": "quantitative",
"title": "Electricity Intensity (kWh / ton Production)"
},
"color": {
"field": "CategoryCY",
"type": "nominal",
"scale": {
"domain": [
"Renewables Prior FY",
"Renewables Current FY",
"Non-Renewables Prior FY",
"Non-Renewables Current FY"
],
"range": ["#4496BC", "#39A34B", "#5AC8FA", "#4CD964"]
},
"legend": {"title": ""}
},
"order": {"field": ["CategoryCY"], "order": ["ascending"]}
}
},
{
"name": "Electricity PY",
"mark": {"type": "bar", "xOffset": -30, "size": 30, "tooltip": true},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"axis": {"labelAngle": 0},
"sort": null
},
"y": {"field": "Usage PY", "type": "quantitative", "axis": null},
"color": {
"field": "CategoryPY",
"type": "nominal",
"scale": {
"domain": [
"Renewables Prior FY",
"Renewables Current FY",
"Non-Renewables Prior FY",
"Non-Renewables Current FY"
],
"range": ["#4496BC", "#39A34B", "#5AC8FA", "#4CD964"]
},
"legend": {"title": ""}
},
"order": {"field": ["CategoryPY"], "order": ["ascending"]}
}
},
{
"name": "TARGET",
"mark": {
"type": "bar",
"xOffset": 30,
"size": 30,
"color": "#FFCC00",
"tooltip": true
},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"axis": {"labelAngle": 0},
"sort": null
},
"y": {
"aggregate": "sum",
"field": "Target",
"type": "quantitative",
"axis": null
},
"fill": {
"field": "Target Legend",
"scale": {"range": ["#FFCC00"]},
"legend": {"title": ""}
}
}
},
{
"transform": [{"filter": "datum['Usage CY'] != null"}],
"name": "Electricity CY Data Labels",
"mark": {
"type": "text",
"align": "right",
"baseline": "line-bottom",
"dx": 13,
"fontSize": 12
},
"encoding": {
"x": {"field": "Financial Year", "type": "ordinal", "sort": null},
"y": {
"aggregate": "sum",
"field": "Usage CY",
"type": "quantitative",
"axis": null
},
"text": {
"aggregate": "sum",
"field": "Usage CY",
"type": "quantitative",
"format": ".1f"
}
}
},
{
"name": "Electricity PY Data Labels",
"mark": {
"type": "text",
"align": "right",
"baseline": "line-bottom",
"dx": -18,
"fontSize": 12
},
"encoding": {
"x": {"field": "Financial Year", "type": "ordinal", "sort": null},
"y": {
"aggregate": "sum",
"field": "Usage PY",
"type": "quantitative",
"axis": null
},
"text": {
"aggregate": "sum",
"field": "Usage PY",
"type": "quantitative",
"format": ".1f"
}
}
},
{
"name": "TARGET Labels",
"mark": {
"type": "text",
"align": "right",
"baseline": "line-bottom",
"dx": 43,
"fontSize": 12
},
"encoding": {
"x": {"field": "Financial Year", "type": "ordinal", "sort": null},
"y": {
"aggregate": "sum",
"field": "Target",
"type": "quantitative",
"axis": null
},
"text": {
"aggregate": "sum",
"field": "Target",
"type": "quantitative",
"format": ".1f"
}
}
}
],
"resolve": {"scale": {"y": "shared"}, "axis": {"y": "independent"}}
},
{
"layer": [
{
"layer": [
{
"name": "Production CY",
"mark": {"type": "circle", "filled": true, "tooltip": true},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"sort": null
},
"y": {
"field": "Production CY",
"type": "quantitative",
"scale": {"zero": false},
"title": "Production (ton)",
"format": ","
},
"fill": {
"field": "Production CY Legend",
"scale": {"range": ["#666666"]},
"legend": {"title": ""}
}
}
},
{
"name": "Production PY",
"mark": {"type": "circle", "filled": true, "tooltip": true},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"sort": null
},
"y": {
"field": "Production PY",
"scale": {"zero": false},
"type": "quantitative",
"axis": null,
"format": ","
},
"fill": {
"field": "Production PY Legend",
"scale": {"range": ["red"]},
"legend": {"title": ""}
}
}
},
{
"name": "Production CY Data Labels",
"mark": {
"type": "text",
"dx": 0,
"dy": -10,
"fontSize": 12,
"fontWeight": 300,
"font": "Segoe UI",
"color": "#000000"
},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"sort": null
},
"y": {
"field": "Production CY",
"type": "quantitative",
"scale": {"zero": false},
"axis": null,
"format": ","
},
"text": {"field": "label1"}
}
},
{
"name": "Production PY Data Labels",
"mark": {
"type": "text",
"dx": 0,
"dy": -10,
"fontSize": 12,
"fontWeight": 200,
"font": "Segoe UI",
"color": "#000000"
},
"encoding": {
"x": {
"field": "Financial Year",
"type": "ordinal",
"sort": null
},
"y": {
"field": "Production PY",
"scale": {"zero": false},
"type": "quantitative",
"axis": null,
"format": ","
},
"text": {"field": "label2"}
}
}
],
"resolve": {
"axis": {"y": "independent"},
"scale": {"stroke": "independent", "fill": "independent"}
}
}
],
"resolve": {"scale": {"y": "independent", "stroke": "independent"}}
}
]
}