Parallel Categories Diagram in JavaScript

How to make parallel categories diagrams in JavaScript

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Basic Parallel Categories Diagram

The parallel categories diagram is a visualization of multi-dimensional categorical data sets. Each variable in the data set is represented by a column of rectangles, where each rectangle corresponds to a discrete value taken on by that variable. The relative heights of the rectangles reflect the relative frequency of occurrence of the corresponding value.

Combinations of category rectangles across dimensions are connected by ribbons, where the height of the ribbon corresponds to the relative frequency of occurrence of the combination of categories in the data set.

In this example, we visualize the hair color, eye color, and sex of a sample of 8 people. Hovering over a category rectangle displays a tooltip with the number of people with that single trait. Hovering over a ribbon in the diagram displays a tooltip with the number of people with a particular combination of the three traits connected by the ribbon.

The dimension labels can be dragged horizontally to reorder the dimensions and the category rectangles can be dragged vertically to reorder the categories within a dimension.

var trace1 = {
  type: 'parcats',
  dimensions: [
    {label: 'Hair',
     values: ['Black', 'Black', 'Black', 'Brown',
              'Brown', 'Brown', 'Red', 'Brown']},
    {label: 'Eye',
     values: ['Brown', 'Brown', 'Brown', 'Brown',
              'Brown', 'Blue', 'Blue', 'Blue']},
    {label: 'Sex',
     values: ['Female', 'Female', 'Female', 'Male',
              'Female', 'Male', 'Male', 'Male']}]
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);

Basic Parallel Categories Diagram with Counts

If the frequency of occurrence for each combination of attributes is known in advance, this can be specified using the counts property

var trace1 = {
  type: 'parcats',
  dimensions: [
    {label: 'Hair',
     values: ['Black', 'Brown', 'Brown', 'Brown', 'Red']},
    {label: 'Eye',
     values: ['Brown', 'Brown', 'Brown', 'Blue', 'Blue']},
    {label: 'Sex',
     values: ['Female', 'Male', 'Female', 'Male', 'Male']}],
  counts: [6, 10, 40, 23, 7]
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);

Mutli-Color Parallel Categories Diagram

The color of the ribbons can be specified with the line.color property. Similar to other trace types, this property may be set to an array of numbers, which are then mapped to colors according to the the colorscale specified in the line.colorscale property.

Here is an example of visualizing the survival rate of passengers in the titanic dataset, where the ribbons are colored based on survival outcome.

By setting the hoveron property to 'color' and the hoverinfo property to 'count+probability' the tooltips now display count and probability information for each color (outcome) per category.

By setting the arrangement property to 'freeform' it is now possible to drag categories horizontally to reorder dimensions as well as vertically to reorder categories within the dimension.

var gd = document.getElementById('myDiv');

d3.csv(
  "https://raw.githubusercontent.com/plotly/datasets/master/titanic.csv",
  function(titanicData) {
    var classDim = {
      values: titanicData.map(function(row) {return row['Pclass']}),
      categoryorder: 'category ascending',
      label: "Class"
    };

    var genderDim = {
      values: titanicData.map(function(row) {return row['Sex']}),
      label: "Gender"
    };

    var survivalDim = {
      values: titanicData.map(function(row) {return row['Survived']}),
      label: "Outcome",
      categoryarray: [0, 1],
      ticktext: ['perished', 'survived'],
    };

    var color = survivalDim.values;
    var colorscale = [[0, 'lightsteelblue'], [1, 'mediumseagreen']];

    // Build Traces
    var traces = [
      {type: 'parcats',
       dimensions: [classDim, genderDim, survivalDim],
       line: {color: color,
              colorscale: colorscale},
       hoveron: 'color',
       hoverinfo: 'count+probability',
       labelfont: {size: 14},
       arrangement: 'freeform'
      }
    ];

    var layout = {width: 600};

    // Make plot
    Plotly.newPlot('myDiv', traces, layout);
  });

Parallel Categories Linked Brushing

This example demonstrates how the plotly_selected and plotly_click events can be used to implement linked brushing between 3 categorical dimensions displayed with a parcats trace and 2 continuous dimensions displayed with a scatter trace.

This example also sets the line.shape property to hspline to cause the ribbons to curve between categories.

var gd = document.getElementById("myDiv");
var categoricalDimensionLabels = [
  'body-style',
  'drive-wheels',
  'fuel-type'
];

