Using Data From Arrays or CSVs in Muze

Muze accepts instanceof DataModel as first class data source for all its visualization. DataModel automatically recognizes the most popular formats of data in web

  • FlatJSON
  • DSV String
  • 2D Array

We have already seen in a previous tutorial how to create a DataModel and render charts using a FlatJSON format.

Let us try the other types of data and see how we can use them to create charts. The process of creating visualization is no different from the one we have seen in the previous tutorial.

Delimiter Separated Values

We will take a CSV file (CSV is just a variation of DSV format where the delimiter is comma) for our example. We need to provide headers to the CSV, so that the schema can identify the variables from data.

Let's consider the following CSV data, which records the data of shifts in social media for teenagers in percentage of count:

Media,Year,percentage,
Youtube,2015,null,
Youtube,2018,85,
Instagram,2018,72,
Instagram,2015,52,
Snapchat,2018,69,
Snapchat,2015,41,
Facebook,2018,51,
Facebook,2015,71,
Twitter,2018,32,
Twitter,2015,33,
Tumblr,2018,9,
Tumblr,2015,14,
Reddit,2018,7,
Reddit,2015,null,
Vine,2015,24,
Vine,2018,null,
main
run-button
run-button
reset-button
// Defines the data for visualization in CSV format
const res = `Media,Year,value,
Youtube,2015,null,
Youtube,2018,85,
Instagram,2018,72,
Instagram,2015,52,
Snapchat,2018,69,
Snapchat,2015,41,
Facebook,2018,51,
Facebook,2015,71,
Twitter,2018,32,
Twitter,2015,33,
Tumblr,2018,9,
Tumblr,2015,14,
Reddit,2018,7,
Reddit,2015,null,
Vine,2015,24,
Vine,2018,null,`;

const env = muze(); /* Creates an environment to hold settings */
const canvas = env.canvas(); /* Asks for an instance of canvas from environment */
const DataModel = muze.DataModel;

const schema = [ /* Defines the schema so that DataModel recognizes the variables from data */
    { name: 'Media', type: 'dimension' },
    { name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y' },
    { name: 'value', type: 'measure' },
];

const dm = new DataModel(res, schema);
canvas
    .data(dm) /* pass the instance of DataModel */
    .width(600)
    .height(400)
    .config({ /* Configuration of viz */
        axes: {
            y:{
                name: 'Value in percentage', /* y axis name to be displayed. If not given, it shows the variable's name*/
                tickFormat:  val => `${val}%` /* Data has not been recorded with percentage marks, formatter format the ticks with the percentage mark */
            }
        }
    })
    .rows(['value']) /* Plots against y-axis */
    .columns(['Year'])  /* Plots against x-axis */
    .color({
        field: 'Media', /* Field using which the plots will be colored */
  		/* 
        	Assigns a custom palette for different values of Media field. If not provided it shows
            default system palette
        */
        range: ['red', 'orange', 'yellow', '#33b5e91', '#31a6ea', 'grey', 'red', 'green']
    })
    .layers([ /* Position one layer on top of another layer */
        { /* Draws a line layer (plot) */
            mark: 'line',
            connectNullData: true
        }, /* Draws a point / dot layer (plot) */
        { mark: 'point' }
    ])
    .title('Shifts of teenagers in social media usage')
    .mount('#chart-container');

You may notice the use of the layers method in the above code. We have used this method to create a line layer and a point layer using the same set of configurations, causing both the layers to get rendered with the same set of data. This is a very basic example of a composed layer. You can read more about it in composing Layers.

You will get to know about each and every methods and their need through out various phases of the documentation.

JavaScript 2D Array

Muze takes data in 2D Array format as well. The 2D array representation of the above data will be look like

[['Media','Year','value'],
['Youtube',2015,null],
['Youtube',2018,85],
['Instagram',2018,72],
['Instagram',2015,52],
['Snapchat',2018,69],
['Snapchat',2015,41],
['Facebook',2018,51],
['Facebook',2015,71],
['Twitter',2018,32],
['Twitter',2015,33],
['Tumblr',2018,9],
['Tumblr',2015,14],
['Reddit',2018,7],
['Reddit',2015,null],
['Vine',2015,24],
['Vine',2018,null]]

Wrapping Up

We saw how working with different data formats is a breeze in Muze with DataModel. Next, you can either want to learn how to use existing muze samples with your data or you can directly head to changing plot types