Crosstool Examples

The GitHub repository is here: https://github.com/bwlewis/crosstool.

Using ‘receiver’ to debug crosstalk key state

Eavesdrop on widget chatter.

library(crosstalk)
library(crosstool)
library(htmltools)
library(d3scatter) # devtools::install_github("jcheng5/d3scatter")

x = iris[sample(150, 50), ]
rownames(x) = NULL
x$key = state.name
sd = SharedData$new(x, key=~key)
d1 = d3scatter(sd, x=~Petal.Length, y=~Petal.Width, color=~Species, width="100%")
d2 = d3scatter(sd, x=~Sepal.Length, y=~Sepal.Width, color=~Species, width="100%")

rx = crosstool(sd, "receiver",  html="<span style='font-size:14pt; word-wrap:break-word;'/>", value="innerText", width="100%")
bscols(d1, d2, rx, widths=c(4,4,4))

Using ‘transmitter’ to set initial selection handle state for a crosstalk group

This is one way to address the discussion in https://github.com/rstudio/crosstalk/issues/16.

library(crosstalk)
library(crosstool)
library(htmltools)
library(d3scatter)

x = iris[sample(150, 50), ]
rownames(x) = NULL
x$key = state.name
sd = SharedData$new(x, key=~key)
d1 = d3scatter(sd, x=~Petal.Length, y=~Petal.Width, color=~Species, width="100%")
d2 = d3scatter(sd, x=~Sepal.Length, y=~Sepal.Width, color=~Species, width="100%")

rx = crosstool(sd, "receiver",  html="<span style='font-size:14pt; word-wrap:break-word;'/>", value="innerText", width="100%")

# Make an initial random selection and use the 'init' option
i = sample(state.name, 10)
tx = crosstool(sd, "transmitter", init=i)

bscols(d1, d2, rx, tx, widths=c(4,4,4,0))

Using a transceiver to set initial filter handle state

Use the init and reset arguments of the transceiver to set up an initial filter handle state and then reset it when other filters are activated. Based on the filter example from https://rstudio.github.io/crosstalk/using.html.

library(crosstalk)
library(htmltools)
library(crosstool)
library(d3scatter)

shared_mtcars <- SharedData$new(mtcars)
# debug the key state to show active filter keys
sp = crosstool(shared_mtcars, "receiver", "<span style='font-size:14pt; word-wrap:break-word;'/>", value="innerText", channel="filter")
# Make an initial random filter and use the 'init' option
i = sample(rownames(mtcars), 10)
tx = crosstool(shared_mtcars, "transceiver", init=i, channel="filter", reset=rownames(mtcars))

bscols(widths = c(3,NA,NA),
  list(
    filter_checkbox("cyl", "Cylinders", shared_mtcars, ~cyl, inline = TRUE),
    filter_slider("hp", "Horsepower", shared_mtcars, ~hp),
    filter_select("auto", "Automatic", shared_mtcars, ~ifelse(am == 0, "Yes", "No"))
  ),
  list(d3scatter(shared_mtcars, ~wt, ~mpg, ~factor(cyl), width="100%", height=250), sp),
  list(d3scatter(shared_mtcars, ~hp, ~qsec, ~factor(cyl), width="100%", height=250), tx)
)

Cylinders

4 6 8

Horsepower

Automatic

Somewhat complicated example…

…of generic HTML widgets interacting using crosstalk and transcoding values.

This example includes two crosstalk groups connected by a transceiver relay. The transceiver converts keys across groups through a lookup vector.

The first group contains an HTML slider element with ten entries, a select option menu and an HTML span element.
The 2nd group includes a d3scatter plot and a span element that displays the selected elements in its group.
The ‘relay’ transceiver listens for selection changes in the first group, transcodes the selection value using a vector ‘lookup’ indexed by the ‘s’ crosstalk key into a new vector of selection indices in the 2nd group, then sends that new selection to the 2nd group.

The slider and select elements are single-group transceivers (receive/transmit to the same crosstalk group but only on the Select Handle), but otherwise approximate traditional crosstalk widget behavior.

library(crosstalk)
library(htmltools)
library(crosstool)
library(d3scatter)

s = SharedData$new(data.frame(key=paste(2:11)), key=~key)

slider = crosstool(s, "transceiver", "<input type='range' min='2' max='11', value='2'/>", width=200, init="2")
h =  sprintf("<select>%s</select>", paste(Map(function(i) sprintf("<option value='%d'>%d</option>", i, i), 2:11), collapse=""))
sel = crosstool(s, "transceiver", html=h, value="value", height=100, width=100)
span = crosstool(s, "receiver", "<span style='font-size:14pt;'/>", value="innerText", width=200)

s2 = SharedData$new(data.frame(x=rnorm(100), y=rnorm(100)))
lookup = Map(function(i) sample(100, i), sample(100, 10))
relay = crosstool(s, "transceiver", lookup=lookup, relay=s2)
span2 = crosstool(s2, "receiver", "<span style='font-size:14pt; word-wrap:break-word;'/>", value="innerText", width=200)
d3 = d3scatter(s2, x=~x, y=~y)

p1 = tags$div(list(tags$h3("select"), sel))
p2 = tags$div(list(tags$h3("span showing raw slider/select values:") , span))
p3 = tags$div(list(tags$h3("span showing transcoded transceiver values") , span2, relay))
p4 = tags$div(list(tags$h3("HTML range slider"), slider))

browsable(tags$div(list(d3, bscols(p1, p2, p3, p4, widths=c(1,3,3,3)))))