crosstalk icon indicating copy to clipboard operation
crosstalk copied to clipboard

crosstalk slider and plotly

Open antoine4ucsd opened this issue 1 year ago • 2 comments

I am using plotly for interactive plot and crosstalk to get a map with date slider. when I combine both on the same quarto dashboard, the plotly mess up the crosstalk slider which does not appear as date anymore. when I use a ggplot, this is back to normal

see reproducible code below: the slider does not show date in good format

---
title: "test plotly and crosstalk"
format: dashboard
---


```{r setup, include=FALSE}
library(plotly)
library(leaflet)
library(crosstalk)
library(dplyr)
library(lubridate)
```

# 📊 Random Interactive Plot

```{r}
set.seed(123)
df_plot <- data.frame(
  x = rnorm(100),
  y = rnorm(100)
)

plot_ly(df_plot, x = ~x, y = ~y, type = "scatter", mode = "markers")
```



------------------------------------------------------------------------

# 🗺️ Map with Date Filter

```{r}
# Create dummy data with random dates
set.seed(1)
dummy_map_data <- data.frame(
  id = 1:10,
  lat = runif(10, 30, 50),
  lng = runif(10, -125, -70),
  date = sample(seq(as.Date("2024-01-01"), as.Date("2024-12-31"), by = "day"), 10)
)

# Share data for crosstalk filtering
shared_map_data <- SharedData$new(dummy_map_data)
```

```{r}
# Add filter slider
filter_slider("date", "Filter by Date", shared_map_data, ~date, step = 1)
```

```{r}
# Leaflet map using SharedData
leaflet(shared_map_data) %>%
  addTiles() %>%
  addMarkers(~lng, ~lat, popup = ~paste("Date:", date)) %>%
  setView(lng = -95, lat = 40, zoom = 4)
```

while this one is working with slider in correct format


---
title: "test plotly and crosstalk"
format: dashboard
---


```{r setup, include=FALSE}
library(plotly)
library(leaflet)
library(crosstalk)
library(dplyr)
library(lubridate)
```


# classic ggplot

```{r}

library(ggplot2)
plt<- ggplot(mtcars, aes(x = hp, y = mpg, color = factor(cyl))) +
  geom_point(size = 3) +
  labs(
    title = "Random Plot: MPG vs Horsepower",
    x = "Horsepower (hp)",
    y = "Miles per Gallon (mpg)",
    color = "Cylinders"
  ) +
  theme_minimal()
plt

```


------------------------------------------------------------------------

# 🗺️ Map with Date Filter

```{r}
# Create dummy data with random dates
set.seed(1)
dummy_map_data <- data.frame(
  id = 1:10,
  lat = runif(10, 30, 50),
  lng = runif(10, -125, -70),
  date = sample(seq(as.Date("2024-01-01"), as.Date("2024-12-31"), by = "day"), 10)
)

# Share data for crosstalk filtering
shared_map_data <- SharedData$new(dummy_map_data)
```

```{r}
# Add filter slider
filter_slider("date", "Filter by Date", shared_map_data, ~date, step = 1)
```

```{r}
# Leaflet map using SharedData
leaflet(shared_map_data) %>%
  addTiles() %>%
  addMarkers(~lng, ~lat, popup = ~paste("Date:", date)) %>%
  setView(lng = -95, lat = 40, zoom = 4)
```

antoine4ucsd avatar Apr 17 '25 13:04 antoine4ucsd

A note that this is happening with R Markdown too https://github.com/quarto-dev/quarto-cli/issues/12573#issuecomment-2813118764

cderv avatar Apr 17 '25 15:04 cderv

to contribute to the discussion: it does not seem to impact the filter_select. only the slider is impacted/ for example this works as expected

filter_select(
        allLevels = TRUE,
        multiple = TRUE,
        id = "sp",
        label = "IDs:",
        sharedData = shared_map_data,
        group = ~id
)

antoine4ucsd avatar Apr 17 '25 17:04 antoine4ucsd