Skip to content

crosstalk slider and plotly #160

@antoine4ucsd

Description

@antoine4ucsd

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)
```

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions