cxplot: the ggplot of JavaScript

Isaac Neuhaus
3 min readFeb 3, 2022

--

Cxplot is a wrapper for CanvasXpress that implements the same grammar as that one used by the ggplot R package. Cxplot is a standalone application written completely in JavaScript. Visit https://cxplot.com/index.html for more information.

Here are few examples that show a side-by-side comparison of the graphs and the code produced in R and the graphs and code produced in a web page using cxplot.

In R — ggplot a stacked bar that shows the counts:

library(ggplot)
g <- ggplot(mpg, aes(class))
g + geom_bar(aes(fill = drv))

In JavaScript — cxplot:

var mpg = "https://www.cxplot.com/assets/data/mpg.csv";
var cxp = new cxplot("canvas", mpg, aes("class"));
cxp.geom_bar(aes({"fill": "drv"}));

In R — ggplot a filled contour plot:

library(ggplot)
v <- ggplot(faithfuld, aes(waiting, eruptions, z = density))
v + geom_contour_filled()

In JavaScript — cxplot:

var mpg = "https://www.cxplot.com/assets/data/faithfuld.csv";
var cxp = new cxplot("canvas3", faithfuld, aes("waiting", "eruptions", {"z": "density"}));
cxp.geom_contour_filled();

In R — ggplot: a loess fit:

library(ggplot)
ggplot(mpg, aes(displ, hwy)) +
geom_point() +
geom_smooth()

In JavaScript — cxplot:

var mpg = "https://www.cxplot.com/assets/data/mpg.csv";
var cxp = new cxplot("canvas1", mpg, aes("displ", "hwy"));
cxp.geom_point();
cxp.geom_smooth();

In R — ggplot: a violin plot

library(ggplot)
p <- ggplot(mtcars, aes(factor(cyl), mpg))
p + geom_violin(adjust = .5)

In JavaScript — cxplot:

var mtcars = "https://www.cxplot.com/assets/data/mtcars.csv";
var cxp = new cxplot("canvas", mtcars, aes({"factor": "cyl"}, "mpg"));
cxp.geom_violin({"adjust": 0.5});

The bottom line

The graphs and the code are remarkably similar despite the fact ggplot is run in R while cxplot is run in a web browser. This is mainly possible because of the algorithmic implementation in CanvasXpress to produce these plots is almost identical to that used in R. Now expert R users can feel warm and fuzzy writing JavaScript :-)

What is next?

cxplot was just released. Not all geoms and utility methods in ggplot are available in cxplot at the time of this communication, but we expect to implement most of them as the interest in this new library grows. Please let us know if that interests you

--

--