DEV Community

Cover image for Creating a Box-and-Whisker Plot (JS)
andreykh for AnyChart

Posted on • Updated on • Originally published at anychart.com

Creating a Box-and-Whisker Plot (JS)

Transform your data into insights with a stunning box-and-whisker plot! Learn what it is and how to create one with ease using JavaScript. In this tutorial, I’ll walk you through the steps to make a neat and visually appealing JS-based (HTML5) box chart with the yearly gross salaries of different IT professions in Europe. Unlock the power of data visualization and start quickly identifying trends and patterns today!

What Is Box-and-Whisker Plot?

A box-and-whisker plot, or simply a box plot or a box chart, is a type of graphical representation commonly used in statistical analysis to display the distribution of a dataset. The plot consists of a rectangular box that spans the first quartile to the third quartile (also known as the interquartile range, or IQR), with a horizontal line inside representing the median.

In addition to the box, lines (called whiskers) can extend from the box, indicating variability outside the upper and lower quartiles. These whiskers can represent different things depending on the context, such as the maximum and minimum values within a specific range or a multiple of the standard deviation.

Outliers, which differ significantly from the rest of the dataset, may be plotted as individual points beyond the whiskers on the box plot. The presence of outliers can provide valuable insights into the distribution of the data and help identify potential errors or anomalies in the data.

Box-and-Whisker Plot to Be Built

To pique your interest in building a creative chart, let me give you a sneak peek at the final box-and-whisker plot that will be completed by the end of this tutorial.

Box-and-Whisker Plot

Doesn’t it look great? Keep reading to find out how to create it.

Basic Box-and-Whisker Plot

If you already have experience in creating charts with JavaScript, you should have a basic understanding of how it works. However, if you are a beginner, this box plot tutorial will guide you step-by-step. Let’s start with an overview of the steps involved:

  1. Create a webpage in HTML.
  2. Include necessary JavaScript files.
  3. Set the data.
  4. Add JavaScript code.

You can create a stunning basic box-and-whisker plot with just a few lines of code. Additionally, I will show you some interesting customizations to enhance the chart’s appearance. Let’s dive in!

1. Create a webpage in HTML

We will be working with JavaScript, so first of all, we need to use HTML to create a webpage to display our box chart.

We’ll start by setting the webpage’s title to “JavaScript Box-and-Whisker Plot.” Next, we’ll include a few lines of CSS code within the style tag to set the margin and padding to 0; and make the height and width of the webpage 100%. Doing that will ensure that the chart is displayed properly on the webpage.

Finally, we’ll add a div tag with the id “container”. We’ll use this div to hold the box plot later on.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Box-and-Whisker Plot</title>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. Include necessary JavaScript files

After completing the basic layout of our HTML webpage, the next step is to include the necessary JavaScript files. We need to include the link to the JavaScript charting library in the head section of our HTML webpage.

For this purpose, we will use AnyChart. We will need the Core and Basic Cartesian modules for our box-and-whisker chart.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Box-and-Whisker Plot</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-cartesian.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // All the code for the JS Box-and-Whisker Plot will come here
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. Set the data

We will be using data on yearly gross salaries for different professions in Europe, sourced from the IT Salary Survey for the EU region (2018-2020), available on Kaggle.

After cleaning the data to remove duplicates and incorrectly formatted or misleading data, I selected only professions with sufficient data and calculated their averages. I then chose the top 8 IT professions for our box-and-whisker visualization.

The data is represented as an array of objects, with each object representing a profession. The object properties display the profession name, first quartile, median, third quartile, minimum and maximum values, and outlier values.

var data = [
  {
    x: 'Backend Developer',
    low: 35000,
    q1: 60000,
    median: 70000,
    q3: 80000,
    high: 110000,
    outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]
  },
  {
    x: 'Data Engineer',
    low: 40000,
    q1: 54000,
    median: 68000,
    q3: 84000,
    high: 110000,
    outliers: [200000]
  },
  {
    x: 'DevOps',
    low: 52500,
    q1: 65000,
    median: 72000,
    q3: 82500,
    high: 105000,
    outliers: [30000, 37000, 124000, 140000]
  },
  {
    x: 'Engineering Manager',
    low: 78000,
    q1: 80000,
    median: 85000,
    q3: 95750,
    high: 105000
  },
  {
    x: 'ML Engineer',
    low: 11500,
    q1: 52500,
    median: 65000,
    q3: 81000,
    high: 120000,
    outliers: [180000]
  },
  {
    x: 'Mobile Developer',
    low: 40000,
    q1: 61250,
    median: 66000,
    q3: 77000,
    high: 85000,
    outliers: [240000]
  },
  {
    x: 'Product Manager',
    low: 30000,
    q1: 60000,
    median: 70000,
    q3: 85000,
    high: 120000,
    outliers: [150000]
  },
  {
    x: 'Software Engineer',
    low: 28800,
    q1: 60000,
    median: 72000,
    q3: 81000,
    high: 110000,
    outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
  }
];
Enter fullscreen mode Exit fullscreen mode

