Histogram | ArcGIS Maps SDK for JavaScript

Distribution of U.S. SAT scores.

What is a histogram?

Histograms are used to visualize the distribution of a single numeric field by grouping data into bins and displaying the frequency of data points within each bin. The x-axis represents the range of values divided into intervals (bins), while the y-axis represents the count or frequency of data points that fall within each bin.

Data configurations

This section demonstrates how different data configurations can be used to create various types of histograms.

With numeric field

Histogram with a numeric field groups data into bins based on the values of a numeric variable.

The above chart visualizes the distribution of SAT scores, with each bin representing a range of scores. The height of each bin reflects the count of students within that score range.

Set the numericField property to "SAT_Score_Average" to specify the numeric field.

Charts component


30 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: Histogram</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

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "fcf794778a4d486eb0ce863ab71d40db",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const histogramModel = await createModel({ layer: featureLayer, chartType: "histogram" });
30

31
      histogramModel.numericField = "SAT_Score_Average";
14 collapsed lines
32

33
      histogramModel.setAxisValueFormat(0, {
34
        type: "number",
35
        intlOptions: {
36
          style: "decimal",
37
          minimumFractionDigits: 0,
38
          maximumFractionDigits: 0,
39
        },
40
      });
41
      chartElement.model = histogramModel;
42
      chartElement.actionMode = "none";
43
    </script>
44
  </body>
45
</html>

Customization options

Transformation

There are two types of data transformations that can be applied to histograms:

Logarithmic: When the data has a positively skewed distribution and there are a few large values, a logarithmic transformation can be applied to the data to compress the scale and make it easier to visualize and analyze. Can only be applied to numbers greater than zero.
Square root: Similar to logarithmic transformation, a square root transformation can be applied to data with a skewed distribution. Can be applied to numbers greater than or equal to zero.

The income field in this dataset has a positively skewed distribution, which contains a few large values that can make it difficult to visualize the distribution of the data. By applying a logarithmic transformation to the income field, we can compress the scale of the data and make it easier to see the distribution of the values, especially for the smaller values.

Set the dataTransformationType property to "logarithmic" to apply a logarithmic transformation.

Charts component


31 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: Histogram with Transformation</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

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "c99e16e5573c47ab8c4536cb77673211",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const histogramModel = await createModel({ layer: featureLayer, chartType: "histogram" });
30
      histogramModel.numericField = "income_percap";
31

32
      histogramModel.dataTransformationType = "logarithmic";
7 collapsed lines
33

34
      histogramModel.titleText = "Histogram with logarithmic transformation";
35
      chartElement.model = histogramModel;
36
      chartElement.actionMode = "none";
37
    </script>
38
  </body>
39
</html>

Overlays

The following descriptive statistics can be calculated and displayed as overlay lines on the histogram:

Normal distribution : A bell-shaped curve used to compare data to a normal distribution pattern.
Mean: The average value of the data set, calculated by summing all values and dividing by the number of values.
Median: The middle value of the data set when it is ordered from least to greatest.
Standard deviation: Two vertical lines representing one standard deviation above and below the mean, indicating the spread of the data around the mean.

Set the showMeanOverlay, showMedianOverlay, showNormalDistOverlay and showStandardDevOverlay properties to true to display the overlays.
Set the normalDistSymbol property to customize the appearance of the normal distribution curve. Similar customizations can be made for the other overlays using the meanSymbol, medianSymbol and standardDevSymbol properties.

Charts component


31 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: Histogram with overlays</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

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "fcf794778a4d486eb0ce863ab71d40db",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const histogramModel = await createModel({ layer: featureLayer, chartType: "histogram" });
30
      histogramModel.numericField = "SAT_Score_Average";
31

32
      histogramModel.showMeanOverlay = true;
33
      histogramModel.showMedianOverlay = true;
34
      histogramModel.showNormalDistOverlay = true;
35
      histogramModel.showStandardDevOverlay = true;
36
      histogramModel.normalDistSymbol = {
37
        type: "esriSLS",
38
        style: "esriSLSDash",
39
        color: [255, 0, 0, 100],
40
        width: 4,
41
      };
14 collapsed lines
42

43
      histogramModel.setAxisValueFormat(0, {
44
        type: "number",
45
        intlOptions: {
46
          style: "decimal",
47
          minimumFractionDigits: 0,
48
          maximumFractionDigits: 0,
49
        },
50
      });
51
      chartElement.model = histogramModel;
52
      chartElement.actionMode = "none";
53
    </script>
54
  </body>
55
</html>

Bins

The default number of bins for a histogram is 32, this can be customized by using the binCount property.

Additionally, the binSymbol property allows you to control the appearance of the bins in the histogram.

Charts component


31 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: Histogram bins customization</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

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "fcf794778a4d486eb0ce863ab71d40db",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const histogramModel = await createModel({ layer: featureLayer, chartType: "histogram" });
30
      histogramModel.numericField = "SAT_Score_Average";
31

32
      histogramModel.binCount = 15;
33
      histogramModel.binSymbol = {
34
        style: "esriSFSForwardDiagonal",
35
        color: [210, 100, 110, 100],
36
      };
14 collapsed lines
37

38
      histogramModel.setAxisValueFormat(0, {
39
        type: "number",
40
        intlOptions: {
41
          style: "decimal",
42
          minimumFractionDigits: 0,
43
          maximumFractionDigits: 0,
44
        },
45
      });
46
      chartElement.model = histogramModel;
47
      chartElement.actionMode = "none";
48
    </script>
49
  </body>
50
</html>

Chart typesGauge Chart typesHeat chart