Pie Chart

Pie Chart Showing Composable visualizations with a data first approach

main
run-button
run-button
reset-button

loadData('/static/cars.json')
  .then((res) => {
  	// this sample shows how to use the datatable
	let DataModel = muze.DataModel;
   	let env = muze();
	let schema = [{
                name: 'Name',
                type: 'dimension'
            },
            {
                name: 'Maker',
                type: 'dimension'
            },
            {
                name: 'Miles_per_Gallon',
                type: 'measure',
                defAggFn: 'max'
            },

            {
                name: 'Displacement',
                type: 'measure',
                defAggFn: 'max'
            },
            {
                name: 'Horsepower',
                type: 'measure',
                defAggFn: 'avg'
            },
            {
                name: 'Weight_in_lbs',
                type: 'measure',
                defAggFn: 'min'
            },
            {
                name: 'Acceleration',
                type: 'measure',
                defAggFn: 'avg'
            },
            {
                name: 'Origin',
                type: 'dimension'
            },
            {
                name: 'Cylinders',
                type: 'dimension'
            },
            {
                name: 'Year',
                type: 'dimension'
            }];
  		let rootData = new DataModel(res, schema);
  
        let DMWithCount = rootData.calculateVariable({
            name: 'countVehicle',
            type: 'measure',
            defAggFn: 'count',
            numberFormat: val => parseInt(val, 10)
        }, ['Name', () => 1]);

        let canvas = env.canvas();
        canvas = canvas
            .rows([])
            .columns([])
            .layers([ 
          				{ 
                          	mark: 'arc',
                          	encoding: {
                            				angle : 'countVehicle'
                            		  }
                        }])
            .data(DMWithCount)
  			.width(500)
  			.height(600)
            .color('Origin')
            .title('The Muze Project', { position: "top", align: "center", })
            .subtitle('Composable visualizations with a data first approach', { position: "top", align: "center" })
            .mount(document.getElementById('chart-container'));
});