Forum Discussion

Doug7983's avatar
Doug7983
Helper II
2 years ago
Solved

Help coloring Deneb heatmap

I’m new to Deneb and haven’t been able to figure out how to color this heatmap so that it is colored by row, or category, rather than as a whole:                       I want the ...
Custom visual
deneb
Heatmap
  • giammariam's avatar
    giammariam
    2 years ago

    Doug7983, I see the issue. I had a rogue closed bracket in the data object that I missed. I deleted it and updated the above spec. Try it now.

      "data": {
    "name": "dataset"
    ] //<-- Should not be there
  }

     

  • giammariam's avatar
    giammariam
    2 years ago

    Another great catch Doug7983. That's what I get for trying to rush through it 😆

    gist

    {
  "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": 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": {
        "aggregate": "max",
        "field": "Growth (WDC)",
        "type": "quantitative",
        "title": "Growth (WDC)",
        "scale": {"domainMid": 0, "reverse": true, "scheme": "blueorange"},
        "legend": {
          "titleBaseline": "bottom",
          "direction": "vertical",
          "format": ".1%",
          "orient": "right"
        }
      }
    }
  },
  "data": {
    "name": "dataset"
  }
}

     

Doug7983's avatar
Doug7983
Helper II
2 years ago

Hey giammariam 

You're absolutely right. Those are conflicting statements. I think maybe the missing piece is describing how the orange-blue diverging color palette is applied? 

 

When I don't attempt to intervene in how Deneb applies pbiColorDivergent, Category 6 dominates the visual. 

 

But that is far different from the original Tableau chart:

 

i think the difference may lie in how the colors are being applied. Here is a screenshot from Tableau:

I’ve highlighted the dynamically created Start, End, and Center points. By default, the center of the spectrum is zero and the end colors are at equal distances from zero. Tableau assigns a lighter orange to -0.124 because the darkest orange would correspond to -0.648 – exactly opposite the maximum positive number. This tells the viewer that the lowest value, in orange, is not as far away from zero as the highest value.
 
I hope I haven't confused you further. I'm confused enough for both of us. Thanks for the help.
 
Doug

 

 

giammariam's avatar
giammariam
Solution Sage
2 years ago

Ah, this is very helpful! The midpoint of the input range is set to 0 in your Tableau screenshot. The scale in vega-lite is just taking into account the min/max values, so the midpoint here would be (max-min)/2. This would explain the color discrepancy. Let me play with it and see if I can get the scale to account for the 0 center threshold.