Brush & Slide

Leverage echarts4r build-in “crosstalk.”

Sliders

Let’s do a fairly standard chart but add a slider on the x axis and one on the y axis.

mtcars |> 
  e_charts(mpg) |> 
  e_line(qsec) |> 
  e_datazoom(x_index = 0, type = "slider") |> 
  e_datazoom(y_index = 0, type = "slider")

Zoom

Let’s leverage e_datazoom.

USArrests |> 
  e_charts(UrbanPop) |> 
  e_line(Assault) |> 
  e_area(Murder, y_index = 1, x_index = 1) |> 
  e_y_axis(gridIndex = 1) |>
  e_x_axis(gridIndex = 1) |> 
  e_grid(height = "35%") |> 
  e_grid(height = "35%", top = "50%") |> 
  e_datazoom(x_index = c(0, 1))

Brush

Let’s now look at e_brush.

quakes |> 
  e_charts(long) |> 
  e_geo(
      boundingCoords = list(
          c(190, -10),
          c(180, -40)
      )
  ) |> 
  e_scatter(lat, mag, stations, coord_system = "geo", name = "mag", rm_y = FALSE, rm_x = FALSE) |> # do not remove axis
  e_data(quakes, depth) |> # use e_data to add data and/or change value on x axis
  e_scatter(depth, mag, stations,  name = "mag & depth") |>  # plot scatter
  e_grid(right = 40, top = 100, width = "30%") |> # adjust grid to avoid overlap
  e_y_axis(name = "depth", min = 3.5) |> # add y axis name
  e_x_axis(name = "magnitude") |> # add x axis name
  e_legend(FALSE) |>  # hide legend
  e_title("Built-in crosstalk", "Use the brush") |> # title
  e_theme("westeros") |> # add a theme
  e_brush() |> # add the brush
  e_tooltip() # Add tooltips

The key to the above is 1) use the bind argument in both e_scatter to bind the data, in this case stations, think of it as a key, and 2) not removing the axis on the first e_scatter.

Let’s combine both.

quakes |> 
  e_charts(long) |> 
  e_geo(
      boundingCoords = list(
          c(190, -10),
          c(180, -40)
      )
  ) |> 
  e_scatter(lat, mag, stations, coord_system = "geo", name = "mag", rm_y = FALSE, rm_x = FALSE) |> # do not remove axis
  e_data(quakes, depth) |> # use e_data to add data and/or change value on x axis
  e_scatter(depth, mag, stations, name = "mag & depth") |>  # plot scatter
  e_grid(right = 40, top = 100, width = "30%") |> # adjust grid to avoid overlap
  e_y_axis(name = "depth", min = 3.5) |> # add y axis name
  e_x_axis(name = "magnitude") |> # add x axis name
  e_legend(FALSE) |>  # hide legend
  e_title("Built-in crosstalk", "Use the brush") |> # title
  e_theme("chalk") |> # add a theme
  e_brush() |> # add the brush
  e_tooltip() |> 
  e_datazoom(x_index = 0, type = "slider") |> 
  e_datazoom(y_index = 0, type = "slider")

e_brush actually filters while e_datazoom only zooms on the data.

John Coene

2024-02-16

Sliders

Zoom

Brush