Use existing Muze Samples with your data

Through out the documentation pages and examples, we have used Muze to create visualizations to showcase the capabilities of the library. All of these visualizations are created using real data and thinking of real world use cases. You might find the need of using few of the visualizations just by copy pasting it to your project. This article explains the process of using a sample, change data source of a sample and integrate it to an existing project.

Sources

The main source of visualizations created by Muze is the example page. You can edit the samples directly in the website and change of output will be reflected instantly.

There are visualizations available scattered across the documentations as well. For demonstration purpose documentation also renders live visualization.

Here's the Stacked Bar Chart from the example page:

main
run-button
run-button
reset-button
// Data is fetch from https://www.charts.com/static/cars.json and is assigned to data variable.
// Schema is fetched from https://www.charts.com/static/cars-schema.json is assigned to schema variable.
  
// 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 a new variable which will keep count of cars per cylinder for a particular origin
const dmWithCount = rootData.calculateVariable(
  	{
        name: 'CountVehicle',
        type: 'measure',
        defAggFn: 'count', // When ever aggregation happens, it counts the number of elements in the bin
        numberFormat: val => parseInt(val, 10)
    },
    ['Name', () => 1]
);

// Create an environment for future rendering
let env = muze(); 
// Create an instance of canvas which houses the visualization
let canvas = env.canvas();

canvas
	.rows(['CountVehicle']) // CountVehicle goes in y axis
  	.columns(['Cylinders']) // Cylinders goes in x-axis
  	.color('Origin') // Colors encoding using the Origin field
    .data(dmWithCount)
  	.width(600)
  	.height(400)
	.title('Vehicle count by Cylinders by Origin')
	.subtitle('For year 1970 - 1982')
  	.mount('#chart-container'); // Set the chart mount point

Here is few point to note about the above visualization

  • We load the data and schema from an URL and save it in variables data and schema. You can't see the code because it is hidden from code section, thus data and schema appears to be a global variable.
  • The original data does not contain any information about vehicle count, calculateVariable function creates the field.
  • By default bar chart is rendered based on the variable type mapped to X and Y axis.
  • Reference to chart-container DOM element is available inside the code editor of documentation and examples pages only.

You can go ahead and start editing the code section and see the change in the chart above. You can make these changes to any of the code sections provided and the corresponding chart will visually change.

In the above example, We'll change the variable mapped to axes. Instead of vehicle count, we will see the same chart with the average Acceleration for every Cylinder by Origin

main
run-button
run-button
reset-button
// Data is fetch from https://www.charts.com/static/cars.json and is assigned to data variable.
// Schema is fetched from https://www.charts.com/static/cars-schema.json is assigned to schema variable.
  
// 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(); 
	// Create an instance of canvas which houses the visualization
let canvas = env.canvas();

canvas
	.rows(['Acceleration']) // Acceleration goes in y axis
  	.columns(['Cylinders']) // Cylinders goes in x axis
  	.color('Origin') // Colors encoding using the Origin field
    .data(rootData)
  	.width(600)
  	.height(400)
	.title('Acceleration by Cylinders by Origin')
	.subtitle('For year 1970 - 1982')
  	.mount('#chart-container'); // Set the chart mount point

Using samples with your data

You can get started with muze with your own data by simply copy pasting the code you see in example.

If you see the above examples carefully, we you will see we are not loading the data and schema anywhere but still the data and schema variables are available.

Internally for every sample we do load the data before the sample gets executed, its just not visible in the code section. We use a function named loadData which is available internally in the code editor only. The actual code which browsers run looks something like

Promise.all([loadData('/static/cars.json'), loadData('/static/cars-schema.json')]).then((res) => {
    const data = res[0];
    const schema = res[1];
   
    /* code from editor comes here */
});

Now it makes sense right?

However, if you are trying Muze with jsfiddle or jsbin like services, then you can use browser's fetch API to fetch data from server. An fetch equivalent code of the above sample would be

Promise.all([fetch('/static/cars.json'), fetch('/static/cars-schema.json')]).then((response) => {
    Promise.all(response.map(_ => _.json())).then((res) => {
        const data = res[0]
        const schema = res[1];

        /* code from editor comes here */
    });
});

You can simply copy paste muze specific code inside and get started with it. Take a look at this jsfiddle example.

logo

Change field mapping

If you are using an Muze sample using your own data, make sure that you change field encoding mapping of rows, columns, color, shape, size etc... accordingly based on the variables you have in your data.

Wrapping up

In this tutorial we have learnt how you can Muze samples with your own data. Getting your hand dirty with the code is the fastest and most robust way to learn anything. With this seed project and this jsfiddle template you can get started instantly.

If you want to read what more you can do using Muze, do checkout changing plot type tutorial.