Crosstab Chart

Visual crosstab a simple table where instead of numbers in table cells a bar is shown. This example shows Crosstab Chart built in HTML / JavaScript with source code that you can edit to see changes in visualization.

main
run-button
run-button
reset-button
// Data is fetched from https://www.charts.com/static/coffee.json and assigned to the variable data.
// Schema is fetched from https://www.charts.com/static/coffee/schema.json and assigned to the variable schema.
// An element with id `chart-container` is available in the DOM to house the visualization

const DataModel = muze.DataModel;
const rootData = new DataModel(data, schema); /* data and schema is global */
  
const env = muze();
const canvas = env.canvas();
canvas
    .rows(['Market', 'Product Type'])
    .columns([['Revenue', 'Expense'], ['Revenue', 'Expense']])
    .data(rootData)
    .width(650)
    .height(800)
    .config({
        showHeaders: true, /* show the headers of fields used in faceting */
        facetConfig: { rows: { verticalAlign: 'middle' } }, /* dimensional values are placed in middle */
        axes: {
            y: { showAxisName: false }, /* dont show axis name as we are showing headers, its redundant information */
            x: {
                tickFormat: (d) => {
                    if (d < 1000) return d;
                    if (d > 1000 && d < 1000000) return `${d / 1000}K`
                    if (d > 1000000) return `${d / 1000}M`
                    return d
                }
            }
        }
    })
    .title('Visual Crosstab')
    .subtitle('Revenue and Expense by Product type and Market')
    .mount('#chart-container');

What is visual crosstab?

Visual crosstab a simple table where instead of numbers in table cells a bar is shown. The length of the bar is proportional to the value of the cell.

Data

The above visualization is created from this data and this schema.

Steps to create visual crosstab

Following are the steps we need to do to create the above visualization

  • Create an instance of DataModel from data and schema
  • Provide the rows and columns to the canvas for layouting
  • Format axis labels show that values like 200000 get converted to 200K
  • Add title and subtitle to canvas
  • Finally, mount the chart to the DOM.

Create an instance of DataModel from data and schema

The execution environment has stored the data and schema in data and schema variable. DataModel is retrieved from muze namespace. Here we write the following code to create an instance of DataModel from CSV data

const DataModel = muze.DataModel;
const rootData = new DataModel(data, schema); 

Read more about schema and DataModel here. Head here if you want to know Muze takes instance of DataModel to show a chart.

Provide the rows and columns to the canvas for layouting

Crosstab is all about layouting. We have to call rows and columns with the correct fields to achieve the above chart. Here is an intuitive guide on how rows and columns determine the layouting.

In the above chart, Y-Axis is created from Product Type and the visualization is faceted by Market. Similarly, there are two measure which gets plotted in two X-Axes. The following code does that

canvas
    .rows(['Market', 'Product Type'])
    .columns([['Revenue', 'Expense'], ['Revenue', 'Expense']])

Notice X-Axis is drawn at top and bottom, hence we have passed same fields twice in columns. First argument draws the axis at top and second argument draws the axis at bottom.

Format axis labels

Axis labels are originally not formatted, it shows raw numbers as part of axis tick label. However we can format those ticks in the following way

.config({
    axes: {
        y: { showAxisName: false },
        x: {
            tickFormat: (d) => {
                if (d < 1000) return d;
                if (d > 1000 && d < 1000000) return `${d / 1000}K`
                if (d > 1000000) return `${d / 1000}M`
                return d
            }
        }
    }
})

Add title and subtitle to canvas

Add a title and subtitle to the canvas

canvas
    .title('Visual Crosstab')
    .subtitle('Revenue and Expense by Product type and Market')

Read more about title and subtitle here.

Mount the chart to the DOM

Finally attach the canvas instance to DOM which houses the visualization

canvas.mount('#chart-container');

An element with id chart-container is available in the DOM to house the visualization.