echarty + crosstalk

Multiple R htmlwidgets can share a common dataset and exchange record selections. On a more basic level, this is a mechanism of keys exchange between multiple JavasScript libraries on the same web page.

Crosstalk provides two types of cross-widget interactions - Filtering and Selection.
The live example below uses several external crosstalk controls. Their capabilities are summarized here, R means receive and S means send.

Widget	Filter S	Filter R	Select S	Select R	Filter Effect	Select Effect
filter_checkbox	✔	-	-	-
filter_slider	✔	-	-	-
datatable	-	✔	✔	✔	show, hide	S: ± highlight R: select = filter
d3scatter	-	✔	✔	✔	show, hide	± highlight
echarty	-	✔	✔	✔	show, hide	± highlight

# this page replaces https://helgasoft.github.io/echarty/xtalk.html
# see also code for 3D in the gallery https://helgasoft.github.io/echarty/gallery.html
library(crosstalk); library(d3scatter); library(DT); library(htmltools)
library(dplyr); library(tibble);

sdf <- mtcars %>% rownames_to_column(var='name') %>% relocate(mpg,hp)
sdf <- SharedData$new(sdf)

library(echarty)   # v.1.4.7.05+
p <- sdf |> ec.init( 
    title=list(text="echarty 2D"), height=500, animation= FALSE,
    xAxis= list(name= 'mpg', max=37,
        nameTextStyle= list(align= 'right', 
                    verticalAlign= 'top', padding= c(-20, 5, 0, 0))),
    yAxis= list(name= 'hp', min=50, max=340), 
    toolbox= list(feature=list(brush=list(show=TRUE))),
    brush= list(brushLink='all', throttleType='debounce', 
                brushStyle= list(borderColor='brown'), 
                outOfBrush= list(opacity=0.3)),
    dataZoom = list(type='inside'),
    tooltip = list(formatter= ec.clmn('name')),
    series= list(list(
      itemStyle = list(color = htmlwidgets::JS("function(params){
          let cyl=params.value[3]; return (cyl==4 ? 'RoyalBlue' : cyl==6 ? 'OrangeRed':'green');}")       ),
      selectedMode = 'multiple',
      select = list(itemStyle= list(color='magenta')), 
      emphasis = list(focus='self', blurScope='series'),
      blur= list(itemStyle= list(opacity = 0.3))
    ))
)

styl <- 'width:50%;display:block;float:left;'
crosstalk::bscols(
  list(
    filter_slider("hp", "Horsepower", sdf, ~hp, width = "100%"),
    div(style=styl, filter_checkbox("cyl", "Cylinders", sdf, ~cyl, inline=TRUE)),
    div(style=styl, filter_checkbox("gear", "Gears", sdf, ~gear, inline=TRUE)),
    filter_select("carb", "Carburetors (select)", sdf, ~carb),
    datatable(sdf, 
          class="compact", width="100%", height=350, 
          extensions="Scroller", style="bootstrap",
          options=list(scroller=TRUE, deferRender=TRUE, scrollY=200) 
    )
  ),
  list( p )
)

Horsepower

Cylinders

4 6 8

Gears

3 4 5

Carburetors (select)

Selections in echarty

Select-Send is controlled by the four toolbar brush options - Box, Lasso, Keep, Clear.
Echarty can select multiple areas by enabling Keep Selections from toolbar.
Echarty will not ‘forget’ its selections if other remote selections are initiated. To clear all brush selections, click on an empty chart area or hit Box Clear from the toolbar.
Remote Select-Receive in echarty is done by highlight, so hover on any point will downplay all of them.

Notes

Crosstalk has not been tested in Shiny/echarty.
ECharts GL/3D is a separate library used as a plugin. Currently it does not support events, so echarty-3D is only a crosstalk listener(receiver). There is a code sample in the gallery.
Check out also the World Map demo.