Creating a Faceted Chart

What is faceting?

Faceting is used to visualize subsets of data split by one or more dimensions. In Muze, when you add dimensions in rows / columns it splits the data by the dimensions and creates small multiples of the charts for each of those subsets of data.

Creating a row faceted crosstab

Adding more than one dimensions or dimensions with measures in rows creates a row faceted crosstab chart.

....
   muze.canvas().rows(['Region', 'Category']);
....

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

muze
  .canvas()
  .rows(["Region", "Category"])
  .columns([["Sales"]])
  .data(data)
  .config({
    showHeaders: true,
    axes: {
      y: {
        showAxisName: false,
      },
      x: {
        tickFormat: (d) => {
          const val = d.rawValue;
          if (val < 1000) return `${val}`;
          if (val > 1000 && val < 1000000) return `${val / 1000}K`;
          if (val > 1000000) return `${val / 1000}M`;
          return d;
        },
      },
    },
  })
  .title("Visual Crosstab")
  .subtitle("Sales by Region and Category")
  .mount("#chart");

Creating a column faceted crosstab

Adding more than one dimensions in columns will create a column faceted crosstab.

muze.canvas().columns(["Region", "Category"]);

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

muze
  .canvas()
  .columns(["Region", "Category"])
  .rows([["Sales"]])
  .data(data)
  .config({
    axes: {
      x: {
        showAxisName: true,
      },
      y: {
        tickFormat: (d) => {
          const val = d.rawValue;
          if (val < 1000) return `${val}`;
          if (val > 1000 && val < 1000000) return `${val / 1000}K`;
          if (val > 1000000) return `${val / 1000}M`;
          return d;
        },
      },
    },
  })
  .title("Visual Crosstab")
  .subtitle("Sales by Region and Category")
  .mount("#chart");

Crosstab using both rows and columns

Adding dimensions in both rows and columns also creates a crosstab.

For example, here in this example, we have faceted by Product Type in rows and Market in columns.

muze.canvas().columns(["Market", "Product"]).rows(["Product Type", "Revenue"]);

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

muze
  .canvas()
  .columns(["Region", "Segment"])
  .rows([["Category", "Sales"]])
  .data(data)
  .config({
    showHeaders: true,
    axes: {
      y: {
        showAxisName: false,
      },

      x: {
        tickFormat: (d) => {
          const val = d.rawValue;
          if (val < 1000) return `${val}`;
          if (val > 1000 && val < 1000000) return `${val / 1000}K`;
          if (val > 1000000) return `${val / 1000}M`;
          return d;
        },
      },
    },
  })
  .title("Visual Crosstab")
  .subtitle("Sales by Segment and Region for each Category")
  .mount("#chart");