Crosstab Chart

Crosstab chart

main
run-button
run-button
reset-button
loadData('/static/coffee.csv').then((data) => {
    // Schema for the data to descirbe the variables
    let schema = [{
            name: 'Market',
            type: 'dimension'
        },
        {
            name: 'Product',
            type: 'dimension'
        },
        {
            name: 'Product Type',
            type: 'dimension'
        },

        {
            name: 'Revenue',
            type: 'measure'
        },
        {
            name: 'Expense',
            type: 'measure'
        },
        {
            name: 'Profit',
            type: 'measure',
        },
        {
            name: 'Order Count',
            type: 'measure'
        }];
        
        // Retrieves the DataModel from muze namespace. Muze recognizes DataModel as a first class source of data.
        let DataModel = muze.DataModel;
        // Create an instance of DataModel using the data and schema.
        let rootData = new DataModel(data, schema);
        
        // Create an environment for future rendering
        let env = muze();
        // Create an instance of canvas which houses the visualization
        let canvas = env.canvas();
        canvas = canvas
            // Creates facets and Y axis. The last variable goes to Y axis
            .rows(['Market', 'Product Type'])
            // Creates facets and X axis. The values are repeated so that the axis is formed both on top and bottom
            .columns([['Revenue', 'Expense'], ['Revenue', 'Expense']])
            .data(rootData)
            // Every unit has a default minimum measurement after which it cant be rendered, for cross tab stretch the
            // limit. This also defines the amount of scrolling necessary
            .minUnitHeight(10)
            .minUnitWidth(20)
            // Total visualization size
            .width(650)
            .height(700)
            .config({
          		showHeaders: true,
                // Places the facet lables at middle
                facetConfig: { rows: { verticalAlign: 'middle' } },
                axes: {
                  	y: {
                   		showAxisName: false,
                    },
                    x: {
                      	// Apply number formatting on the ticks
                        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', { position: 'top', align: 'left', })
            .subtitle('A tabular view of the data keeping high granularity', { position: 'top', align: 'left' })
            .mount(document.getElementById('chart-container')); // Render on a dom element
    });