Simple Donut

Simple Donut

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 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 env = muze();
    let rootData = new DataModel(res, schema);
	let canvas = env.canvas();
        canvas = canvas
            .rows([])
            .columns([])
            .layers([{
                    mark: 'arc',
                    encoding: {
                        angle: 'Horsepower'
                    },
                    innerRadius: 100
                }
            ])
            .data(rootData)
            .color('Origin')
            .width(900)
            .height(800)
            .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'));
});