LightningChart JSJavaScript Charts in R: data analysis and visualization in R with LightningChart JS

TutorialLearn how to use high-performance JavaSscript charts in R for data analysis

Written by a human | Updated on April 14th, 2025

JavaScript Charts in R

In this article, we will do an exciting exercise in R to analyze a dataset for descriptive statistics and visualize the data trend using the LC4R package. For this example, we will learn how to install the LC4R package in the R studio IDE, the packages we will need for data analysis, and ultimately, how to create interactive charts in R.

Project Overview

This project will be a simple yet great exercise for those familiar with R. We will review descriptive statistics of real crime-related data and visualize variables using JavaScript charts in R. Before jumping to the code, you’ll learn how to set up your working environment, we’ll review the dataset, perform data analysis, and visualize the dataset using LightningChart JavaScript charts.

Here’s an image of the visualization you’ll create, which by the way, it is completely interactive unlike other (but more common) plotting packages, e.g., ggplot2.

zip icon
Download the project to follow the tutorial

Local Setup

Depending on your settings, you might need to install the Rtools42. We will use the Rtools for installing the “lc4r” package as the package comes from a source. So, go ahead and install the Rtools42 installer.exe file. We’ll now install the devtools package:

install.packages("devtools")
install.packages("htmltools") # Latest version needed for LC JS R
install.packages("rlang") # Latest version needed for LC JS R
install.packages("vctrs") # Latest version needed for LC JS R
install.packages("cli") # Latest version needed for LC JS R

To install the LightningChart JS package, you’ll run the following command using devtools and forcing the installation = TRUE.

devtools::install_github("Arction/lc4r", force = T)

Finally, call the library by running:

library(lc4r)

For computing skewness and kurtosis, you’ll need to install and load the “moments” package. You can do so by running the following commands:

install.packages("moments")
library(moments)

This would be everything for our initial setup. Let’s code.

Dataset

The dataset we’ll use for exploratory data analysis (EDA), will be “Arrest Data – Reported Number of Arrests by Crime” that you can find and download from Kaggle. You’ll also find the .CSV file within the project file.

1. Setup the working directory

Make sure that you add the dataset file within the desired folder, that is, keep all your project files within the same folder. Then, set up your working directory to the desired folder with CTRL + SHIFT + H, or:

javascript-charts-in-r-working-directory

2. Loading the file

To load the dataset, you’ll need to run the following command line:

arrests_national <- read.csv("arrests_national.csv", 
                        header = T,
                        sep = ",")

Here, we’re assigning the dataset file to the data frame “arrests_national” using the function “read.csv”. Header = T specifies that the first row of the dataset contains column names.

As for sep = “,”, we’re just specifying the type of separator within the data, (if you get a data frame with only 1 variable, change the separator to “;”).

Data Structure and Characteristics

Run:

str(arrests_national)

This gives you an overview of the dataset which contains 22 observations and 34 variables. All variables are of type integer. The first four variables are as follows:

  • ID: id of the observation
  • Year: crime year recorded starting from 1995 to 2016
  • Population: population year recorded
  • Total_arrests: total number of arrests

The remaining variables are the type of arrest, e.g., “homicide” or “robbery”.

javascript-charts-in-r-dataset-variables

2. Checking for missing values

To check if there are any missing values within the dataset, run:

any(is.na(arrests_national))

The output is FALSE meaning that there are not missing values but, why do we check for missing values?

Checking and/or removing missing values is an essential part of data preprocessing and helps statistical analysis to be more accurate and remove any chance of biases.

Exploratory Data Analysis with LightningChart

Now that we are assured our dataset has only complete cases (no missing values), we can perform a basic statistical analysis of just a sample (3) of variables for the purpose of keeping this article short but informative.

So, for this example, we’ll get the analysis of Robbery, Burglary, and Fraud. We’ll calculate maximum, minimum, median, skewness, and kurtosis values. Here’s the code:

