About SuperviselyEcosystemContact usSlack

ScatterChart

Introduction

ScatterChart is a widget in Supervisely used to display a scatter plot of numerical data. It can be used to visualize the relationship between two variables in a dataset, with each point on the plot representing a data point in the dataset. It is commonly used in data exploration and analysis tasks.

Function signature

x1 = list(range(10))
y1 = [random.randint(6, 15) for _ in range(10)]

x2 = list(range(30))
y2 = [random.randint(0, 30) for _ in range(30)]

scatter_chart = ScatterChart("My Scatter Chart")
scatter_chart.add_series("Data 1", x1, y1)
scatter_chart.add_series("Data 2", x2, y2)

or

size1 = 10
xy = np.random.normal(15, 6, (size1, 2)).tolist()
s1 = [{"x": x, "y": y} for x, y in xy]

size2 = 30
x2 = list(range(size2))
y2 = np.random.uniform(low=0, high=30, size=size2).tolist()
s2 = [{"x": x, "y": y} for x, y in zip(x2, y2)]

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    xaxis_type="numeric",
)

Parameters

title

Chart title

type: str

series

List of input data series

type: list

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
)

zoom

Enable zoom on

type: bool

scatter_chart_1 = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    zoom=True
)

scatter_chart_2 = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    zoom=False
)

markers_size

Set point markers size

type: int

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    markers_size=8,
)

data_labels

If True it will display Y value of data for each datapoint

type: bool

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    data_labels=True,
)

xaxis_type

Set type of divisions on X axis

type: Literal["numeric", "category", "datetime"]

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    xaxis_type="category",
)

xaxis_title

Set title for the X axis

type: str

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    xaxis_title="X axis",
)

yaxis_title

Set title for the Y axis

type: str

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    yaxis_title="Y axis",
)

yaxis_autorescale

Set autoscaling of the Y axis

type: bool

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    yaxis_autorescale=False,
)

height

Widget height

type: Union[int, str]

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    height=200,
)

decimalsInFloat

Set number of decimals in float values of Y axis

type: int

scatter_chart = ScatterChart(
    title="My Scatter Chart",
    series=[{"name": "Data 1", "data": s1}, {"name": "Data 2", "data": s2}],
    decimalsInFloat=4,
)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/charts and plots/007_scatter_chart/src/main.py

Import libraries

import os
import numpy as np
import supervisely as sly
from supervisely.app.widgets import Card, Container, Text, ScatterChart
from dotenv import load_dotenv

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Prepare series for chart

size1 = 10
xy = np.random.normal(15, 6, (size1, 2)).tolist()
s1 = [{"x": x, "y": y} for x, y in xy]

size2 = 30
x2 = list(range(size2))
y2 = np.random.uniform(low=0, high=30, size=size2).tolist()
s2 = [{"x": x, "y": y} for x, y in zip(x2, y2)]

Initialize ScatterChart widget

scatter_chart = ScatterChart(
    title="Max vs Denis",
    series=[{"name": "Max", "data": s1}, {"name": "Denis", "data": s2}],
    xaxis_type="numeric",
)

Create Text widget

text = Text("Try clicking on point!")

Create app layout

Prepare a layout for the app using Card widget with the content parameter and place the widget that we've just created in the Container widget.

layout = Container([scatter_chart, text])

card = Card(title="Scatter Chart", content=layout)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widgets from code

@scatter_chart.click
def on_click(datapoint: ScatterChart.ClickedDataPoint):
    print(f"Line: {datapoint.series_name}")
    print(f"x = {datapoint.x}")
    print(f"y = {datapoint.y}")
    text.set(f"x = {round(datapoint.x, 4)}, y = {round(datapoint.y, 4)}", "info")
    scatter_chart.add_points_to_serie("Max", [51, 52], [51, 52])
    scatter_chart.add_points_to_serie("Denis", 59, 40)
PreviousGridPlotNextTreemapChart

Last updated