If you want to create an interactive visualization using R/Shiny and d3.js, check out the example below for a step-by-step guide along with code snippets.

Note from December 2018: Take into account MrGrumble's comment about changes in events when using d3 v5.

How to Reproduce:

To replicate this project, simply clone the repository from here.

Preview:

Apologies for the low quality of the gif, but you can still get an idea from it: https://i.sstatic.net/lUgeT.gif

Explanation:

The implementation involves combining d3.js, Shiny, and R. A custom shiny function called renderDragableChart() is utilized to allow customization of circle colors and sizes. Check out the details in DragableFunctions.R.

R-to-d3.js Interaction:

Initially, the data points' locations are set in R as demonstrated in server.R:

df <- data.frame(x = seq(20,150, length.out = 10) + rnorm(10)*8,
                 y = seq(20,150, length.out = 10) + rnorm(10)*8)
df$y[1] = df$y[1] + 80

The graphics rendering is managed through d3.js, including features like draggable points and updating changes back to R via

Shiny.onInputChange("JsData", coord);

The Code Structure:

ui.R:

This contains a customized shiny function called DragableChartOutput(), defined in DragableFunctions.R. Here's how it looks:

library(shiny)
shinyUI( bootstrapPage( 
  fluidRow(
    column(width = 3,
           DragableChartOutput("mychart")
    ),
    column(width = 9,
           verbatimTextOutput("regression")
    )
  )
))

server.R:

In addition to basic shiny functionality, there's a special function named renderDragableChart(). Here's a snippet from the server script:

library(shiny)
options(digits=2)
df <- data.frame(x = seq(20,150, length.out = 10) + rnorm(10)*8,
                 y = seq(20,150, length.out = 10) + rnorm(10)*8)
df$y[1] = df$y[1] + 80
...

The specific functions are stored in DragableFunctions.R for modularity. While using library(htmlwidgets) could simplify the process, opting for the detailed approach helps in understanding the nuances better.

library(shiny)
...remaining code...

To delve deeper into the dynamic behavior powered by d3.js, refer to ChartRendering.js. It showcases the circle generation and drag functionalities, ensuring real-time updates to R upon dragging completion.

var col = "orange";
...d3.js code snippet...

This interactive feature can also be achieved using dynamic shapes in plotly:

library(plotly)
library(purrr)
library(shiny)

ui <- fluidPage(
  fluidRow(
    column(5, verbatimTextOutput("summary")),
    column(7, plotlyOutput("p"))
  )
)

server <- function(input, output, session) {

  rv <- reactiveValues(
    x = mtcars$mpg,
    y = mtcars$wt
  )
  grid <- reactive({
    data.frame(x = seq(min(rv$x), max(rv$x), length = 10))
  })
  model <- reactive({
    d <- data.frame(x = rv$x, y = rv$y)
    lm(y ~ x, d)
  })

  output$p <- renderPlotly({
    # creates a list of circle shapes from x/y data
    circles <- map2(rv$x, rv$y, 
      ~list(
        type = "circle",
        # anchor circles at (mpg, wt)
        xanchor = .x,
        yanchor = .y,
        # give each circle a 2 pixel diameter
        x0 = -4, x1 = 4,
        y0 = -4, y1 = 4,
        xsizemode = "pixel", 
        ysizemode = "pixel",
        # other visual properties
        fillcolor = "blue",
        line = list(color = "transparent")
      )
    )

    # plot the shapes and fitted line
    plot_ly() %>%
      add_lines(x = grid()$x, y = predict(model(), grid()), color = I("red")) %>%
      layout(shapes = circles) %>%
      config(edits = list(shapePosition = TRUE))
  })

  output$summary <- renderPrint({a
    summary(model())
  })

  # update x/y reactive values in response to changes in shape anchors
  observe({
    ed <- event_data("plotly_relayout")
    shape_anchors <- ed[grepl("^shapes.*anchor$", names(ed))]
    if (length(shape_anchors) != 2) return()
    row_index <- unique(readr::parse_number(names(shape_anchors)) + 1)
    pts <- as.numeric(shape_anchors)
    rv$x[row_index] <- pts[1]
    rv$y[row_index] <- pts[2]
  })

}

shinyApp(ui, server)

https://i.sstatic.net/lbBj4.gif

If you want to achieve this, the rAmCharts4 package (with or without Shiny) can help. In this example, I create a cubic regression line for two sets of values.

Asym = 5; R0 = 1; lrc = -3/4
x <- seq(-.3, 5, len = 21)
y0 <- Asym + (R0-Asym) * exp(-exp(lrc)* x)

dat <- data.frame(
  x = x,
  y1 = y0 + rnorm(21, sd = 0.33),
  y2 = y0 + rnorm(21, sd = 0.33) + 2
)

amScatterChart(
  data = dat,
  width = "800px",
  height = "600px",
  xValue = "x",
  yValues = c("y1", "y2"),
  trend = list("_all" = list(
    method = "lm.js", 
    order = 3,
    style = amLine()
  )),
  draggable = TRUE,
  pointsStyle = list(
    y1 = amTriangle(
      width = 12,
      height = 12,
      strokeColor = "yellow",
      strokeWidth = 1
    ),
    y2 = amTriangle(
      width = 12,
      height = 12,
      strokeColor = "chartreuse",
      strokeWidth = 1,
      rotation = 180
    )
  ),
  chartTitle = amText(text = "Regression model"),
  xAxis = "x",
  yAxis = "y",
  Xformatter = "#.###",
  Yformatter = "#.",
  theme = "kelly",
  zoomButtons = TRUE)

https://i.sstatic.net/U7jlF.gif