Data visualization

Data visualization is the process of visually representing data so the user can understand the data easier. We use the following data formats and chart types supported by the Strato design system for apps that present large amounts of data.

Chart anatomy

1. Value labels: Range of values representing a variable.
2. Chart tooltip: Displays additional information about the hovered data points. Allows additional actions when selected.
3. Interactive toolbar: Allows you to zoom, inspect, pan, or download chart data.
4. Interactive legend: Represents series in charts with a color/chart type indicator and name in an interactive legend.
5. Legend resize handle: Controls the proportion between the chart and the legend.
6. Axes: Represents the range of data values. We usualy label them with the variable name.
7. Crosshair and Magnifiers: A crosshair is a visual aid consisting of two lines intersecting at a point on the chart, usually where the mouse cursor is located. You can use a crosshair to find data points or outliers more precisely. Magnifiers connects to the axis and show precise values.
8. Axis Description: Axis descriptions provide context to the variables plotted on each axis.

Interactivity in charts

Chart Interactions enable additional possibilities for end users to interact with the data plotted within the chart area. The interactive options currently supported within the Timeseries charts are zoom in, zoom out, x-axis zoom and pan. To user these interactions, add the ChartInteractions subcomponent to the TimeseriesChart.

Data types

With Strato visualizations, you can visualize a variety of data types, such as:

• Time series data
  • Timestamp data
  • Timeframe data
• Categorical data
• Key Performance Indicators
• Tabular data

Time series data

Time series data consists of sequences of numeric values gathered over time measured at consistent time intervals (for example, every minute, hour, or day). Use TimeseriesCharts to visualize your time series data as lines, bars, or areas. However, you should select the right chart type based on the use case and the data provided.

We use time series data for changes in variables over time, such as:

• Weather data
• Stock prices
• Industry forecasts
• Performance over time

Time series data can consist of either a timestamp or a timeframe data (or both).

Timestamp data

Timestamp data is the simplest form of time series data. It correlates values with specific points in time. Timestamp data only consists of a data point with a start time and value. For example:

{
  start:new Date ("2022-10-01 06:00:00"),
  value:1500,
}

Timeframe data

Timeframe data includes two timestamps per data point: a start and an end. That's why the timestamp data always represents a duration. For example:

{
  start:new Date ("2022-10-01 06:00:00"),
  end: new Date ("2022-10-01 08:00:00"),
  value:1500,
}

Strato charts with time series data

Time series line chart

Time series area chart

Time series bar chart

Time series band chart

Categorical data

Categorical data represents qualitative or non-numeric variables. It aggregates information into groups with similar characteristics. This also includes time (for example, months, quarters, etc.) if set as a category.

We support nominal data in our charts with no inherent order or ranking. We can render categorical data in a categorical bar chart or a pie and donut chart.

We use the CategoricalBarChart to visualize the categorical data as bars and the PieChart to render data as a pie or a donut chart.

We use categorical data to compare aggregated data, such as:

• Browser usage
• Action count
• Active sessions
• Top 10 Hosts' CPU usage

Strato charts with categorical data

Categorical pie/donut chart

Categorical bar chart

Categorical bar chart variant: grouped bar chart

Categorical bar chart variant: stacked bar chart

Histogram

Treemap

Heatmap

KPI data

We use key performance indicators (KPIs) to track performance variables over time. These can be related to the performance of your website or application or the effectiveness of a company strategy. We use KPIs to monitor performance data, such as:

• Monthly recurring revenue
• User action duration
• Load actions

Single value chart

Meter bar and muli meter bar

Geospatial data

We use geospatial data to represent data on a map. The map consists of a base layer (the map itself), and one or more layers on top to visualize data. The layers include:

• Dot and bubble (also supports icons, emojis and shapes)
• Choropleth
• Connection

Dot and bubble layer

Choropleth layer

Connection layer

Annotations

Annotations standalone chart