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

     

giammariam's avatar
giammariam
Solution Sage
2 years ago

Hey Doug7983, let me know if this is any closer. Note - you can eliminate the spacing between the FYs by setting the column spacing to -5.

Here's the gist.

Here's the spec:

 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "transform": [{"calculate": "'FY ' + year(datum['Date'])", "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"
        }
      },
      "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": "ordinal"},
        {"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. The screenshot looks extremely promising, but the spec is throwing this error message:

 

Invalid specification {}. Make sure the specification includes at least one of the following properties: "mark", "layer", "facet", "hconcat", "vconcat", "concat", or "repeat".

I'm not far enough down the learning path to troubleshoot it, but I wonder whether it may have something to do with this piece about "FY":

 

  "transform": [{"calculate": "'FY ' + year(datum['Date'])", "as": "FY"}],
  "facet": {
    "column": {"field": "FY", "title": null, "header": {"labelFontSize": 13}}
 
Thanks for your help. This looks like it could well work if we can get past that error.