Splom Chart

A chart showing correlation between various Measure of cars data.

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', 'Horsepower', 'Miles_per_Gallon'])
        .columns(['Miles_per_Gallon', 'Horsepower', 'Acceleration'])
        .data(rootData)
  		.minUnitHeight(100)
		.minUnitWidth(100)
  		.height(600)
        .width(600)
  		.detail(['Name']) // Show all the data point
  		.color('Cylinders') // Color the points using cylinders
        .title('SPLOM', { position: 'top', align: 'right', })
        .subtitle('Correlation matrix of all the measures', { position: 'top', align: 'right' })
        .mount(document.getElementById('chart-container'));
  
  });