demo app: use d3scatter instead of leaflet

inst/example/sampleData.R

@@ -55,7 +55,9 @@ dataWC <- data.frame(
     templateWC("semi-finals", "Brazil", "Germany", 1, 7),
     templateWC("semi-finals", "Netherlands", "Argentina", "0 (2)", "0 (4)"),
     templateWC("final", "Germany", "Argentina", 1, 0)
-  )
+  ),
+  goalsHome = c(0, 2, 1, 4, 1, 2, 1),
+  goalsAway = c(1, 1, 0, 3, 7, 4, 0)
 )
 
 # Data for groups example (this data also gets exported in the package)

inst/example/server.R

@@ -108,14 +108,13 @@ function(input, output, session) {
     zoomOut("timelineInteractive", input$zoomBy, animation = input$animate)
   })
 
-  eqs <- read.csv("earthquakes.csv")
-  eqs$content <- paste("<strong>Magnitude:", eqs$magnitude, "</strong><br/><em>", eqs$start, "</em>")
-  shared_df <- crosstalk::SharedData$new(eqs)
+  shared_df <- crosstalk::SharedData$new(dataWC)
 
   output$timelineCrosstalk <- renderTimevis({
     timevis(shared_df, options = list(multiselect = TRUE))
   })
-  output$map <- leaflet::renderLeaflet({
-    leaflet::leaflet(shared_df) %>% leaflet::addTiles() %>% leaflet::addMarkers(lng = ~lng, lat = ~lat, label = ~start)
+  output$plot <- d3scatter::renderD3scatter({
+    d3scatter::d3scatter(shared_df, x = ~goalsHome, y = ~goalsAway,
+                         x_label = "Home Goals", y_label = "Away Goals")
   })
 }

inst/example/ui.R

@@ -175,9 +175,8 @@ fluidPage(
           tags$a("Crosstalk", href = "https://github.com/rstudio/crosstalk"),
         )),
         tags$p(
-          "The following timeline and map show major earthquakes from March 2001.", br(),
-          "The data is linked between the two - select any events in the timeline to see",
-          "them highlighted on the map, and vice versa."
+          "The data in the timeline and the plot below are linked - select any events in the timeline to see",
+          "them highlighted on the plot, and vice versa."
         ),
         HTML("Use <i>ctrl</i> or <i>shift</i> to select multiple events"),
         fluidRow(
@@ -187,7 +186,7 @@ fluidPage(
           ),
           column(
             6,
-            leaflet::leafletOutput("map", height = 300)
+            d3scatter::d3scatterOutput("plot")
           )
         ),
         br()