Size Legend

Scatter chart having size legend

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];

    // Retrieves the DataModel from muze namespace. Muze recognizes DataModel as a first class source of data.
    let DataModel = muze.DataModel;
    // Create an instance of DataModel using the data and schema.
    let rootData = new DataModel(data, schema);

    // Create an environment for future rendering
    let env = muze();       
    
    // Get a canvas instance from Muze where the chart will be rendered.
    let canvas = env.canvas();

    canvas = canvas
        .rows(['Acceleration']) // Acceleration goes in X axis
        .columns(['Displacement']) // Displacement goes in Y axis
        .detail(['Maker'])
        .size({
            field: 'Cylinders', // Size retinal encoding with Cylinders
            range: [50, 360]
        })
        .color('Cylinders') // Color retinal encoding with Cylinders
        .data(rootData)
  		.layers([{
           mark: 'point'
         }, {
           mark: 'line',
           source: (dt) => { // gets the lowest number from each category
             const cylinderValues = dt.getFieldspace().fieldsObj().Cylinders.domain();
             let maxs = [];
             cylinderValues.forEach((val) => {
                   let dm = dt.select((fields) => fields.Cylinders.value === val, { saveChild: false });
                   let domain = dm.getFieldspace().fieldsObj().Displacement.domain();
                 maxs.push(domain[0]);
             });
             return dt.select((fields) => maxs.indexOf(fields.Displacement.value) !== -1);
           },
           transform: {
             type: 'identity'
           },
           encoding: { color: { value: () => '#607d8b' } },
           interpolate: ‘catmullRom’
         }])
        .width(500)
        .height(500)
        .title('Scatter plot with retinal encodings', { position: 'top', align: 'left' })
        .subtitle('Acceleration vs Displacement with color and shape axis', { position: 'top', align: 'left' })
        .mount(document.getElementById('chart-container'));
    
});