Scatter charts¶

Scatter charts represent data points as dots or other symbols. They are useful to see relationships between groups of data points.

In order to create scatter charts with Taipy, you need to set the mode[] property for your trace to "markers".

Key properties¶

Name	Value	Notes
type	`scatter`	Default value
mode	`markers`
x	x values
y	y values
marker	dictionary	`size` can be set to an integer value. `color` can be set to a color name or value. `symbol` can be set to a predefined symbol name (see Symbol names for details). `opacity` can be set to an opacity value (between 0 and 1).
layout	dictionary	Global layout settings.

Examples¶

Classification¶

You can download the entire source code used in this section from the GitHub repository.

Using a scatter chart to represent the result of the classification of samples is really relevant: you can use different colors to represent different classes that data points belong to.

Here is an example where we have two series of samples, based on the same x axis: samples are stored in one series or the other depending on a classification algorithm. The result is three numerical arrays:

The values on the x axis.
The y values for the samples that belong to the class 'A'. The value is set to Nan if it does not belong to class 'A'.
The y values for the samples that belong to the class 'B'. The value is set to Nan if it does not belong to class 'B'.

x_range = [ 0.64,  1.05, ...1000 values..., -0.7, -1.2]
a_values = [ nan, nan, 1.04, -1.01, ...1000 values..., 1.6, 1.45, nan ]
b_values = [ -2.1, -0.99, nan, nan, ...1000 values..., nan, nan, 2.12]
data = pd.DataFrame({
  "x" : x_range,
  "Class A" : a_values,
  "Class B" : b_values
})

The chart definition looks like this:

Definition

MarkdownHTMLPython

<|{data}|chart|mode=markers|x=x|y[1]=Class A|y[2]=Class B|>

<taipy:chart mode="markers" x="x" y[1]="Class A" y[2]="Class B">{data}</taipy:chart>

import taipy.gui.builder as tgb
...
tgb.chart("{data}", mode="markers", x="x", y__1="Class A", y__2="Class B")

Note how the mode property is set to "markers".

The resulting chart is:

Customizing a scatter chart¶

You can download the entire source code used in this section from the GitHub repository.

A common problem with scatter charts is that individual markers can be displayed on top of each other. This may result in markers being hidden by others, and the display may not reflect the density of markers. This is why it is usually not a good idea to use scatter charts where markers are completely opaque.

It is easy to customize the markers representation using the marker indexed property. This property expects a dictionary that indicates how markers should be represented. The structure of this dictionary and available values are listed in the Plotly scatter documentation page.

Here is how we can change the size and shape of the markers that are used in our previous example (with fewer data points). We need to create two dictionaries that hold the values we want to impact:

marker_A = {
    "symbol": "circle-open",
    "size": 16
}
marker_B = {
  "symbol": "triangle-up-dot",
  "size": 20,
  "opacity": 0.7
}

We are requesting that the markers have different shape to represent different data sets, and the markers for the B data set are slightly bigger.

To have Taipy use those styles, we must modify the chart definition:

Definition

MarkdownHTMLPython

<|{data}|chart|mode=markers|x=x|y[1]=Class A|marker[1]={marker_A}|y[2]=Class B|marker[2]={marker_B}|>

<taipy:chart mode="markers" x="x" y[1]="Class A" marker[1]="{marker_A}" y[2]="Class B" marker[2]="{marker_B}">{data}</taipy:chart>

import taipy.gui.builder as tgb
...
tgb.chart("{data}", mode="markers", x="x", y__1="Class A", marker__1="{marker_A}", y__2="Class B", marker__2="{marker_B}")

That generates the following chart:

Customizing individual data points¶

You can download the entire source code used in this section from the GitHub repository.

Changing the style of markers can also be set for each individual data point.

Consider the following array of three data sets:

data = [
    { "x": [1, 2, 3, 4], "y": [10, 11, 12, 13] },
    { "x": [1, 2, 3, 4], "y": [11, 12, 13, 14] },
    { "x": [1, 2, 3, 4], "y": [12, 13, 14, 15] }
]

We can create an array of marker dictionaries, on for every trace, where we indicate how data points will be represented:

markers = [
    # First data set is represented by increasingly large
    # disks, getting more and more opaque
    {
        "color": "red",
        "size": [12, 22, 32, 42],
        "opacity": [0.2, 0.5, 0.7, 1]
    },
    # Second data set is represented with a different symbol
    # for each data point
    {
        "color": "blue",
        "size": 18,
        "symbol": ["circle", "square", "diamond", "cross"]
    },
    # Third data set is represented with green disks surrounded
    # by a red circle that becomes thicker and thicker
    {
        "color": "green",
        "size": 20,
        "line": {
            "color": "red",
            "width": [2, 4, 6, 8]
        }
    }
]

We can further customize the whole chart be creating a layout dictionary and use it in our chart:

layout = {
    # Hide the chart legend
    "showlegend": False,
    # Remove all ticks from the x axis
    "xaxis": {
        "showticklabels": False
    },
    # Remove all ticks from the y axis
    "yaxis": {
        "showticklabels": False
    }
}

The chart definition can now use this array as the value for the indexed property marker: each item applies to consecutive traces.
We also set the layout property to apply the global layout settings:

Definition

MarkdownHTMLPython

<|{data}|chart|mode=markers|marker={markers}|layout={layout}|>

<taipy:chart mode="markers" marker="{markers}" layout="{layout}">{data}</taipy:chart>

import taipy.gui.builder as tgb
...
tgb.chart("{data}", mode="markers", marker="{markers}", layout="{layout}")

The resulting chart displays as:

Regression¶

You can download the entire source code used in this section from the GitHub repository.

Regression is an excellent use case for using scatter charts: on top of samples data points, you can trace the plot of a function that best fits the data points.

Here is an example of linear regression, where we can use a line plot on top of markers. The chart will represent an array of two Data Frames: one for the original data points and one for the computed regression line.

Here is the code that defines the source data for the chart:

data = [
  {
    "x": [ 0.13, -0.49, ..., 1.89, -0.97 ],
    "y": [ 22.23, -51.77, ..., 135.76, -77.33 ]
  },
  {
    "x": [ -3.53,  2.95 ],
    "Regression": [ -237.48, 200 ]
  }
  ]

The values x and Regression could be computed, for example, using the LinearRegression class from the scikit-learn package.

The chart definition uses the two data sets and their columns:

Definition

MarkdownHTMLPython

<|{data}|chart|mode[1]=markers|x[1]=0/x|y[1]=0/y|mode[2]=line|x[2]=1/x|y[2]=1/Regression|>

<taipy:chart mode[1]="markers" x[1]="0/x" y[1]="0/y" mode[2]="line" x[2]="1/x" y[2]="1/Regression">{data}</taipy:chart>

import taipy.gui.builder as tgb
...
tgb.chart("{data}", mode__1="markers", x__1="0/x", y__1="0/y", mode__2="line", x__2="1/x", y__2="1/Regression")

See how, using the mode[], x[], and y[] properties, the two plots are defined.
Also note how the data sets are referenced: x[1] being set to 0/x indicates that the x values for the first trace should be retrieved from the column called x in the first element of the data array (0 indicating the first array element).

The chart representing the linear regression result is the following: