Pareto Chart

Combines a bar chart and a line graph to visualize the Pareto principle (80/20 rule). This helps in identifying the most significant factors contributing to a problem or outcome. It is often used in quality control, process improvement, and problem-solving to identify the most impactful areas for improvement.

Chart:

Code:

  muze
    .canvas()
    .columns(["Maker"])
    .rows([["Horsepower"], ["Cumulative_Horsepower_Percentage"]])
    .layers([
      {
        mark: "bar",
        encoding: {
          color: {
            value: () => {
              return "#8DD3C7";
            },
          },
          y: "Horsepower",
        },
      },
      {
        mark: "line",
        encoding: {
          color: {
            value: () => {
              return "#000";
            },
          },
          y: "Cumulative_Horsepower_Percentage",
        },
      },
    ])
    .config({
      borders: {
        top: {
          show: false,
        },
      },
      columns: {
        headers: {
          show: false,
        },
      },
      showHeaders: false,
      rows: {
        facets: {
          show: false,
        },
        headers: {
          show: false,
        },
      },
      axes: {
        x: {
          showAxisLine: false,
          fields: {
            Maker: {
              showAxisLine: true,
              domain: dataset.map((d) => d.Maker),
            },
          },
        },
        y: {
          tickFormat: (dataInfo, contextInfo) => {
            if (
              contextInfo.context.config().field ===
              "Cumulative_Horsepower_Percentage"
            ) {
              return `${dataInfo.formattedValue}%`;
            }
            return `${dataInfo.formattedValue}`;
          },
        },
      },
    })