echarts4r

John Coene

Introduction

john-coene.com/talks/unige

Me me me

R, Go, Javascript at opifex.org

Socials:

Installation

Use the github installation*

CRAN


install.packages("echarts4r")

Github


# install.packages("remotes")
remotes::install_github("JohnCoene/echarts4r")

Get Started

First Plot

iris |>
  e_charts(x = Sepal.Length) |>
  e_scatter(serie = Sepal.Width)

Groups

iris |>
  group_by(Species) |>
  e_charts(Sepal.Length) |>
  e_scatter(Sepal.Width)

Tooltips

iris |>
  group_by(Species) |>
  e_charts(x = Sepal.Length) |>
  e_scatter(serie = Sepal.Width) |>
  e_tooltip()

Axis Labels

iris |>
  group_by(Species) |>
  e_charts(x = Sepal.Length) |>
  e_scatter(serie = Sepal.Width) |>
  e_tooltip() |>
  e_axis_labels(x = "Sepal Length")

Themes

iris |>
  group_by(Species) |>
  e_charts(x = Sepal.Length) |>
  e_scatter(serie = Sepal.Width) |>
  e_tooltip() |>
  e_axis_labels(x = "Sepal Length") |>
  e_theme("essos")

Title

iris |>
  group_by(Species) |>
  e_charts(x = Sepal.Length) |>
  e_scatter(serie = Sepal.Width) |>
  e_tooltip() |>
  e_axis_labels(x = "Sepal Length") |>
  e_theme("essos") |>
  e_title("Iris", "Length and Width")

Legend

iris |>
  group_by(Species) |>
  e_charts(x = Sepal.Length) |>
  e_scatter(serie = Sepal.Width) |>
  e_tooltip() |>
  e_axis_labels(x = "Sepal Length") |>
  e_theme("essos") |>
  e_title("Iris", "Length and Width") |>
  e_legend(right = 0)

Advanced Features

Timeline

iris |>
  group_by(Species) |>
  e_charts(Sepal.Length) |>
  e_scatter(Sepal.Width)

Timeline (cont’d)

iris |>
  group_by(Species) |>
  e_charts(Sepal.Length, timeline = TRUE) |>
  e_scatter(Sepal.Width)

Visual map

iris |>
  e_charts(Sepal.Length) |>
  e_scatter(Sepal.Width, Petal.Length) |>
  e_visual_map(Petal.Length)

Geo

quakes |>
  e_charts(long) |>
  e_geo(
    roam = TRUE,
    boundingCoords = list(
      c(200, -10),
      c(165, -40)
    )
  ) |>
  e_scatter(lat, mag, coord_system = "geo") |>
  e_visual_map(min = 4, max = 6.5)

Datazoom

e_charts(mtcars, qsec) |>
  e_scatter(mpg, wt) |>
  e_datazoom(startValue = 14)

3D

data <- expand.grid(
  x = seq(-3, 3, by = 0.05),
  y = seq(-3, 3, by = 0.05)
) |>
  dplyr::mutate(z = sin(x * x + y * y) * x / 3.14)

data |>
  e_charts(x) |>
  e_surface(y, z, wireframe = list(show = FALSE)) |>
  e_visual_map(z)

SVG

df <- data.frame(x = 1:10, y = rnorm(10, 10, 2))

style <- list(normal = list(opacity = 0.5), emphasis = list(opacity = 1))
path <- "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"

df |>
  e_charts(x) |>
  e_pictorial(y, symbol = path, barCategoryGap = "-130%", itemStyle = style)

Map

cns <- countrycode::codelist$country.name.en
cns <- data.frame(
  country = cns,
  value = runif(length(cns), 1, 100)
)

cns |>
  e_charts(country) |>
  e_map(value) |>
  e_visual_map(value)

Geo 3D

data <- jsonlite::fromJSON("https://echarts.apache.org/examples/data-gl/asset/data/population.json")
data <- as.data.frame(data)
names(data) <- c("lon", "lat", "value")

data |>
  e_charts(lon) |>
  e_geo_3d() |>
  e_bar_3d(lat, value, coord_system = "geo3D") |>
  e_visual_map()

Shiny

A lot of features to integrate with Shiny.

echarts4r.john-coene.com/articles/shiny

Morphing

Undocumented feature.

Morphing

mtcars2 <- mtcars |>
  head() |>
  tibble::rownames_to_column("model")

knitr::kable(mtcars2)
model mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.0 6 160 110 3.90 2.620 16.46 0 1 4 4
Mazda RX4 Wag 21.0 6 160 110 3.90 2.875 17.02 0 1 4 4
Datsun 710 22.8 4 108 93 3.85 2.320 18.61 1 1 4 1
Hornet 4 Drive 21.4 6 258 110 3.08 3.215 19.44 1 0 3 1
Hornet Sportabout 18.7 8 360 175 3.15 3.440 17.02 0 0 3 2
Valiant 18.1 6 225 105 2.76 3.460 20.22 1 0 3 1

Morphing (1)

e1 <- mtcars2 |>
  e_charts(model) |>
  e_bar(
    carb,
    universalTransition = TRUE,
    animationDurationUpdate = 1000L
  ) |>
  e_legend(FALSE)

e1

Morphing (2)

e2 <- mtcars2 |>
  e_charts(model) |>
  e_pie(
    carb,
    universalTransition = TRUE,
    animationDurationUpdate = 1000L
  )

e2

Morphing (3)

That’s why it is undocumented, you need to know some of the internals.

Create a callback.

cb <- "() => {
  let x = 0;
  setInterval(() => {
    x++
    chart.setOption(opts[x % 2], true);
  }, 5000); // every 5 seconds
}"

We pass it to the morph function.

p <- e_morph(e1, e2, callback = cb)

Morphing (4)

Morphing Callback

cb <- "() => {
  let x = 0;
  document.getElementById('button').addEventListener('click', (e) => {
    x++
    chart.setOption(opts[x % 2], true);
  });
}"
e_morph(e1, e2, callback = cb)

JavaScript for R

How to build widgets like {echarts4r} make up a large part of the book.

javascript-for-r.com/

Thank you