Forum Discussion
Deneb heatmap color tweak
Apologies but workplace security policies and practices prevent me from uploading a pbix, etc. I have a Deneb spec that I am reusing that, thanks to earlier contributions from giammariam , is al...
Hey Doug7983. Try something like the following. Note - I left comments to show what I updated from my original solution (you'll want to remove comments before migrating to Deneb).
Before:
After:
Here's the spec in the Vega Editor.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"transform": [
{"calculate": "(month(datum['Date'])+1)", "as": "monthNum"},
{
"calculate": "datum['monthNum'] + (datum['monthNum'] < 7 ? 6 : -6)",
"as": "monthSort"
},
{
"calculate": "'FY ' + toString(year(datum['Date']) + (datum['monthSort'] <= 6 ? +1 : 0))",
"as": "FY"
},
/*** transform addition start ***/
{
"calculate": "datum['Growth (WDC)'] < 0 ? -1 : datum['Growth (WDC)'] === 0 ? 0 : 1",
"as": "Sign"
},
{
"joinaggregate": [
{
"op": "count",
"field": "Growth (WDC)",
"as": "Sign Count"
},
{
"op": "max",
"field": "Growth (WDC)",
"as": "Max Growth (WDC)"
}
],
"groupby": ["Category", "Sign"]
},
{
"calculate": "datum['Sign'] === 0 ? 0 : datum['Sign'] > 0 ? datum['Growth (WDC)']/datum['Max Growth (WDC)'] : -(datum['Growth (WDC)']/datum['Max Growth (WDC)'])",
"as": "Relative Growth %"
}
/*** transform addition end ***/
],
"facet": {
"column": {"field": "FY", "title": null, "header": {"labelFontSize": 13}}
},
"resolve": {"scale": {"x": "independent"}},
"spacing": {"column": 5},
"spec": {
"width": {"step": 30},
"mark": {"type": "rect", "stroke": "white", "tooltip": true},
"encoding": {
"x": {
"field": "Date",
"type": "ordinal",
"title": null,
"timeUnit": "month",
"axis": {
"domain": false,
"ticks": false,
"labels": true,
"labelOpacity": 0.65,
"orient": "top"
},
"sort": {"field": "monthSort"}
},
"y": {
"field": "Category",
"type": "nominal",
"title": "",
"axis": {
"domain": false,
"ticks": false,
"labels": true,
"labelOpacity": 0.65,
"labelAngle": 0,
"labelPadding": 5
}
},
"tooltip": [
{"field": "Category", "type": "nominal"},
{"field": "Date", "type": "temporal"},
{"field": "Growth (MoYaM)", "type": "quantitative", "format": ".1%"},
{"field": "Growth (WDC)", "type": "quantitative", "format": ".1%"}
],
/*** color encoding update start ***/
"color": {
"aggregate": "max",
"field": "Relative Growth %",
"type": "quantitative",
"title": ["Relative Growth (WDC)", "by Category"],
"scale": {"domainMid": 0, "domainMin": -1, "domainMax": 1, "reverse": true, "scheme": "blueorange"},
"legend": {
"titleBaseline": "bottom",
"direction": "horizontal",
"format": ".1%",
"orient": "right"
}
}
/*** color encoding update end ***/
}
},
"data": {
"name": "dataset",
"values": [
{
"Date": "11/1/2021",
"Category": "Category 01",
"Growth (WDC)": "0.23",
"Growth (MoYaM)": "0.30"
},
{
"Date": "12/1/2021",
"Category": "Category 01",
"Growth (WDC)": "0.12",
"Growth (MoYaM)": "0.12"
},
{
"Date": "1/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.13",
"Growth (MoYaM)": "0.19"
},
{
"Date": "2/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.09",
"Growth (MoYaM)": "0.09"
},
{
"Date": "3/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.21",
"Growth (MoYaM)": "0.21"
},
{
"Date": "4/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.29",
"Growth (MoYaM)": "0.24"
},
{
"Date": "5/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.36",
"Growth (MoYaM)": "0.43"
},
{
"Date": "6/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.28",
"Growth (MoYaM)": "0.28"
},
{
"Date": "7/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.42",
"Growth (MoYaM)": "0.14"
},
{
"Date": "8/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.28",
"Growth (MoYaM)": "0.34"
},
{
"Date": "9/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.18",
"Growth (MoYaM)": "0.24"
},
{
"Date": "10/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.19",
"Growth (MoYaM)": "0.19"
},
{
"Date": "11/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.09",
"Growth (MoYaM)": "0.09"
},
{
"Date": "12/1/2022",
"Category": "Category 01",
"Growth (WDC)": "0.14",
"Growth (MoYaM)": "0.14"
},
{
"Date": "1/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.10",
"Growth (MoYaM)": "0.10"
},
{
"Date": "2/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.09",
"Growth (MoYaM)": "0.09"
},
{
"Date": "3/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.13",
"Growth (MoYaM)": "0.13"
},
{
"Date": "4/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.06",
"Growth (MoYaM)": "0.01"
},
{
"Date": "5/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.03",
"Growth (MoYaM)": "0.13"
},
{
"Date": "6/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.07",
"Growth (MoYaM)": "0.07"
},
{
"Date": "7/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.12",
"Growth (MoYaM)": "0.12"
},
{
"Date": "8/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.14",
"Growth (MoYaM)": "0.14"
},
{
"Date": "9/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.18",
"Growth (MoYaM)": "0.12"
},
{
"Date": "10/1/2023",
"Category": "Category 01",
"Growth (WDC)": "0.15",
"Growth (MoYaM)": "-0.62"
},
{
"Date": "11/1/2021",
"Category": "Category 03",
"Growth (WDC)": "0.15",
"Growth (MoYaM)": "0.21"
},
{
"Date": "12/1/2021",
"Category": "Category 03",
"Growth (WDC)": "0.11",
"Growth (MoYaM)": "0.11"
},
{
"Date": "1/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.14",
"Growth (MoYaM)": "0.20"
},
{
"Date": "2/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.12",
"Growth (MoYaM)": "0.12"
},
{
"Date": "3/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.12",
"Growth (MoYaM)": "0.12"
},
{
"Date": "4/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.14",
"Growth (MoYaM)": "0.08"
},
{
"Date": "5/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.16",
"Growth (MoYaM)": "0.22"
},
{
"Date": "6/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.07",
"Growth (MoYaM)": "0.07"
},
{
"Date": "7/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.18",
"Growth (MoYaM)": "-0.06"
},
{
"Date": "8/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.08",
"Growth (MoYaM)": "0.13"
},
{
"Date": "9/1/2022",
"Category": "Category 03",
"Growth (WDC)": "-0.02",
"Growth (MoYaM)": "0.03"
},
{
"Date": "10/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.08",
"Growth (MoYaM)": "0.08"
},
{
"Date": "11/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.12",
"Growth (MoYaM)": "0.12"
},
{
"Date": "12/1/2022",
"Category": "Category 03",
"Growth (WDC)": "0.07",
"Growth (MoYaM)": "0.07"
},
{
"Date": "1/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.04",
"Growth (MoYaM)": "0.04"
},
{
"Date": "2/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.08",
"Growth (MoYaM)": "0.08"
},
{
"Date": "3/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.19",
"Growth (MoYaM)": "0.19"
},
{
"Date": "4/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.14",
"Growth (MoYaM)": "0.09"
},
{
"Date": "5/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.05",
"Growth (MoYaM)": "0.16"
},
{
"Date": "6/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.13",
"Growth (MoYaM)": "0.13"
},
{
"Date": "7/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.09",
"Growth (MoYaM)": "0.09"
},
{
"Date": "8/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.11",
"Growth (MoYaM)": "0.11"
},
{
"Date": "9/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.06",
"Growth (MoYaM)": "0.01"
},
{
"Date": "10/1/2023",
"Category": "Category 03",
"Growth (WDC)": "0.02",
"Growth (MoYaM)": "-0.66"
},
{
"Date": "11/1/2021",
"Category": "Category 10",
"Growth (WDC)": "0.24",
"Growth (MoYaM)": "0.31"
},
{
"Date": "12/1/2021",
"Category": "Category 10",
"Growth (WDC)": "0.16",
"Growth (MoYaM)": "0.16"
},
{
"Date": "1/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.12",
"Growth (MoYaM)": "0.18"
},
{
"Date": "2/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.11",
"Growth (MoYaM)": "0.11"
},
{
"Date": "3/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.18",
"Growth (MoYaM)": "0.18"
},
{
"Date": "4/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.22",
"Growth (MoYaM)": "0.16"
},
{
"Date": "5/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.15",
"Growth (MoYaM)": "0.21"
},
{
"Date": "6/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.13",
"Growth (MoYaM)": "0.13"
},
{
"Date": "7/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.25",
"Growth (MoYaM)": "0.00"
},
{
"Date": "8/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.09",
"Growth (MoYaM)": "0.14"
},
{
"Date": "9/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.09",
"Growth (MoYaM)": "0.14"
},
{
"Date": "10/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.13",
"Growth (MoYaM)": "0.13"
},
{
"Date": "11/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.03",
"Growth (MoYaM)": "0.03"
},
{
"Date": "12/1/2022",
"Category": "Category 10",
"Growth (WDC)": "0.01",
"Growth (MoYaM)": "0.01"
},
{
"Date": "1/1/2023",
"Category": "Category 10",
"Growth (WDC)": "0.04",
"Growth (MoYaM)": "0.04"
},
{
"Date": "2/1/2023",
"Category": "Category 10",
"Growth (WDC)": "0.00",
"Growth (MoYaM)": "0.00"
},
{
"Date": "3/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.08",
"Growth (MoYaM)": "-0.08"
},
{
"Date": "4/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.08",
"Growth (MoYaM)": "-0.12"
},
{
"Date": "5/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.05",
"Growth (MoYaM)": "0.05"
},
{
"Date": "6/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.06",
"Growth (MoYaM)": "-0.06"
},
{
"Date": "7/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.03",
"Growth (MoYaM)": "-0.03"
},
{
"Date": "8/1/2023",
"Category": "Category 10",
"Growth (WDC)": "0.00",
"Growth (MoYaM)": "0.00"
},
{
"Date": "9/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.02",
"Growth (MoYaM)": "-0.06"
},
{
"Date": "10/1/2023",
"Category": "Category 10",
"Growth (WDC)": "-0.07",
"Growth (MoYaM)": "-0.69"
}
]
}
}
Let me know if this gets you what you're after.
Thanks for the reply giammariam . As a start, I simply inserted your transform addition block and clicked apply--just to see what would happen. I was surprised--and puzzled, frankly--that nothing happened. (I thought the visual would break because the field references in the transform addition block are different from what I'm using in this visual, a "Growth" field that has been pre-calculated in DAX.)
Doug7983, there are also additional changes further down for the color encoding. This example is the same one that you used as an example to to build your current spec using your actual data. The transforms and color encoding updates are the only changes. If you update the field names, the color scale domain and range should now be specific to each category.
giammariam I really appreciate your efforts, this time and previous times you've helped. I think maybe the spec you're working from is off from the one I'm using just enough to make difficult/confusing for me to implement? I'm not sure. Anyway, when I tried this suggestion, everything broke.
I'm not sure if it matters, for instance, but my spec has none of the value block that your's does:"values": [ { "Date": "11/1/2021", "Category": "Category 01", "Growth (WDC)": "0.23", "Growth (MoYaM)": "0.30" }, { "Date": "12/1/2021", "Category": "Category 01", "Growth (WDC)": "0.12", "Growth (MoYaM)": "0.12" },<snipped>
