Heatmaps

Heatmaps can be created using a CUSTOM chart.

Here we describe a common use case, creating a SNP Matrix Heatmap.

Example project

For an example Microreact project showing data structure and VegaLite settings for a SNP Matrix Heatmap, please see https://microreact.org/project/snp-matrix-heatmap-demo

Screenshot of the VegaLite specs in the example project

Data

The data for this SNP Matrix is essentially a list of sample-ids in one column, and a column for each sample-id. The value of the datatable cell contains the number of SNPs differing between the sample-id in the row and the sample-id in the column.

Ideally, the matrix data columns would be added to your metadata table, rather than requiring a second metadata file in the Microreact project. The columns would simply need to be joined to another dataset containing the same sample-id column.

Bring the matrix file in to Microreact with all columns clearly labeled (including the top left corner, which may be unlabeled in some raw matrix files, but which should be "id" or whatever is your id column in the metadata table).

VegaLite Specs

The key to a SNP Matrix in VegaLite is the "fold" function.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://microreact.org/api/files/raw?6e0532abce94bb92cf473b9b95f2d88a389a46e0",
    "format": {
      "type": "csv"
    }
  },
  "transform": [
    {
      "fold": [
        "1572141",
        "1583527",
        "1676461",
        "2769297",
        "2769368",
        "2769370",
        "2769375",
        "2769379",
        "2771193",
        "2771572",
        "3202550",
        "3213200",
        "GCF_001618505_2_ASM161850v2_genomic"
      ]
    }
  ],
  "mark": "rect",
  "encoding": {
    "x": {
      "field": "sample1",
      "type": "nominal"
    },
    "y": {
      "field": "key",
      "type": "nominal"
    },
    "color": {
      "field": "value",
      "type": "quantitative",
      "scale": {
        "domain": [
          0,
          31
        ],
        "scheme": "viridis",
        "type": "linear"
      }
    }
  },
  "config": {
    "view": {
      "stroke": "transparent"
    }
  }
}