Box plot | ArcGIS Maps SDK for JavaScript

Distribution of life expectancy across different years and continents.

What is a box plot?

Box plots visualize the distribution of data and identify outliers. They provide a summary of a dataset by displaying its minimum, first quartile, median, third quartile, and maximum values. The box portion of the diagram illustrates the middle 50 percent of the data, while the whiskers extend to the minimum and maximum values within a specified range. Outliers are typically represented as individual points beyond the whiskers.

Data configurations

This section demonstrates how different data configurations can be used to create various types of box plots, including configurations with a single numeric field or multiple numeric fields, and the use of category and split by fields to further break down the data.

With one numeric field

Box plots with a single numeric field specified via the numericFields property displays the distribution of that numeric field using the median, quartiles, whiskers and optional outliers.

Along with a category field specified via the category property, boxs are created for each category, allowing comparison across groups.
Along with a split by field specified via the splitByField property, the chart is divided by a secondary grouping field, creating separate box plots for each unique split by value.
Along with both category and split by fields specified via the category and splitByField properties, grouped box plots are created for every category and split by combination, allowing detailed comparisons across multiple dimensions.

The above chart shows the distribution of life expectancy across different years and continents, with outliers displayed as individual points beyond the whiskers of the box plot.

Set the numericFields property to ["life_expectancy"] to define the numeric values used to calculate the distribution.
Set the category property to year_long to visualize how the distribution changes across different years.
Set the splitByField property to continent to further break down the distribution by continent within each year.
Set the showOutliers property to true to display outliers as individual points beyond the whiskers of the box plot.

Charts component


29 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Box plot with numeric field, category, and split-by</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17
  <body>
18
    <arcgis-chart></arcgis-chart>
19
    <script type="module">
20
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
21
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
22
      const featureLayer = new FeatureLayer({
23
        portalItem: {
24
          id: "c99e16e5573c47ab8c4536cb77673211",
25
        },
26
      });
27
      const chartElement = document.querySelector("arcgis-chart");
28
      const boxPlotModel = await createModel({ layer: featureLayer, chartType: "boxPlot" });
29

30
      boxPlotModel.numericFields = ["life_expectancy"];
31
      boxPlotModel.category = "year_long";
32
      boxPlotModel.splitByField = "continent";
33
      boxPlotModel.showOutliers = true;
9 collapsed lines
34

35
      boxPlotModel.legendPosition = "top";
36
      boxPlotModel.titleText = "Distribution of Life Expectancy by Year and Continent";
37
      boxPlotModel.setAxisTitleText("Year", 0);
38
      chartElement.model = boxPlotModel;
39
      chartElement.actionMode = "none";
40
    </script>
41
  </body>
42
</html>

With multiple numeric fields

Box plots with multiple numeric fields specified via the numericFields property displays the distribution of each numeric field using the median, quartiles, whiskers and optional outliers. A z-score standardization is applied by default, allowing numeric variables of different units to be comparable. To disable standardization, set the standardizeValues property to false.

Along with a category field specified via the category property, box plots are created for each category and numeric field combination, allowing for comparison of distributions across different groups and numeric variables.
Along with a split by field specified via the splitByField property, box plots are created for each split by value and numeric field combination, allowing for comparison of distributions across different groups and numeric variables.

The above chart shows the distribution of life expectancy and income across different continents, the values are standardized to allow comparison between the two numeric variables with different units.

Set the numericFields property to ["life_expectancy", "income_percap"] to define the numeric values used to calculate the distribution.
Set the category property to continent to visualize how the distribution changes across different continents.

Charts component


29 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Box plot with numeric fields and category</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17
  <body>
18
    <arcgis-chart></arcgis-chart>
19
    <script type="module">
20
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
21
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
22
      const featureLayer = new FeatureLayer({
23
        portalItem: {
24
          id: "c99e16e5573c47ab8c4536cb77673211",
25
        },
26
      });
27
      const chartElement = document.querySelector("arcgis-chart");
28
      const boxPlotModel = await createModel({ layer: featureLayer, chartType: "boxPlot" });
29

30
      boxPlotModel.numericFields = ["life_expectancy", "income_percap"];
31
      boxPlotModel.category = "continent";
9 collapsed lines
32

33
      boxPlotModel.legendPosition = "top";
34
      boxPlotModel.titleText = "Distribution of Life Expectancy and Income by Continent";
35
      boxPlotModel.setAxisTitleText("Continent", 0);
36
      chartElement.model = boxPlotModel;
37
      chartElement.actionMode = "none";
38
    </script>
39
  </body>
40
</html>

Customization options

Mean lines

When a split by field is used with the box plot, the display mode of the chart can be changed to show the mean lines by setting the showMeanLines property to true. This will create one box plot for each category or numeric field variable and use lines to show the mean for each unique value in the split by field.

The above chart shows the distribution of life expectancy across different years and continents, with mean lines displayed for each continent within each year.

Set the showMeanLines property to true to display mean lines for each continent within each year.
Use the meanLinesBoxColor property to set the color of the boxes that highlight the mean lines. In this example, the color is set to a semi-transparent red with RGBA value of [255, 0, 0, 100].

Charts component


32 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Box plot</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17
  <body>
18
    <arcgis-chart></arcgis-chart>
19
    <script type="module">
20
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
21
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
22
      const featureLayer = new FeatureLayer({
23
        portalItem: {
24
          id: "c99e16e5573c47ab8c4536cb77673211",
25
        },
26
      });
27
      const chartElement = document.querySelector("arcgis-chart");
28
      const boxPlotModel = await createModel({ layer: featureLayer, chartType: "boxPlot" });
29
      boxPlotModel.numericFields = ["life_expectancy"];
30
      boxPlotModel.category = "year_long";
31
      boxPlotModel.splitByField = "continent";
32

33
      boxPlotModel.showMeanLines = true;
34
      boxPlotModel.meanLinesBoxColor = [255, 0, 0, 100];
9 collapsed lines
35

36
      boxPlotModel.legendPosition = "top";
37
      boxPlotModel.titleText = "Distribution of Life Expectancy by Year and Continent";
38
      boxPlotModel.setAxisTitleText("Year", 0);
39
      chartElement.model = boxPlotModel;
40
      chartElement.actionMode = "none";
41
    </script>
42
  </body>
43
</html>

Chart typesBar chart Chart typesCombo bar line chart