Box Plot

A box plot showing growth of sepals

main
run-button
run-button
reset-button

loadData('/static/iris.cleared.json').then((res) => {
	// Retrieves the DataModel from muze namespace. Muze recognizes DataModel as a first class source of data.
	let DataModel = muze.DataModel;
  	// Retrieves layerFactory for composing layers
    let layerFactory = muze.layerFactory;
  	// Compose share operator for plotting multiple variable in one y axis
    let share = muze.Operators.share;
  	// Schema of data which describes the variable
	let schema = [{
     		name: 'organ',
        	type: 'dimension'
        },
        {
         	name: 'minValue', 
            type: 'measure'
        },
        {
            name: 'meanValue',
            type: 'measure'
        },
        {
        	name: 'maxValue',
            type: 'measure'
        },
        {
        	name: 'quarter',
            type: 'measure'
        },
        {
        	name: 'thirdQuarter',
            type: 'measure'
        }];
		
  		// 
  		let rootData = new DataModel(res, schema);
        
  		// Creates a custom mark named boxMark which is composed of atomic layers. BoxPlot is created using
  		// combination of layers.
        layerFactory.composeLayers('boxMark', [
          	            {
                name: 'maxTick', // This part of the layer is responsible for drawing the highest horzontal tick
                mark: 'tick',
                className: 'boxTicks',
                encoding: {
                    y: 'boxMark.encoding.maxValue',
                    x: 'boxMark.encoding.x',
                },
                interactive: false // Disabling interaction on this layer
            },
            {
            	name: 'upperTick', // This part of the layer is responsible for drawing the upper vertical
              	// tick mark
                className: 'upper-tick',
                mark: 'tick',
                encoding: { // Refer the encoding given in input layer. Since boxMark is the main layer
                  	// the encoding from input gets directly transferred here
					y: 'boxMark.encoding.quarter',
                   	x: 'boxMark.encoding.x',
                   	y0: 'boxMark.encoding.minValue',
                },
                interactive: false // Disable interaction in this layer
            },
          	{
                name: 'upperBand', 
                mark: 'bar',
                className: 'upperBand',
                encoding: {
                    y: 'boxMark.encoding.thirdQuarter',
                    x: 'boxMark.encoding.x',
                    y0: 'boxMark.encoding.meanValue',
                    color: 'boxMark.encoding.color',
                },
                transform: { // Since color field is applied, the data gets a stack trasnform. Here by mentioning
                  // identity transfrom, data does not get stack transformed
                    type: 'identity'
                }
            },
          	{
                name: 'meanTick',
                mark: 'tick',
                className: 'boxTicks',
                encoding: {
                    y: 'boxMark.encoding.meanValue',
                    x: 'boxMark.encoding.x',
                },
                interactive: false
            },
          	{
                name: 'lowerBand', // This part of the layer is responsible for drawing the lower vertical
              	// rectangle connected to the lower vertical tick
                mark: 'bar',
                className: 'lowerBand',
                encoding: {
                    y0: 'boxMark.encoding.meanValue',
                    x: 'boxMark.encoding.x',
                    y: 'boxMark.encoding.quarter',
                    color: 'boxMark.encoding.color',
                },
				transform: { // Since color field is applied, the data gets a stack trasnform. Here by mentioning
                  // identity transfrom, data does not get stack transformed
                    type: 'identity'
                }
            },
          	{
                name: 'lowerTick', // This part of the layer is responsible for drawing the lower vertical
              	// tick mark
                mark: 'tick',
                className: 'boxTicks',
                encoding: {
                    y: 'boxMark.encoding.maxValue',
                    x: 'boxMark.encoding.x',
                    y0: 'boxMark.encoding.thirdQuarter',
                },
                interactive: false // Disable interaction in this layer
            },
            {
                name: 'minTick', // This part of the layer is responsible for drawing the lowest horzontal tick
                mark: 'tick',
                className: 'boxTicks',
                encoding: {
                    y: 'boxMark.encoding.minValue',
                    x: 'boxMark.encoding.x',
                },
                interactive: false // Disabling interaction
            }
        ]);

  		// Create a global environment to share common configs across charts 
  		let env = muze();
  		// Set height, width and data to env, so that every instance of canvas which gets created from the environment
  		// receives this
  		 env = env.width(600)
            .height(400)
            .data(rootData);
        let canvas = env.canvas();
  		
  		// Create a combined field which gets plotted in the y Axis. Value of all those variables will be passed
  		// to layers
        let columns = [sharedField = share('minValue', 'meanValue', 'maxValue', 'quarter', 'thirdQuarter')],
            rows = ['organ'];

        canvas = canvas
            .rows(columns)
            .columns(rows)
            .color('organ')
  			.config({
        		axes: {
                	y: {
                    	showAxisName: false
                    }
                }
        	})
            .layers([{
                mark: 'boxMark',
                encoding: { // Map the encoding with variables. These custom encodings are used in the composite layers.
                    minValue: 'minValue',
                    meanValue: 'meanValue',
                    x: 'organ',
                    maxValue: 'maxValue',
                    quarter: 'quarter',
                    thirdQuarter: 'thirdQuarter'
                }
            }])
  		.title('Composing Boxplot', { position: 'bottom', align: 'right' })
  		.subtitle('Iris sepalLength distrubution', { position: 'bottom', align: 'right' })
        .mount(document.getElementById('chart-container'));
});