## Variable 1

Robbery_Max = max(arrests_national$robbery)
Robbery_Min = min(arrests_national$robbery)
Robbery_Median = median(arrests_national$robbery)
Robbery_Mean = mean(arrests_national$robbery)
Robbery_Skewness = skewness(arrests_national$robbery)
Robbery_Kurtosis = kurtosis(arrests_national$robbery)

## Variable 2
Burglary_Max = max(arrests_national$burglary)
Burglary_Min = min(arrests_national$burglary)
Burglary_Median = median(arrests_national$burglary)
Burglary_Mean = mean(arrests_national$burglary)
Burglary_Skewness = skewness(arrests_national$burglary)
Burglary_Kurtosis = kurtosis(arrests_national$burglary)

## Variable 3
Fraud_Max = max(arrests_national$fraud)
Fraud_Min = min(arrests_national$fraud)
Fraud_Median = median(arrests_national$fraud)
Fraud_Mean = mean(arrests_national$fraud)
Fraud_Skewness = skewness(arrests_national$fraud)
Fraud_Kurtosis = kurtosis(arrests_national$fraud)

The statistical values are as follows:

Variable
Max
Mean
Median
Mean
Skewness
Kurtosis
Variable
Robbery
Max
17,1870
Min
94,403
Median
108,921
Mean
11,6045.1
Skewness
1.350487
Kurtosis
4.595376
Variable
Burglary
Max
386,500
Min
207,325
Median
295,372.5
Mean
294,936.1
Skewness
-0.0257203
Kurtosis
3.393699
Variable
Fraud
Max
465,000
Mean
128,531
Median
281,815.5
Mean
273,572.3
Skewness
0.1379744
Kurtosis
1.839288

Briefly, we can comment on each value for each variable. For Robbery,

  • The maximum value is 465,000.
  • The minimum value is 94,403.
  • The median value is 108,921, meaning that half of the observed values are below 108,921 whereas the rest of the values are above this threshold.
  • The mean value is 116,045.1, which represents the average value.
  • Skewness indicates the asymmetry of the distribution. The skewness value of 1.350487 indicates a positive skewness where the distribution is skewed to the right. This means that there may be a few high values that pull the distribution in that direction.

Kurtosis indicates the peakedness (or flatness) of the distribution. For this variable, the kurtosis value is 4.595376 which represents a positive kurtosis and a relatively more peaked distribution compared to a normal distribution (mesokurtic = 3).

For Burglary,

  • The maximum value is 386,500.
  • The minimum value is 207,325.
  • The median value is 281,815.5, meaning that half of the observed values are below 281,815.5 whereas the rest of the values are above this threshold.
  • The mean value is 294,936.1, which represents the average value.
  • The skewness value of -0.02572035 indicates a negative skewness suggesting the distribution is slightly skewed to the left, with the tail extending towards the lower values.

For this variable, the kurtosis value is 3.393699 which represents a positive kurtosis and slightly high peak.

For Fraud,

  • The maximum value is 465,000.
  • The minimum value is 128,531.
  • The median value is 295,372.5, meaning that half of the observed values are below 295,372.5 whereas the rest of the values are above this threshold.
  • The mean value is 273,572.3, which represents the average value.
  • The skewness value of 0.1379744 indicates a positive skewness, values are slightly skewed to the right suggesting fewer high values.

For this variable, the kurtosis value is 1.839288 which represents a negative kurtosis and a more flatten distribution.

Visualizing variables

For this part of the analysis, we will simply plot the year of the recorded data against each of the sample variables. To do so, we will use the LightningChart JS for the R package.

Although still in an early stage, the LC4R (for shorter) package is a free package for R derived from the JS library LightningChart JS.

Currently, you can create different visualizations such as scatter plots, line charts, heat maps, surface charts, and map charts.

