Consolidated Tooltip

Line chart showing data in a consolidated tooltip on hover

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];
  	// Get reference of dom element on which the chart will be rendered
  	let mountPoint = document.getElementById('chart-container');

  	// Retrieves the DataModel from muze namespace. Muze recognizes DataModel as a first class source of data.
	let DataModel = muze.DataModel;
    // Create an environment for future rendering
  	let env = muze(); 

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

  	// Create an instance of canvas which houses the visualization
  	let canvas = env.canvas();

  	canvas = canvas
    	.rows(['Acceleration']) // Acceleration goes in Y-Axis
    	.columns(['Year']) // Year goes in X-Axis
    	.color('Origin') // Create multiseries by applying Origin in color encoding channel
  		.width(600)
        .height(400)
    	.data(rootData) //  Feed data
    	.title('Line chart with color encoding', { position: 'top', align: 'left', })
    	.subtitle('Change of Acceleration of cars from 1970 - 1982', { position: 'top', align: 'left' })
    	.mount(mountPoint); // Render on the DOM el
});