echarts4r/vignettes/brush.Rmd at 35673734989f9cd4553c55980032ea250873a2b4 · JohnCoene/echarts4r · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
title: "Brush & Slide"
author: "John Coene"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Brush & Slide}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
library(htmltools)
library(echarts4r)
e_common(
    font_family = "Raleway"
)
```

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.

```{r}
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`.

```{r}
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`.

```{r}
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.

```{r}
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.