finalize new docs

Joseph Damiba · Joseph Damiba · commit 640c66cae196 · 2020-05-26T15:22:54.000-04:00
diff --git a/r/2015-07-30-time-series.Rmd b/r/2015-07-30-time-series.Rmd
@@ -30,29 +30,23 @@ fig
 ```
 
 ### Hiding Weekends and Holidays
+The `rangebreaks` attribute available on x- and y-axes of type date can be used to hide certain time-periods. In the example below, we create a plot of the last ten days, excluding Saturdays, Sundays, yesterday, and the day before yesterday. Check out the reference for more options: https://plotly.com/r/reference/#layout-xaxis-rangebreaks
 
 ```{r}
 library(plotly)
-
-df <- read.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
-
-fig <- plot_ly(
-  type = "scatter",
-  x = df$Date, 
-  y = df$AAPL.High,
-  name = 'AAPL High',
-  mode = "lines",
-  x_axis= c('2015-12-01', '2016-01-15'),
-  line = list(
-        color = '#17BECF'
-  )) 
-
-fig <- fig %>%
-  layout(
-    title = "Time Series with Custom Date-Time Format",
-    xaxis = list(rangebreaks = list(list(bounds=c('sat', 'mon')), list(values=c('2015-12-25', '2016-01-15'))))
-    )
-
+today <- Sys.Date()
+yesterday = today - 1
+day_before_yesterday = yesterday - 1
+tm <- seq(0, 10, by = 1)
+x <- today - tm
+y <- rnorm(length(x))
+fig <- plot_ly(x = ~x, y = ~y, mode = 'markers', text = paste(tm, "days from today"))
+fig <- fig %>% layout(
+  xaxis = list(rangebreaks = list( 
+    list(bounds=c("sat", "sun")),
+    list(values=c(yesterday,day_before_yesterday))
+    ))
+)
 fig
 ```
 ### POSIXlt date time class with timezone
diff --git a/r/2015-11-19-shapes.Rmd b/r/2015-11-19-shapes.Rmd
@@ -102,7 +102,7 @@ You can create layout shapes programatically, but you can also draw shapes manua
 
 If you switch to a different dragmode such as pan or zoom, you will need to select the drawing tool in the modebar to go back to shape drawing.
 
-This shape-drawing feature is particularly interesting for annotating graphs, in particular [image traces](https://plotly.com/r/displaying-images/). 
+This shape-drawing feature is particularly interesting for annotating graphs, in particular [image traces](https://plotly.com/r/displaying-images/#drawing-shapes-on-images). 
 
 Once you have drawn shapes, you can select and modify an existing shape by clicking on its boundary (note the arrow pointer). Its fillcolor turns to pink to highlight the activated shape and then you can
 
diff --git a/r/2020-02-25-images.Rmd b/r/2020-02-25-images.Rmd
@@ -72,5 +72,42 @@ fig <- fig %>% layout(margin=list(l=10, r=10, b=0, t=0),
 fig
 ```
 
+### Drawing Shapes on Images
+
+You can create layout shapes programatically, but you can also draw shapes manually by setting the `dragmode` to one of the shape-drawing modes: `drawline`,`drawopenpath`, `drawclosedpath`, `drawcircle`, or `drawrect`. If you need to switch between different shape-drawing or other dragmodes (panning, selecting, etc.), modebar buttons can be added in the `config` of your figure to select the dragmode. 
+
+If you switch to a different dragmode such as pan or zoom, you will need to select the drawing tool in the modebar to go back to shape drawing.
+
+This shape-drawing feature is particularly interesting for annotating graphs, in particular [image traces](https://plotly.com/r/displaying-images/). 
+
+Once you have drawn shapes, you can select and modify an existing shape by clicking on its boundary (note the arrow pointer). Its fillcolor turns to pink to highlight the activated shape and then you can
+
+- drag and resize it for lines, rectangles and circles/ellipses
+- drag and move individual vertices for closed paths
+- move individual vertices for open paths.
+
+An activated shape is deleted by cliking on the `eraseshape` button.
+
+Drawing or modifying a shape triggers a `relayout` event, which [can be captured by a callback inside a Dash For R application](https://dash.plotly.com/interactive-graphing).
+
+```{r}
+library(plotly)
+
+library(plotly)
+library(EBImage)
+
+img = readImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg')
+
+fig <- plot_ly(type="image", z=img*255) 
+
+fig <- layout(fig, dragmode="drawrect", xaxis = list(title = 'Click and drag inside the figure to draw a rectangle or select another shape in the modebar'))
+
+fig <- fig %>%
+  config(modeBarButtonsToAdd = list("drawine", "drawopenpath", "drawclosedpath", "drawcircle", "drawrect", "eraseshape" ) )
+
+fig
+
+```
+
 ### Reference
 See [https://plotly.com/r/reference/#image](https://plotly.com/r/reference/#area) for more information and chart attribute options!
