Connected scatter plot

A connected scatter plot, also known as a path graph or line-plot, is a type of data visualization that combines elements of both scatter plots and line graphs. Like a scatter plot, it displays individual data points as markers on a graph, where each point represents the intersection of two variables. However, unlike a traditional scatter plot where the points are not connected, in a connected scatter plot, the points are connected by lines in the order they appear.


  1. Individual Data Points: Each data point on the graph represents a specific observation or data pair.
  2. Connected Lines: The data points are connected by lines, typically in the order they occur in the data set, creating a continuous path across the graph.
  3. Two Variables: Like scatter plots, connected scatter plots visualize the relationship between two variables, one on each axis. These variables could be related in various ways, such as time series data or sequential data points.

Component data

Functional grouping: Text and data


Lorem lpsum - heading text

Toggle buttons

Lorem lpsum graph

Selected the data table to check the details of the data.

Control label

Usage best practices

  • Time-Series Data: Connected scatter plots are useful for visualizing time-series data, where each data point represents an observation at a specific time. For example, they can be used to track changes in stock prices over time or to visualize the trajectory of a moving object over a period of time.
  • Sequential Data: Connected scatter plots are also effective for visualizing sequential data points where the order of observations matters. For example, they can be used to show the progression of data points in an experiment or the sequential steps in a manufacturing process.
  • Trajectory Analysis: They are commonly used in fields such as geography and environmental science to visualize trajectories or movement patterns. For instance, connected scatter plots can be used to map the movement of animals or the path of a vehicle over time.
  • Process Monitoring: Connected scatter plots can be used in industrial settings to monitor and analyze processes where data points are collected sequentially. They can help identify trends, patterns, or anomalies in the process data.
  • Financial Analysis: In finance, connected scatter plots can be used to visualize the relationship between two financial variables over time, such as interest rates and inflation or GDP growth and unemployment rates.
  • Network Analysis: Connected scatter plots can also be used in network analysis to visualize the connectivity between nodes in a network. Each data point represents a node, and the lines represent the connections between them.


Ensure consistency in the styling of your scatter line graphs across different applications and platforms within the City of Calgary. This includes colors, fonts, line thickness, and point markers.

Clearly represent data points on the graph to make it easy for users to interpret and analyze the information presented.

Use appropriate scaling for both the x-axis and y-axis to accurately represent the data without distorting its meaning.

Consider adding interactive elements to provide additional information when users hover over data points.

Ensure that the scatter line graph is accessible to all users, including those living with disabilities. Ensure keyboard navigation is supported.


Avoid overcrowding the scatter line graph with too many data points, as it can make the graph cluttered and difficult to read.

Avoid inconsistent formatting or styling of the scatter line graph, as it can lead to confusion and make it harder for users to interpret the data.

Avoid using misleading scales or axes labels that may distort the interpretation of the data.

Avoid overly complex designs or unnecessary embellishments that may distract users from the main purpose of the scatter line graph, which is to visualize data effectively.

Avoid presenting the scatter line graph without providing proper context or explanation of the data being presented. Users should understand the significance of the data points and trends.