topic Deneb heatmap color tweak in Custom Visuals Development Discussion

Deneb heatmap color tweak

Doug7983 — Thu, 14 Mar 2024 18:34:27 GMT

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 almost exactly what I need:

Until it's filtered (using a slicer) and an extreme outlier (in dark blue) dominates the color scale:

Stakeholders are asking whether each row --across the fiscal years--can be colored independently. In other words, every row would have its own "blueorange" scale (in reverse). I have tried many approaches that have not worked. Here is my spec. Thanks for any help offered.

{

"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"

}

"facet": {

"column": {

"field": "FY",

"title": null,

"header": {"labelFontSize": 13}

}

"resolve": {

"scale": {"x": "independent"}

"spacing": {"column": 5},

"spec": {

"width": {"step": 35},

"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": "nominal"

{

"field": "Metric",

"type": "quantitative",

"format": ".1%"

}

"color": {

"aggregate": "max",

"field": "Metric",

"type": "quantitative",

"title": "Metric",

"scale": {

"reverse": true,

"scheme": "blueorange"

"legend": {

"title": "",

"titleAnchor": "middle",

"titleBaseline": "top",

"direction": "horizontal",

"format": "%",

"orient": "bottom-right",

"offset": 14

}

"data": {"name": "dataset"}

}

Re: Deneb heatmap color tweak

lbendlin — Fri, 15 Mar 2024 13:29:51 GMT

I wouldn't know how to do that in Deneb but I have done similar things with the cheapo matrix visual version. Is that an option for you?

Re: Deneb heatmap color tweak

Doug7983 — Fri, 15 Mar 2024 19:49:01 GMT

Possibly. The out-of-the-box matrix isn't as space-efficient, though.

Re: Deneb heatmap color tweak

lbendlin — Fri, 15 Mar 2024 20:16:17 GMT

got some sample data?

Re: Deneb heatmap color tweak

giammariam — Sat, 16 Mar 2024 13:07:24 GMT

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.

Re: Deneb heatmap color tweak

KerKol — Sun, 17 Mar 2024 06:24:33 GMT

Adding on to @giammariam, I believe I've done something similar too Independent Scales with Deneb (Ring Chart) - EXPLORATIONS IN DATA STORYTELLING WITH POWER BI (kerrykolosko.com)

Re: Deneb heatmap color tweak

Doug7983 — Mon, 18 Mar 2024 13:15:59 GMT

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.)

Re: Deneb heatmap color tweak

Doug7983 — Mon, 18 Mar 2024 13:27:57 GMT

Thanks for the reply, @KerKol. My experience with Deneb is limited, so it's likely I didn't pick the right piece or pieces from your spec.

I adpated this piece of your spec for my visual:

"color": {
          "field": "__4__",
          "type": "quantitative",
          "title": "Marriages",
          "scale": {
            "range": [
              "transparent",
              "#de9ed6"

Other than the color scheme, the only difference now was that a rectangle with an underlying value of -17% looks not to be colored.

Re: Deneb heatmap color tweak

Doug7983 — Mon, 18 Mar 2024 13:33:39 GMT

Thanks for the response, @lbendlin. Here is some sample data:

Category	Date	Change
Category 1	9/1/2022	26%
Category 1	10/1/2022	35%
Category 1	11/1/2022	25%
Category 1	12/1/2022	30%
Category 1	1/1/2023	22%
Category 1	2/1/2023	32%
Category 1	3/1/2023	48%
Category 1	4/1/2023	35%
Category 1	5/1/2023	36%
Category 1	6/1/2023	34%
Category 1	7/1/2023	28%
Category 1	8/1/2023	24%
Category 1	9/1/2023	16%
Category 1	10/1/2023	44%
Category 1	11/1/2023	32%
Category 1	12/1/2023	31%
Category 1	1/1/2024	34%
Category 1	2/1/2024	215%
Category 1	3/1/2024	29%
Category 2	9/1/2022	27%
Category 2	10/1/2022	23%
Category 2	11/1/2022	26%
Category 2	12/1/2022	26%
Category 2	1/1/2023	29%
Category 2	2/1/2023	23%
Category 2	3/1/2023	15%
Category 2	4/1/2023	21%
Category 2	5/1/2023	26%
Category 2	6/1/2023	-17%
Category 2	7/1/2023	30%
Category 2	8/1/2023	27%
Category 2	9/1/2023	26%
Category 2	10/1/2023	29%
Category 2	11/1/2023	25%
Category 2	12/1/2023	24%
Category 2	1/1/2024	22%
Category 2	2/1/2024	24%
Category 2	3/1/2024	16%

Re: Deneb heatmap color tweak

giammariam — Mon, 18 Mar 2024 14:40:17 GMT

@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.

Re: Deneb heatmap color tweak

lbendlin — Mon, 18 Mar 2024 14:36:07 GMT

Here's how the matrix would look like based on your sample data.

Re: Deneb heatmap color tweak

Doug7983 — Mon, 18 Mar 2024 14:44:18 GMT

@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"
      },

Re: Deneb heatmap color tweak

Doug7983 — Mon, 18 Mar 2024 15:50:21 GMT

Thanks, @lbendlin . This could possibly work, although my stakeholders are used to seeing the Deneb version and change is hard. I can't get the DAX to work, though. Maybe because "Change" in my data set is a DAX expression and not a column?

Re: Deneb heatmap color tweak

lbendlin — Mon, 18 Mar 2024 15:54:07 GMT

Please provide sample data that fully covers your issue.