But what’s most interesting about the LC4R package is the outstanding capabilities of the available visualizations. For instance, in this article we’re using a scatter type of chart that supports the following characteristics:

  • Full interactivity supporting zooming, panning, and data cursor.
  • Processing up to 75,000,000 data points.
  • Supports circle, square, and triangle markers.
  • Supports individual point sizes and transparent points.

Contrary to some other common visualization packages, e.g., ggplot2, the LC4R has more interactive and UI capabilities.

ROBBERY

We’ll start with robbery:

print(
  lc4r(
    lcSeries(
      type='scatter',
      x = arrests_national$year,
      y = arrests_national$robbery,
      point_size = pmax(arrests_national$population/20000000, 3),
      point_color = '#fecc00'
    )
  )
)

For visualization, within a print function, we’ll nest the lc4r function, specify the lcSeries, and then specify the data parameters.

Type = scatter. Defines the type of visualization to be used. For a list of available charts, you can check the GitHub project.

X defines the value for the X-axis. In this case, we’re plotting the years of recorded data from arrests_national and using the “$” operator to select the variable year.

Y defines the value of the Y-axis. In this case, we plot robbery, burglary, and fraud. As in the X-axis, we use the “$” operator to select the desired variable from within the dataset.

For the point color, we specify the value using a custom HEX color code.

javascript-charts-in-R-robbery-arrests-trend

From this plot, we can see the trend of robbery arrests from 1996 – 2016. What’s interesting to see is how between 2006 and 2009 there was an increase in the number of robberies but from 2010 onwards the trend continued at low levels.

BURGLARY

To visualize burglary, run the following command:

print(
  lc4r(
    lcSeries(
      type='scatter',
      x = arrests_national$year,
      y = arrests_national$burglary,
      point_size = pmax(arrests_national$population/20000000, 3),
      point_color = '#073863'
    )
  )
)
javascript-charts-in-R-Burglary-data-line-chart

In this variable, we can see a clear downward trend, i.e., a decrement in the number of arrests for burglary starting from year 2012.

FRAUD

To visualize fraud, run the following command:

print(
  lc4r(
    lcSeries(
      type='scatter',
      x = arrests_national$year,
      y = arrests_national$burglary,
      point_size = pmax(arrests_national$population/20000000, 3),
      point_color = '#5b2675'
    )
  )
)
javascript-charts-in-R-fraud-data-line-chart

Clearly, there was a downward trend in the total number of arrests related to fraud.

Conclusion

This was a quick Exploratory Data Analysis where we calculated basic descriptive statistics of a sample of variables from a dataset that has recorded crime data. Additionally, we used the LightningChart JS for the R package to visualize the data trend for several years.

By doing this, we could observe key statistics and how data developed. It was interesting to see how the 3 variables had downward trends. The only variable that presented an upward slight variation was robbery.

This analysis opens the possibility to simply analyze data and visualize it using advanced tools such as the LC4R package that adds interactivity and high-processing power in comparison to more common packages such as ggplot2.

If you’re interested in visualizing data with R, feel free to send us your comments about what you would like to see in the LC4R package.

Also, I encourage you to continue this exercise and further explore other analyses such as correlation analysis and even linear regression models for understanding the relationship between variables (dependent-independent).

Bye!

Omar Urbano Software Engineer

Omar Urbano

Software Engineer

LinkedIn icon
divider-light

Continue learning with LightningChart

JavaScript Data Visualization With LightningChart JS

JavaScript Data Visualization With LightningChart JS

Written by a human | Updated on April 9th, 2025LightningChart JS  LightningChart JS is the top contestant for next-generation JavaScript data visualization tools for web and mobile applications. From the start, it has been engineered to deal with maximum-size...

The Complete Guide to JavaScript Charts

The Complete Guide to JavaScript Charts

Written by a human | Updated on April 9th, 2025JavaScript Charting Libraries  Charting libraries are at a high peak and their development and usage are becoming even more popular in languages like JavaScript. As proof, there are a lot of JavaScript charting...