Search code examples
colorsheatmapvega-litevega

How to colour code a heatmap in Vega Lite?

I am trying to make a simple heatmap showing the distribution of premier league scores however despite my colour scheme all values are showing '0'...

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
  "title": {
    "text": "Frequency of scorelines Premier League, 2016-17",
    "subtitle": ["Source: Football Datahub"],
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "data": {
    "url": "https://pkgstore.datahub.io/sports-data/english-premier-league/season-1617_csv/data/d6b7551d3e130b6e59240d7018524498/season-1617_csv.csv"},
  "mark": "rect",
  "height": 300,
  "width": 300,
  "encoding": {
    "x": {
      "field": "FTHG",
      "type": "quantitative",
      "title": "",
      "axis": {"format": ".0f"}
    },
    "y": {
      "field": "FTAG",
      "type": "quantitative",
      "title": ""
    },
    "color": {
      "aggregate": "count",
      "type": "quantitative",
      "field": "__count",
      "scale": {"scheme": "inferno"}
    }
  },
    "config": {
    "view": {
      "stroke": "transparent"
    }
  }
}

This is my code. Any help appreciated, thanks!

Solution

  • I have turned on tooltips for you to help with debugging.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
  "title": {
    "text": "Frequency of scorelines Premier League, 2016-17",
    "subtitle": ["Source: Football Datahub"],
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "data": {
    "url": "https://pkgstore.datahub.io/sports-data/english-premier-league/season-1617_csv/data/d6b7551d3e130b6e59240d7018524498/season-1617_csv.csv"
  },
  "height": 300,
  "width": 300,
  "mark": {"type": "rect", "tooltip": {"content": "data"}},
  "encoding": {
    "x": {
      "field": "FTHG",
      "type": "nominal",
      "title": "",
      "axis": {"format": ".0f"}
    },
    "y": {"field": "FTAG", "type": "nominal", "title": ""},
    "color": {
      "aggregate": "count",
      "type": "quantitative",
      "field": "__count",
      "scale": {"scheme": "inferno"}
    }
  },
  "config": {"view": {"stroke": "transparent"}}
}