Radial Pie Chart

Radial Pie Chart showing Series

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; // Creating reference to DataModel.
	loadData('/static/cars-schema.json')
  		.then((schema) => {
   			let env = muze();
    let DataModel = muze.DataModel,
        share = muze.operators.share,
        html = muze.operators.html,
        actionModel = muze.ActionModel;
    const SpawnableSideEffect = muze.SideEffects.SpawnableSideEffect;

        let rootData = new DataModel(res, schema);

        rootData = rootData.groupBy(['Origin'], {
            Horsepower: 'first',
            Acceleration: 'mean'
        });

        env = env.data(rootData).minUnitHeight(40).minUnitWidth(40);
        let mountPoint = document.getElementById('chart-container');
        let canvas = env.canvas();
        let rows = [],
            columns = [];
        canvas = canvas
            .rows(columns)
            .columns(rows)
            .layers([{
                    mark: 'arc',
                    encoding: {
                        radius: 'Horsepower',
                        angle: 'Cylinders'
                        
                    }
                }
            ])
            .data(rootData)
            .color('Origin')
            .width(500)
            .height(400)
            .config({
                legend: {
                    position: 'bottom'
                }
            })
            .title('The Muze Project', { position: "top", align: "center", })
            .subtitle('Composable visualizations with a data first approach', { position: "top", align: "center" })
            .mount(mountPoint);
       let promises = canvas.done();
     promises.then(()=>{createChart();});    
    	});
});