Scatterplot | ArcGIS Maps SDK for JavaScript

Relationship between average U.S. SAT scores and earnings.

What is a scatterplot?

Scatterplots are used to display the relationship between two numeric variables. The x-axis typically represents one numeric variable, while the y-axis represents another numeric variable.

Data configurations

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

With numeric fields

With two numeric fields, one specified via the xAxisField property and the other specified via the yAxisField property, a basic scatterplot can visualize the relationship between these two variables. Each point on the chart represents a data record, with its position determined by the values of the x and y fields.

The above chart visualizes the relationship between average SAT scores and earnings, with each point representing a data record. The x-axis represents the average SAT scores, while the y-axis represents the corresponding earnings.

Set the xAxisField property to "SAT_Score_Average" and the yAxisField property to "Earnings", which are both integer fields.

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: Scatterplot</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 scatterplotModel = await createModel({ layer: featureLayer, chartType: "scatterplot" });
30

31
      scatterplotModel.xAxisField = "SAT_Score_Average";
32
      scatterplotModel.yAxisField = "Earnings";
6 collapsed lines
33

34
      chartElement.model = scatterplotModel;
35
      chartElement.actionMode = "none";
36
    </script>
37
  </body>
38
</html>

Bubble plot

Scatterplot can also be configured with a third numeric field, or commonly known as a bubble plot. Allowing you to to visualize the size of each point based on the values of the third field.

The above chart visualizes the relationship between average SAT scores and earnings, with the size of each point representing the tuition fee for each average SAT score. The x-axis represents the average SAT scores, while the y-axis represents the corresponding earnings.

Set the sizePolicy property to an object with type set to "sizeScale", scaleType set to "linear", field set to "TUITIONFEE", and specify the minSize and maxSize for the points.

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>Esri Developer Guide: Bubble 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

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 scatterplotModel = await createModel({ layer: featureLayer, chartType: "scatterplot" });
30
      scatterplotModel.xAxisField = "SAT_Score_Average";
31
      scatterplotModel.yAxisField = "Earnings";
32

33
      scatterplotModel.sizePolicy = {
34
        type: "sizeScale",
35
        scaleType: "linear",
36
        field: "TUITIONFEE",
37
        minSize: 5,
38
        maxSize: 20,
39
      };
6 collapsed lines
40

41
      chartElement.model = scatterplotModel;
42
      chartElement.actionMode = "none";
43
    </script>
44
  </body>
45
</html>

Customization options

Linear trend line

A regression equation is calculated and the associated linear trend line and R-squared value can be displayed on the scatterplot. The trend line models the linear relationship between the x and y fields, while the R-squared value indicates how well the trend line fits the data.

A sloping upward trend line indicates a positive correlation, meaning that as the x values increase, the y values also tend to increase.
A sloping downward trend line indicates a negative correlation, meaning that as the x values increase, the y values tend to decrease.

The above chart visualizes the relationship between average SAT scores and earnings, with a linear trend line indicating the upward correlation between the two variables. The R-squared value displayed in the legend indicates how well the trend line fits the data, with a value closer to 1 indicating a better fit.

Set the showLinearTrend property to true to display the linear trend line and R-squared value on the scatterplot.
Use the linearTrendSymbol property to customize the appearance of the linear trend line by providing a symbol object.

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>Esri Developer Guide: Scatterplot with linear trend</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 scatterplotModel = await createModel({ layer: featureLayer, chartType: "scatterplot" });
30
      scatterplotModel.xAxisField = "SAT_Score_Average";
31
      scatterplotModel.yAxisField = "Earnings";
32

33
      scatterplotModel.showLinearTrend = true;
34
      scatterplotModel.linearTrendSymbol = {
35
        type: "esriSLS",
36
        style: "esriSLSDashDotDot",
37
        color: [255, 0, 0, 100],
38
        width: 4,
39
      };
6 collapsed lines
40

41
      chartElement.model = scatterplotModel;
42
      chartElement.actionMode = "none";
43
    </script>
44
  </body>
45
</html>

Chart typesPie chart Techniques and best practicesStyling and theming