Heatmap

Uses color to represent the values of a variable across two dimensions. This allows for the visualization of patterns and relationships within two-dimensional data. It is often used to analyze data with geographical, temporal, or categorical dimensions, such as sales data by region and time, or gene expression data across different tissues.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;
  
  const data = getDataFromSearchQuery();

  const ColumnField = "Year";
  const RowField = "Maker";
  const ColorField = "Miles_per_Gallon";
  const TextField = "Miles_per_Gallon";

  muze
    .canvas()
    .columns([ColumnField])
    .rows([RowField])
    .layers([
      {
        mark: "bar",
        encoding: {
          color: {
            field: ColorField,
          },
          text: {
            field: TextField,
            labelPlacement: {
              anchors: ["center"],
            },
          },
        },
      },
    ])
    .config({
      axes: {
        x: {
          padding: 0,
        },
        y: {
          padding: 0,
        },
      },
    })
    .data(data)
    .mount("#chart"); // mount your chart