Interactive small multiples with dumbbell charts

In the previous articles, I covered why you need to start using Dumbbell charts and small-multiples (with boxplot jitter scatter).
In this article, I will show you why and how to use small multiples with dumbbell charts to create effective charts.

Let’s get started.

The challenge is to visualize and compare the men’s and women’s resting heart rates from ages 18 to 55 (see table below). As you can see, any reader will experience challenges to easily interpret insights from the tables below.

Men resting heart rate 💙

Women resting heart rate ❤️

The first step is to identify the nature of the data and the objective. The data on both axes are categorical data (ordinal data):

• On the x-axis, there are seven categories ranging from athlete to poor physical condition.
• On the y-axis, there are four categories of age groups:
  • 18 – 25
  • 26 – 35
  • 36 – 45
  • 46 – 55

The main objective is to compare the difference between men and women, using age and the lowest/highest heart rate measurements. I can create a chart with the entire men and women datasets; however, the result would be a crowded chart and difficult to gain insights. To solve this issue, a small multiple is a good option.

The question now is which chart to use? There are many chart types to compare categorical data visually, such as bars, columns, radial, and dumbbell. I choose to use the dumbbell chart type as it offers the capability to visualize many points on the same line that make the chart compact; keep in mind that space is a challenge to reckon with when using small multiples.

All I have to do now is to structure the data and feed it to the chart (see example below)

let data = [
  { name: "Athlete", low: 54, high: 60 },
  { name: "Excel ‘t", low: 61, high: 65 },
  { name: "Good", low: 66, high: 69 },
  { name: "AboveAv", low: 70, high: 73 },
  { name: "Average", low: 74, high: 78 },
  { name: "BelowAv", low: 79, high: 84 },
  { name: "Poor", low: 85, high: 85 }
];
Highcharts.chart("containerW1825", {
  chart: {
    type: "dumbbell"
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  title: {
    text: "Age 18-25"
  },
  xAxis: {
    type: "category"
  },
  yAxis: {
    title: {
      text: "Resting Heart Rate"
    },
    min: 40
  },
  series: [
    {
      name: "Resting Heart Rate",
      data: data,
      lowColor: "#008000",
      marker: {
        fillColor: "#800000" //highColor
      }
    }
  ]
});

Once all the charts are created, I gather them by gender (see charts below):
 

Men resting heart rate from 18 to 55

Women resting heart rate from 18 to 55

 
The reader can easily read and understand the dumbbell chart, and thanks to the structure of the small multiple, the reader will focus on one chart at a time with little effort to see patterns and compare data.

Let me know your thoughts about your favorite chart type you use with the small multiples, and feel free to share your experience in the comment section below.