4. Add JavaScript code

Finally, let’s write some JavaScript code to get our chart up and running.

We will include the onDocumentReady() function of the charting library and enclose our code with it to ensure that the data is represented on the screen once the HTML webpage is fully loaded.

<script>
  anychart.onDocumentReady(function () {
    // The box chart's code will be written here.
  });
</script>
Enter fullscreen mode Exit fullscreen mode

First, we add our data from Step 3.

anychart.onDocumentReady(function () {
  var data = [
    {
      x: 'Backend Developer',
      low: 35000,
      q1: 60000,
      median: 70000,
      q3: 80000,
      high: 110000,
      outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]
    },
    {
      x: 'Data Engineer',
      low: 40000,
      q1: 54000,
      median: 68000,
      q3: 84000,
      high: 110000,
      outliers: [200000]
    },
    {
      x: 'DevOps',
      low: 52500,
      q1: 65000,
      median: 72000,
      q3: 82500,
      high: 105000,
      outliers: [30000, 37000, 124000, 140000]
    },
    {
      x: 'Engineering Manager',
      low: 78000,
      q1: 80000,
      median: 85000,
      q3: 95750,
      high: 105000
    },
    {
      x: 'ML Engineer',
      low: 11500,
      q1: 52500,
      median: 65000,
      q3: 81000,
      high: 120000,
      outliers: [180000]
    },
    {
      x: 'Mobile Developer',
      low: 40000,
      q1: 61250,
      median: 66000,
      q3: 77000,
      high: 85000,
      outliers: [240000]
    },
    {
      x: 'Product Manager',
      low: 30000,
      q1: 60000,
      median: 70000,
      q3: 85000,
      high: 120000,
      outliers: [150000]
    },
    {
      x: 'Software Engineer',
      low: 28800,
      q1: 60000,
      median: 72000,
      q3: 81000,
      high: 110000,
      outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
    }
];
Enter fullscreen mode Exit fullscreen mode

Next, we create our box-and-whisker plot specifying the chart type as the “box”. We create a box series and pass our data into it.

var chart = anychart.box()
var series = chart.box(data);
Enter fullscreen mode Exit fullscreen mode

After that, we add the chart title and set the container referencing the div element we had given an id of “container” in Step 1.

chart.title('Yearly Gross Salary for Different IT Professions in Europe');
chart.container('container');
Enter fullscreen mode Exit fullscreen mode

Finally, we draw the chart using the draw() function.

chart.draw();
Enter fullscreen mode Exit fullscreen mode

This is what the basic interactive JS box-and-whisker plot looks like! The complete code of the HTML webpage is provided below. You can also find the interactive version of this chart on AnyChart Playground.

A basic interactive JS box-and-whisker plot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Box-and-Whisker Plot</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-cartesian.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        var data = [
          {
            x: 'Backend Developer',
            low: 35000,
            q1: 60000,
            median: 70000,
            q3: 80000,
            high: 110000,
            outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]
          },
          {
            x: 'Data Engineer',
            low: 40000,
            q1: 54000,
            median: 68000,
            q3: 84000,
            high: 110000,
            outliers: [200000]
          },
          {
            x: 'DevOps',
            low: 52500,
            q1: 65000,
            median: 72000,
            q3: 82500,
            high: 105000,
            outliers: [30000, 37000, 124000, 140000]
          },
          {
            x: 'Engineering Manager',
            low: 78000,
            q1: 80000,
            median: 85000,
            q3: 95750,
            high: 105000
          },
          {
            x: 'ML Engineer',
            low: 11500,
            q1: 52500,
            median: 65000,
            q3: 81000,
            high: 120000,
            outliers: [180000]
          },
          {
            x: 'Mobile Developer',
            low: 40000,
            q1: 61250,
            median: 66000,
            q3: 77000,
            high: 85000,
            outliers: [240000]
          },
          {
            x: 'Product Manager',
            low: 30000,
            q1: 60000,
            median: 70000,
            q3: 85000,
            high: 120000,
            outliers: [150000]
          },
          {
            x: 'Software Engineer',
            low: 28800,
            q1: 60000,
            median: 72000,
            q3: 81000,
            high: 110000,
            outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
          }
        ];
        // create a chart
        var chart = anychart.box();
        // create a box series and set the data
        var series = chart.box(data);
        // set the chart title
        chart.title('Yearly Gross Salary for Different IT professions in Europe');
        // set the container id
        chart.container('container');
        // draw the chart
        chart.draw();
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Advanced Box-and-Whisker Plot

Even though we have built a nice basic box-and-whisker plot with JavaScript, we can go farther and apply customizations to make our chart look even more interesting. So let’s dive into some of the options available!

  • Adding axis labels
  • Customizing colors
  • Improving the tooltip
  • Rotating the plot

FOR A WALKTHROUGH OF THESE JS BOX-AND-WHISKER PLOT CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.

Top comments (0)