Grouped Bar Chart

A grouped bar chart

main
run-button
run-button
reset-button
Promise.all([loadData('/static/cars.json'), loadData('/static/cars-schema.json')]).then((res) => {
  	// Schema for the data to descirbe the variables
    const data = res[0];
    const schema = res[1];
    
  	// Create an instance of DataModel using the data and schema.
    let dm = new muze.DataModel(data, schema);
  
  	// Create an environment for future rendering
    const env = muze();
    // Create an instance of canvas which houses the visualization
    const canvas = env.canvas();

	canvas
    	.rows(['Horsepower']) // Horsepower goes in Y aix
      	.columns(['Origin']) // Year goes in X axis
      	.color('Cylinders') // Colors the Origin field
        .data(dm)
  		.layers([{
        	mark: 'bar', // Specify the plot type
        	transform: { type: 'group' } // Specify if its group bar or stack bar
        }])
      	.width(600)
      	.height(400)
  		.title('Grouped bar chart', { position: 'bottom', align: 'right' })
		.subtitle('Horsepower by Origin coloured by Cylinders', { position: 'bottom', align: 'right' })
      	.mount('#chart-container') // Set the chart mount point
});