Vertical Area Chart

Displays changes in a variable across categories, emphasizing the range of values. This helps in understanding the variability and distribution of the variable across different categories. It is useful for analyzing data with a range of values within different groups, such as the distribution of income levels across different regions.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();

  const ColumnField = "Maker";
  const RowField = "Miles_per_Gallon";

  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .layers([
      {
        mark: "area",
        encoding: {
          color: { value: () => "#8DD3C7" },
        },
      },
      {
        mark: "line",
        encoding: {
          color: { value: () => "black" },
        },
      },
    ])
    .data(data)
    .mount("#chart") // mount your chart