Fragmented Tooltip

Line chart showing data in a fragmented tooltip

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
      .config({
          interaction: {
              tooltip: {
                  mode: 'fragmented' // fragmented tooltip view
       }}})
      .data(rootData) //  Feed data
  	  .width(800)
  	  .height(500)
      .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
});