d3.csv(
  'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
  function(carsData) {
    // Preprocess Data
    var mpg = carsData.map(function(row) { return row['highway-mpg'] });
    var horsepower = carsData.map(function(row) { return row['horsepower'] });

    var categoricalDimensions = categoricalDimensionLabels.map(
      function(dimLabel) {
        // Extract column
        var values = carsData.map(function(row) {
          return row[dimLabel]
        });

        return {
          values: values,
          label: dimLabel
        };
      });

    // Colors
    var color = new Int8Array(carsData.length);
    var colorscale = [[0, 'gray'], [1, 'firebrick']];

    // Layout
    var layout = {
      width: 600,
      height: 800,
      xaxis: {title: {text: 'Horsepower'}},
      yaxis: {domain: [0.6, 1], title: {text: 'MPG'}},
      dragmode: 'lasso',
      hovermode: 'closest'
    };

    // Build Traces
    var traces = [
      {type: 'scatter',
       x: horsepower,
       y: mpg,
       marker: {color: 'gray'},
       mode: 'markers',
       selected: {'marker': {'color': 'firebrick'}},
       unselected: {'marker': {'opacity': 0.3}}
      },
      {type: 'parcats',
       domain: {y: [0, 0.4]},
       dimensions:categoricalDimensions,
       line: {
         colorscale: colorscale,
         cmin: 0,
         cmax: 1,
         color: color,
         shape: 'hspline'},
       labelfont: {size: 14}
      }
    ];

    // Make plot
    Plotly.newPlot('myDiv', traces, layout);

    // Update color on selection and click
    var update_color = function(points_data) {
      var new_color = new Int8Array(carsData.length);
      var selection = []
      for(var i = 0; i < points_data.points.length; i++) {
        new_color[points_data.points[i].pointNumber] = 1;
        selection.push(points_data.points[i].pointNumber);
      }

      // Update selected points in scatter plot
      Plotly.restyle('myDiv', {'selectedpoints': [selection]}, 0)

      // Update color of selected paths in parallel categories diagram
      Plotly.restyle('myDiv', {'line.color': [new_color]}, 1)
    };

    gd.on('plotly_selected', update_color);
    gd.on('plotly_click', update_color);
  });

Parallel Categories with Multi-Color Linked Brushing

This example extends the previous example to support brushing with multiple colors. The radio buttons above may be used to select the active color, and this color will be applied when points are selected in the scatter trace and when categories or ribbons are clicked in the parcats trace.

var gd = document.getElementById('myDiv');
var categoricalDimensionLabels = [
  'body-style',
  'drive-wheels',
  'fuel-type'
];

d3.csv(
  'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
  function(carsData) {
    // Preprocess Data
    var mpg = carsData.map(function(row) { return row['highway-mpg'] });
    var horsepower = carsData.map(function(row) { return row['horsepower'] });

    var categoricalDimensions = categoricalDimensionLabels.map(
      function(dimLabel) {
        // Extract column
        var values = carsData.map(function(row) {
          return row[dimLabel]
        });

        return {
          values: values,
          label: dimLabel
        };
      }
    );

    // Colors
    var color = new Int8Array(carsData.length);
    var colorscale = [[0, 'gray'], [0.33, 'gray'],
                      [0.33, 'firebrick'], [0.66, 'firebrick'],
                      [0.66, 'blue'], [1.0, 'blue']];

    // Layout
    var layout = {
      width: 600,
      height: 800,
      xaxis: {title: {text: 'Horsepower'}},
      yaxis: {domain: [0.6, 1], title: {text: 'MPG'}},
      dragmode: 'lasso',
      hovermode: 'closest'
    };

    // Build Traces
    var traces = [
      {type: 'scatter',
       x: horsepower,
       y: mpg,
       marker: {color: color,
                colorscale: colorscale,
                cmin: -0.5,
                cmax: 2.5,
                showscale: true,
                colorbar: {tickvals: [0, 1, 2],
                           ticktext: ['None', 'Red', 'Blue']}},
       mode: 'markers',
      },
      {type: 'parcats',
       domain: {y: [0, 0.4]},
       dimensions:categoricalDimensions,
       line: {
         colorscale: colorscale,
         cmin: -0.5,
         cmax: 2.5,
         color: color,
         shape: 'hspline'},
       labelfont: {size: 14}
      }
    ];

    // Make plot
    Plotly.newPlot('myDiv', traces, layout);

    // Update color on selection and click
    var update_color = function(points_data) {
      var new_color = color;
      var color_value = document.querySelector('input[name="rate"]:checked').value;
      console.log(color_value);
      var selection = []
      for(var i = 0; i < points_data.points.length; i++) {
        new_color[points_data.points[i].pointNumber] = color_value;
        selection.push(points_data.points[i].pointNumber);
      }

      // Update selected points in scatter plot
      Plotly.restyle'myDiv', {'marker.color': [new_color]}, 0)

      // Update color of selected paths in parallel categories diagram
      Plotly.restyle'myDiv',
                     {'line.color': [new_color]}, 1)
    };

    gd.on('plotly_selected', update_color);
    gd.on('plotly_click', update_color);
  });