Stacked Bar Chart

Showing a stacked bar chart

main
run-button
run-button
reset-button
Promise.all([loadData('/static/cars.json'), loadData('/static/cars-schema.json')]).then((res) => {
    // load data and schema from url
    const data = res[0];
    const schema = res[1];
    
  	// 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 a new variable which will keep count of cars per cylinder for a particular origin
  	const dmWithCount = rootData.calculateVariable(
      	{
            name: 'CountVehicle',
            type: 'measure',
            defAggFn: 'count', // When ever aggregation happens, it counts the number of elements in the bin
            numberFormat: val => parseInt(val, 10)
        },
        ['Name', () => 1]
    );
  
	// Create an environment for future rendering
    let env = muze(); 
  	// Create an instance of canvas which houses the visualization
    let canvas = env.canvas();
  
	canvas
  		.rows(['CountVehicle']) // CountVehicle goes in y axis
      	.columns(['Cylinders']) // Cylinders goes in x-axis
      	.color('Origin') // Colors encoding using the Origin field
        .data(dmWithCount)
  		.layers({ // Draw a bar plot, by default stack transform is used
        	Acceleration: {
            	mark: 'bar'
            }
         })
      	.width(600)
      	.height(400)
  		.title('Stacked bar chart', { position: 'top', align: 'right'})
  		.subtitle('Count of cars per cylinder per origin', { position: 'top', align: 'right'})
      	.mount('#chart-container'); // Set the chart mount point
});