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:

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();

  const ColumnField = "Maker";
  const RowField1 = "Horsepower";
  const RowField2 = "Cumulative_Horsepower_Percentage";
  const colorBar = "#8DD3C7";
  const colorLine = "#000";

  muze
  .canvas()
  .columns([ColumnField])
  .rows([[RowField1], [RowField2]])
  .layers([
    {
      mark: "bar",
      encoding: {
        color: { value: () => colorBar },
        y: RowField1,
      },
    },
    {
      mark: "line",
      encoding: {
        color: { value: () => colorLine },
        y: RowField2,
      },
    },
  ])
  .config({
    borders: { top: { show: false } },
    columns: { headers: { show: false } },
    showHeaders: false,
    rows: {
      facets: { show: false },
      headers: { show: false },
    },
    axes: {
      x: {
        showAxisLine: false,
        fields: {
          [ColumnField]: {
            showAxisLine: true,
            domain: data.getField(ColumnField).uniques(),
          },
        },
      },
      y: {
        tickFormat: (dataInfo, contextInfo) => {
          if (contextInfo.context.config().field === RowField2) {
            return `${dataInfo.formattedValue}%`;
          }
          return `${dataInfo.formattedValue}`;
        },
      },
    },
  })
  .data(data)
  .mount("#chart"); // Mount your chart