Pivot Table with Measure Names and Measure Values

Presents aggregated data in a tabular format, enabling flexible analysis and cross-tabulation. This allows for the exploration and summarization of data from multiple perspectives. It is a powerful tool for data analysis and can be used to identify trends, patterns, and insights within large datasets.

Chart:

Code:

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

  const RowField1 = "Origin";
  const RowField2 = "Maker";
  const ColumnField = "Measure names";
  const TextField = "Measure values";

  muze
    .canvas()
    .rows([RowField1, RowField2])
    .columns([[ColumnField]])
    .layers([
      {
        mark: "text",
        encoding: {
          text: TextField,
          backgroundColor: TextField,
        },
      },
    ])
    .config({
      rows: {
        headers: {
          show: "true",
          position: "top",
        },
        facets: {
          interaction: {
            collapse: {
              enabled: true,
              collapseAll: false,
              state: [],
              collapseIcon:
                '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" ' +
                'xmlns="http://www.w3.org/2000/svg" style="rotate:-90deg">' +
                '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.19531 5.13812L3.13812 4.19531L6.00005 7.05724' +
                'L8.86198 4.19531L9.80479 5.13812L6.00005 8.94286L2.19531 5.13812Z" fill="#777E8B"/>' +
                '</svg>',
              expandIcon:
                '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" ' +
                'xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.19531 5.13812' +
                'L3.13812 4.19531L6.00005 7.05724L8.86198 4.19531L9.80479 5.13812L6.00005 8.94286L2.19531 5.13812Z"' +
                'fill="#777E8B"/></svg>',
              fields: {
                [RowField1]: {
                  enabled: false,
                },
              },
            },
          },
        },
      },
      columns: {
        headers: {
          show: "true",
          position: "top",
        },
        totals: {
          subTotals: {
            enabled: true,
            text: "Sub Total",
          },
          grandTotals: {
            enabled: true,
            text: "Grand Total",
          },
        },
      },
      legend: {
        backgroundColor: {
          fields: {
            [TextField]: {
              splitBy: {
                field: ColumnField,
                values: {
                  "Total Acceleration": {
                    range: ["#AFC6F8", "#2E75F0"],
                  },
                  "Total Horsepower": {
                    range: ["#B4EBF2", "#48D1E0"],
                  },
                  "Total Displacement": {
                    range: ["#FFF0B3", "#FCC838"],
                  },
                  "Total Miles_per_Gallon": {
                    range: ["#99E5CC", "#06BF7F"],
                  },
                },
              },
            },
          },
        },
      },
    })
    .data(data)
    .mount("#chart"); // mount your chart