Donut Chart

Shows the proportion of each category within a whole with a central hole. This visually emphasizes the relative size of each category while maintaining a clear distinction between the parts and the whole. It is often used to highlight the overall composition of a whole while also emphasizing the relative importance of each category.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();
  
  const AngleField = "Horsepower";
  const ColorField = "Origin";
  muze
    .canvas()
    .layers([
      {
        mark: "arc",
        encoding: {
          angle: AngleField,
          radius: {
            range: function range(_range) {
              return [_range[0] + 100, _range[1]];
            },
          },
        },
      },
    ])
    .color(ColorField)
    .data(data)
    .mount("#chart") // mount your chart