Polar chart with angle, radius and color encoding

Polar chart where a dimension is assigned to an angle creating equal slices from a circle and a measure is assigned to the radius of each slice. This example shows simple Polar Chart built in HTML / JavaScript with source code that you can edit to see changes in visualization

main
run-button
run-button
reset-button
// Data is fetched from https://www.charts.com/static/car.json and assigned to the variable data.
// Schema is fetched from https://www.charts.com/static/car-schema.json and assigned to the variable schema.
// An element with id `chart-container` is available in the DOM to house the visualization
// Retrieves the DataModel from muze namespace. Muze recognizes DataModel as a first class source of data.
const DataModel = muze.DataModel;
const calculateVariable = DataModel.Operators.calculateVariable;

let rootData = new DataModel(data, schema);

let DMWithCount = calculateVariable({
    name: 'CountVehicle',
    type: 'measure',
    defAggFn: 'count',
    numberFormat: val => parseInt(val, 10)
}, ['Name', () => 1])(rootData);

let env = muze();
let canvas = env.canvas();
canvas = canvas
	.rows([])
    .columns([])
    .layers([{ 
        mark: 'arc',
        encoding: {
            radius : 'CountVehicle',
            angle: 'Maker'
        },
        innerRadius: 50
    }])
    .data(DMWithCount)
    .width(500)
    .height(400)
    .color('Cylinders') // Color the slices with cylinders
    .title('Polar chart with radius mapped to measure')
    .subtitle('Number of cars listed in dataset is represented as varying radius per maker per cylinder')
    .mount('#chart-container');

What is a Polar Chart?

Polar chart, as the name suggest, uses polar co-ordinate instead of cartesian coordinate. Hence, we cant use planer encoding like x, y, x0, y0, instead we use encoding which are relevant for polar co-ordinate system radius and angle. A polar chart might varying angle and radius if mapped to a measure or dimension.

Data

The above visualization is created from this data and this schema.

Steps to create a Polar Chart

Following are the steps we need to do to create the above visualization

  • Create an instance of DataModel from data and schema
  • Find out the car count per maker per cylinder as displayed on the above chart
  • Add color encoding using Cylinders
  • Draw a layer with mark arc
  • Add title and subtitle to canvas
  • Finally, mount the chart to the DOM.
logo

Leaving Rows and Columns blank

Since the type of chart is polar, there is no need of a grid layout , hence we mention the rows and columns with no data.

Create an instance of DataModel from data and schema

The execution environment has stored the data and schema in data and schema variable. DataModel is retrieved from muze namespace. Here we write the following code to create an instance of DataModel from Flat JSON data

const DataModel = muze.DataModel;
const rootData = new DataModel(data, schema); 

Read more about schema and DataModel here. Head here if you want to know Muze takes instance of DataModel to show a chart.

Calculate car count per maker per cylinder

In order to find out count of cars listed in dataset per maker per cylinder, we use calculateVariable operator which yields a variable that keeps track of the number of cars each maker has for a given criterial as:

let DMWithCount = calculateVariable({
    name: 'CountVehicle',
    type: 'measure',
    defAggFn: 'count',
    numberFormat: val => parseInt(val, 10)
}, ['Name', () => 1])(rootData);

When aggregation (groupBy) happens using Maker and Cylinder, CountVehicle field holds value for count of cars per measure per cylinder.

Add color encoding

As we can see in the above chart, the slices are colored by values of Cylinder. Hence we need to assign Cylinder field to retinal encoding channel.

canvas.color('Cylinder')

Draw a layer with mark arc

To draw a polar plot, we just need one layer which is arc. This layer, unlike other cartesian layers, does not support x, y planer encodings. Instead it supports radius, angle encoding to draw a polar plot. We assign Maker to angle encoding channel which enables each maker will get equal angle since Maker is a dimension. Thereafter we map the CountVehicle to radius encoding, the greater the number of vehicles a maker has, the radius for that slice will be larger.

.layers([{ 
    mark: 'arc',
    encoding: {
        radius : 'CountVehicle',
        angle: 'Maker'
    },
    innerRadius: 50
}])

Read more about layers here. Note that we already added Cylinders in color encoding channel.

Add title and subtitle to canvas

Add a title and subtitle to the canvas

canvas
    .title('Polar chart with radius mapped to measure')
    .subtitle('Number of cars listed in dataset is represented as varying radius per maker per cylinder')

Read more about title and subtitle here.

Mount the chart to the DOM

Finally attach the canvas instance to DOM which houses the visualization

canvas.mount('#chart-container');

An element with id chart-container is available in the DOM to house the visualization.