ScatterTile Documentation

Overview

The ScatterTile component is designed for visualizing the correlation between two sets of numerical data in the form of a scatter plot. It is built using the charting engine and provides an interactive interface for users to quickly identify trends, clusters, or outliers in the data. The component allows customization through various props, making it adaptable to different data visualization needs.

Settings

The ScatterTile accepts several configuration settings that define its appearance and behavior:

1. Height

• Input Type: Numeric
• Description: Specifies the height of the ScatterTile in pixels. Changing this value affects the vertical size of the tile in the dashboard.
• Default Value: Not explicitly set; therefore, it inherits from its parent container.

2. Width

• Input Type: Numeric
• Description: Defines the width of the ScatterTile in pixels. Adjusting this value alters the horizontal size of the tile.
• Default Value: Not explicitly set; therefore, it inherits from its parent container.

3. Data

• Input Type: Array of Objects
• Description: Input data for the scatter plot, which should be an array of objects where each object represents a point in the scatter plot. Each object must include properties defined by the xKey and yKey settings.
• Default Value: An empty array [].

4. XKey

• Input Type: String
• Description: The property name in the data objects that corresponds to the x-axis values. Changing this affects which data set is plotted on the x-axis.
• Default Value: 'x'.

5. YKey

• Input Type: String
• Description: The property name in the data objects that corresponds to the y-axis values. Changing this affects which data set is plotted on the y-axis.
• Default Value: 'y'.

6. Series

• Input Type: Array of Objects
• Description: Defines different series to be plotted within the scatter plot, where each series can have a specific label and color. It allows users to group data points and display them distinctly.
• Default Value: An empty array [].

7. Title

• Input Type: String
• Description: The title of the ScatterTile displayed prominently at the top of the tile. This aids in contextualizing the data visualized. Changing this affects the header of the ScatterTile.
• Default Value: Not explicitly set; no title will appear if not defined.

8. Subtitle

• Input Type: String
• Description: A secondary text under the title that provides supplementary information about the data or context. This enhances user understanding of the visualization.
• Default Value: Not explicitly set; no subtitle will appear if not defined.

9. FooterText

• Input Type: String
• Description: Text displayed at the bottom of the tile to provide additional insights or commentary on the data.
• Default Value: Not explicitly set; no footer text will appear if not defined.

10. FooterColor

• Input Type: String (color)
• Description: Sets the color of the footer text. This allows customization of the visual styling of the tile and ensures it adheres to branding requirements.
• Default Value: Not explicitly set; defaults to the standard text color.

How It Works

The ScatterTile operates by assembling the provided configuration options and rendering them inside a responsive container using a scatter chart. The data points are plotted on the X and Y axes based on the specified keys. The chart is responsive, ensuring that it adapts to the size of its container while maintaining visual clarity. Additionally, tooltip functionality provides users with hover information about individual data points, enhancing the interactive experience.

Data Expectations

The data passed to the ScatterTile should consist of an array of objects where each object contains at least the properties defined by xKey and yKey. For example:

[
    {"x": 10, "y": 20},
    {"x": 30, "y": 40},
    {"x": 50, "y": 60}
]

If defined, the series will expect an array of objects with relevant label and optional color properties:

[
    {"label": "Series 1", "color": "#ff0000"},
    {"label": "Series 2", "color": "#00ff00"}
]

Use Cases & Examples

Use Cases

1. Sales Performance Analysis: A company may want to visualize the relationship between sales revenue (y-axis) and marketing spend (x-axis) to identify the effectiveness of their marketing strategies.

2. Customer Segmentation: A business can utilize the ScatterTile to visualize customer demographics (age vs. income) to identify clusters of potential customer segments for targeted marketing.

3. Product Development: Engineers can plot product feature scores against user satisfaction ratings to evaluate which features drive better customer experiences.

Example Configuration

Use Case: Sales Performance Analysis

For this case, we want to display a scatter plot that visualizes marketing spend versus revenue. The following configuration can be set for the ScatterTile:

{
    "config": {
        "height": 400,
        "width": 600,
        "data": [
            {"x": 5000, "y": 20000},
            {"x": 15000, "y": 60000},
            {"x": 8000, "y": 30000},
            {"x": 20000, "y": 90000}
        ],
        "xKey": "x",
        "yKey": "y",
        "series": [
            {"label": "Q1", "color": "#ff0000"},
            {"label": "Q2", "color": "#00ff00"}
        ]
    },
    "title": "Sales Performance Overview",
    "subtitle": "Marketing Spend vs Revenue",
    "footerText": "Data sourced from internal analytics",
    "footerColor": "#888888"
}

In this example, the scatter plot will clearly depict data points correlating marketing spend to revenue for various quarters, helping stakeholders analyze performance trends effectively.