Scatter Shape legend

Scatter chart showing shape legend of Acceleration VS Horsepower

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);
	
  	// Slice data from the original array. Take rows which has makers from the following list.
    const makers = ['bmw', 'ford', 'toyota', 'amc'];
    rootData = rootData.select(fields => makers.indexOf(fields.Maker.value) > -1);
	
  	// Create an environment for future rendering
  	let env = muze();
	
	// Create an instance of canvas which houses the visualization
	canvas = env.canvas();
    canvas = canvas
      .rows(['Acceleration']) // Acceleration goes in Y-Axis
      .columns(['Horsepower']) // Horsepower goes in Y-Axis
      .color('Origin') // Color the points from using Origin
      .shape('Maker') // Use maker for shape encoding
      .detail(['Name']) // Use Name to add granurality of the points
      .data(rootData)
      .width(650)
      .height(550)
      .title('Scatter with shape and color legend', { position: 'top', align: 'left' })
      .subtitle('Acceleration vs Horsepower', { position: 'top', align: 'left' })
      .mount(document.getElementById('chart-container'));
});