Gradient Legend

Horizontal bar chart with gradient legend

main
run-button
run-button
reset-button
Promise.all([loadData('/static/cars.json'), loadData('/static/cars-schema.json')]).then((res) => {
      // Schema for the data to descirbe the variables
      // load data and schema from url
    const data = res[0];
    const schema = res[1];
    
      // Create an instance of DataModel using the data and schema.
      let dm = new muze.DataModel(data, schema);
      // Sort the data. Before sorting groupBy needs to be performed. As grouping after sorting changes the order.
      // When sorting is applied, internal grouping of data inside muze has to be turned off.
      const filterMaker = ['bmw', 'honda', 'ford', 'volvo', 'volkswagen', 'audi', 'renault', 'toyota', 'dodge', 'chevrolet', 'plymouth'];
      dm = dm.groupBy(['Maker']).sort([['Acceleration', 'ASC']]);
    dm = dm.select((fields) => filterMaker.indexOf(fields.Maker.value) > -1)
      // Create an environment for future rendering
      const env = muze();
      // Create an instance of canvas which houses the visualization
      const canvas = env.canvas();

    canvas
        .rows(["Maker"]) // Year goes in X axis
          .columns(['Acceleration']) // Acceleration goes in Y axis
        .data(dm)
          .color({
            field: 'Acceleration', // A measure in color encoding channel creates gradient legend
               stops: 3,   // 3 stops with interpolated value
               range: ['#eaeaea', '#258e47'] // range could be either set of color or predefined palletes
        })
          .config({
            autoGroupBy: { // Turn off internal grouping of data because data has order wich needs to be maintained
                disabled: true
            }
        })
          .width(600) // Set the chart width
          .height(400) // Set the chart height
          .title('Bar chart with gradient legend', { position: 'bottom', align: 'right', })
          .subtitle('Change of acceleration over the years colored with Horsepower', { position: 'bottom', align: 'right' })
          .mount('#chart-container') // Render on a dom element
});