Telemetry Data Visualization Application

TutorialUsing NodeJS to Create an F1 Telemetry Data Visualization Application

We’ll develop with NodeJS a racing car track data analysis chart

Hello!

A racing telemetry application can be built using the chart type XY and is possible to draw a racing circuit only with the given coordinates. This is a very helpful feature because it can be applied to many cases where coordinates and other values are provided, in this case, we need to work with the speed, throttle, and steering of the racing vehicle that will be visualized along the race track.

Both the data as well as the use case in this example originate from a real user of LightningChart JS: TestLogger. TestLogger produces a complete data management and analytics system for RC cars and is one of our satisfied long-time partners.

So, to begin with, this project can be downloaded, and you will be able to replace the values in each JSON file and construct your own racing analytics application.

Download the project to follow the tutorial

Racing Telemetry Project (.RAR)

Project overview

Briefly, this LightningChart JS example uses the LineSeries to dynamically color lines based on separate values contained in a dataset. The way how a racing telemetry application collects data is from real-time sensors connected to the vehicles also called data loggers. These data logger systems are used for vehicle in-race monitoring and data processing. These operations are usually led by racing engineers who must make real-time decisions.

Moreover, all these incoming data must be processed and visualized with the help of data visualization toolkits that display the data points in the chart. In other words, what you’ll create now.

Have a look at what you’ll create:

Configuring the Template

Please, download the template that is provided in this article.
You will see a file tree like this one:

File tree racing telmetry application tutorial

3. Please, open a new terminal.

4. As usual in a Node JS project, we will have to run our NPM Install command.

This would be everything for our initial setup.

Let’s code.

JSON files

In our demo-data-speed.json file we will see the following structure:

X: Value for the X axis.
Y: Value for the Y axis.
value: value for speed, throttle, or steering, found in each JSON file, respectively.

The same logic can be applied to demo-data-throttle.json and demo-data-steering.json

CHART.ts

Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.

Import JSON data files.
Declare the constant lcjs that will refer to our @arction/lcjs library.
Extract required classes from lcjs.

Extracting the required classes from the lcjs library

4. Now we will declare the following constants:

Declaring-constants-racing-telemetry-application

Const Chart: constant with the chart properties.
- ChartXY: Type of chart.
- setTitle: Initial title that will be displayed before the chart is updated.

Const axisX: This will always return a reference to the X Axisthat is closest to the chart (starting from the bottom). The user can safely destroy the default Axis (with dispose, as long as there are no series attached to it).

Const axisY: This will always return a reference to the Y-Axis closest to the chart (starting from the bottom). The user can safely destroy the default Axis (with dispose, as long as there are no series attached to it).

setTickStrategy: This property with [empty] value can hide the axis labels.

const dataSources: This JSON will contain the values and properties for each type of chart (speed, throttle, and steering).

Speed, throttle, and steering data values

Name: Name of the chart
File: import the object of each JSON file.
LUT: (Look Up Table) Style class for describing a table of colors with associated lookup values (numbers).

Instances of LUT, like all LCJS style classes, are immutable, meaning that its setters do not modify the actual object, but instead return a completely new modified object.

Properties of LUT:

steps: List of color steps (color + number value pair).
interpolate: true enables automatic linear interpolation between color steps. Read more about LUT here.
Format: Format for the displayed value.

displayDataSource:

The asynchronous method will return all data for the selected chart.

The chart will be specified by its name as a parameter(sourceName) when the method is called.

dataSource: you will find the JSON element from the JSON dataSources created in the previous step. It will use the sourceName parameter value to search the element by the name property. Also, the JSON content from the JSON data file will be stored in the data variable.

lineSeries: properties for the chart.
- setName: name of the series.
- Add: source data previously stored in the data variable.
- setStrokeStyle: LUT properties created in the data source JSON object.
- setCursorResultTableFormatter: Configure formatting of Cursor ResultTable when pointing at this series.

startValues: Using the [start] constant, we can specify where the “START” label can be located. The default value should be 0 if we want to start from the beginning of the race.

labelStart: UI properties for the “START” label.
setTitle: new title to be displayed after all code has been processed.

addLegendBox: A box controller will be created from the chart object. This will represent the data as a single bar, and will have the option to hide the entire chart:

Box controler feature for telemetry racing application

Dropdown selector:

At the top-right of the chart, we will see a little drop-down selector. This selector will let us select the chart we want to display. To create this dropdown, we just need to construct a single HTML object:

When you change the value of the selector, the [DisplayeDataSource] method will be executed and will create the new chart.

NPM Start

Finally, we just need to run on our terminal the command npm start and open the browser on the local host path specified in the terminal.

Conclusion

Once again, Lightning Charts allow us to dynamically represent our data, without requiring a great deal of time and effort.

As mentioned at the beginning of this article; the data is real, which allows idealizing the large number of applications that can be generated, having this template as a basis for experimentation.

Flight monitoring, automobile route monitoring, package monitoring, and moving objects (drones, projectiles, etc.), could be some common examples with which you could experiment.

If you have read our previous articles, you will be able to see in greater detail some of the properties shown here, but with settings that enrich the graph display.

If you got here, I really appreciate your support and keep reading about racing analytics and telemetry applications in motorsports.

Thanks, bye!