Interactive Visualization in R with apexcharter Build interactive charts and visualizations

Interactive Visualizations are powerful these days because those are all made for web. Web - simply a combination of html , css and javascript which build interactive visualizations. Thus, paving way for a lot of javascript charting libraries like highcharts.js , apexcharts.js .

Thanks to htmlwidgets of R, many R developers have started porting those javascript charting libraries to R and dreamRs is one of such leading Developer groups working on the intersection R + Web. In this post, We’ll learn how to use the R package apexcharter which is developed by dreamRs - Victor Perrier and Team to make beautiful interactive visualizations that are based on apexcharts.js

apexcharter - Intro, Installation & Loading apexchart.js is a modern JavaScript charting library to build interactive charts and visualizations with simple API. apexcharter is built as a htmlwidget (R Package) for apexchart.js and the API design is inspired by highcharter . apexcharter requires RStudio >= 1.2 to properly display charts. Install the stable version from CRAN with: install.packages("apexcharter") Or install the development version from GitHub with: # install.packages("devtools") devtools::install_github("dreamRs/apexcharter") Once successfully installed, apexcharter can be loaded using library(apexcharter)

Simple Example The main function of apexcharter is the apex() function whose first argument is data . Thus, enabling the support of pipe %>% operator. The second argument is mapping - aesthetics (x & y) and the third one is type of the chart - which takes multiple values like scatter , bar , line and much more. Let’s take R’s in-built mtcars dataset and draw a simple bar chart. library(apexcharter) library(tidyverse) mtcars %>% count(cyl) %>% apex(type = "bar", mapping = aes(x = "cyl", y = n)) Now, that’s a beautiful interctive chart. Let’s go ahead and see a few more examples of something bigger than a simple bar chart.

Building Interactive Heatmap / Correlation Plot Let’s try to visualize a Heatmap (of Correlation Plot) of numeric columns of mtcars dataset. To do that, we’ve to first select the numeric columns which we’ll do with select_if(is.numeric) and then we’ve to build the correlation matrix which the base-R function cor() does it smoothly. Now that we’ve got a matrix let’s convert it to a data.frame and for us to draw a heatmap - we need 3 things primarily: x-axis - categorical

y-axis - categorical

fill value - continuous So, we’ll convert the rownames of the resultant dataframe to a column and then convert the wide format data into long format using pivot_longer() . At this point our data is in the desirable format for a heatmap. Simply for aesthetics improvement, let’s round off the correlation values. Finally, we’ll use our apex() function with type = 'heatmap' that gives us a color-filled heatmap (that’s also interactive). library(apexcharter) library(tidyverse) mtcars %>% select_if(is.numeric) %>% cor() %>% as.data.frame() %>% rownames_to_column("col") %>% pivot_longer(cols = -col, names_to = "type") %>% mutate(value = round(value,2)) %>% apex(type = "heatmap", mapping = aes(x = col, y = type, fill = value))

Building Interactive Time-Series (Line) Graph If there’s a plot where Interactive Charts are incredibly valuable, I think it’s Time-Series Graph where labelling on traditional (static) chart would sometimes make the chart clunky and less readable. Let’s build an Interactive Time-series plot with the apexcharter library. As you can see below, all it takes is a dataframe with a column denoting the time field and another column with the actual value for that time. library(apexcharter) df <- data.frame(Y=as.matrix(EuStockMarkets), date=time(EuStockMarkets)) df %>% apex(type = "line", mapping = aes(x = date, y = Y.DAX))

Summary Thus, We learnt how to build interactive charts using apexcharter that follows a very minimal API similar to highcharter .

Please enable JavaScript to view the comments powered by Disqus.

Disqus