Radial Pie

Pie having its section radius depend on a measure

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.
    const DataModel = muze.DataModel;
    const calculateVariable = DataModel.Operators.calculateVariable;

    // Create an instance of DataModel using the data and schema.
    let rootData = new DataModel(data, schema);

    // Create a calculated variable which keeps track of the no of car each maker has for a given criterial
    let DMWithCount = calculateVariable({
        name: 'CountVehicle',
        type: 'measure',
        defAggFn: 'count',
        numberFormat: val => parseInt(val, 10)
    }, ['Name', () => 1])(rootData);

    // Create an environment for future rendering
    let env = muze();

    // Get a canvas instance from Muze where the chart will be rendered.
    let canvas = env.canvas();
  

    canvas = canvas
        .rows([])
        .columns([])
        .layers([{ 
            // Map the Maker to angle encoding, each maker will get equal angle since Maker is dimension
            // Map the CountVehicle to raidus encoding, the greater the number of vehicle a maker has radius for that slice will be larger
          	mark: 'arc',
          	encoding: {
				radius : 'CountVehicle',
  				angle: 'Maker'
            },
            innerRadius: 50
        }])
        .data(DMWithCount)
		.width(500)
		.height(400)
        .color('Cylinders') // Color the slices with sylinders
        .title('Radial pie chart', { position: 'top', align: 'center' })
        .subtitle('Variation of radial chart which encodes Maker and Count of cars for a particular maker', { position: 'top', align: 'center' })
        .mount(document.getElementById('chart-container'));
});