Overview and zoom

Perform zooming and panning by using data operators and updating layer dynamically

main
run-button
run-button
reset-button
        let env = muze();
		const DataModel = muze.DataModel;
        
        const rootData = new DataModel(data, schema);

        env = env.data(rootData);
        const chartConf = {
            axes: {
                x: {
                    nice: false,
                    name: 'Date'
                },
                y:{
                    name: 'Price'
                }
            }
        };

        const detail = env.canvas()
            .rows(['price'])
            .columns(['date'])
            .width(800)
            .height(400)
            .layers([{
                mark: 'area',
                transition: {
                    duration: 0
                }
            }])
            .config(chartConf)
            .title('Select a range from the bottom chart to get a detailed view for that range')
            .mount('#chart1');

        const overview = env.canvas()
            .rows(['price'])
            .columns(['date'])
            .width(800)
            .height(150)
            .config(chartConf)
            .layers([{
                mark: 'area',
                interpolate: 'catmullRom'
            }])
            .mount('#chart2');

        muze.ActionModel.for(detail, overview).enableCrossInteractivity()
                        .for(overview).registerPropagationBehaviourMap({
                            brush: 'filter'
                        });