title: plotly colorbar and colorscale for multiple traces
body: <p>I'm trying to plot the data for various months, with different traces representing a year for data in a timeseries like <code>dataframe</code>. My desired output is an interactive version of the graph below, given a long <code>data.frame</code>. (data and code given below)</p>
  
  <p><a href="https://i.stack.imgur.com/LQ9wQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LQ9wQ.png" alt="enter image description here"></a></p>
  
  <p>visual inspection of data - </p>
  
  <pre><code>          y year       time
  1  15.70525 2005 0.41666667
  2  15.82955 2005 0.50000000
  3  17.55470 2005 0.58333333
  4  18.10086 2005 0.66666667
  5  17.49667 2005 0.75000000
  6  19.34727 2005 0.83333333
  7  20.03129 2005 0.91666667
  8  23.48669 2006 0.00000000
  9  12.53699 2006 0.08333333
  10 15.46702 2006 0.16666667
  </code></pre>
  
  <p>A <code>ggplotly</code> solution exists, but I want to avoid it. Thus, in native <code>plotly</code>, how to - </p>
  
  <ol>
  <li>Plot multiple traces in a long <code>data.frame</code> with the data for each trace defined by a grouping variable.</li>
  <li>Define a custom <code>colorscale</code> on the <code>colorbar</code>.</li>
  </ol>
  
  <p>I have a working solution for 1, but am not sue if it's the idomatic way in <code>plotly</code>; however, I'm completely stuck on 2.</p>
  
  <p>I achieved point 1 by converting the data from long to wide and adding a trace for each column. For some predefined colours, my approach is below - </p>
  
  <pre><code>library(plotly)
  yr.names &lt;- as.character(unique(data[['year']]))
  colours &lt;- c("#F8766D", "#7CAE00", "#00BFC4", "#C77CFF")
  data &lt;- stats::reshape(
    data = data, direction = 'wide', idvar = c('time'), 
    timevar = 'year', v.names = 'y'
  )
  colnames(data)[2:ncol(data)] &lt;- yr.names
  data &lt;- data[order(data[['time']]), ]
  p &lt;- plot_ly(data = data)
  for (i in seq_along(yr.names)) {
    p &lt;- add_trace(
      p = p, y = data[[yr.names[i]]], x = ~time, name = yr.names[i], 
      type = 'scatter', mode = 'lines', line = list(color = colours[i])
    )
  }
  p
  </code></pre>
  
  <p>This yields - 
  <a href="https://i.stack.imgur.com/ygaTG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ygaTG.png" alt="enter image description here"></a></p>
  
  <p>Next, how do I tell <code>plotly</code> that <code>year</code> in my case is a continuous variable? In other words, how do I manually define a <code>colorbar</code>/<code>colorscale</code> that will do what I want it to do?</p>
  
  <p>Here's my attempt that does not work - </p>
  
  <pre><code>nCol &lt;- length(colours)
  colourscale &lt;- data.frame(
    y = seq(0, 1, length.out = nCol), 
    col = as.character(colours)
  )
  p &lt;- plot_ly(
    x = seq(0, 1, length.out = nCol), type = 'scatter', mode = 'markers', 
    y = mean(data[[yr.names[1]]], na.rm = TRUE), hoverinfo = 'none', marker = list(
      size = rep(0, nCol), color = as.numeric(yr.names), colorscale = colourscale,
      colors = colours, 
      colorbar = list(
        title = 'Year', nticks = nCol
      )
    )
  )
  for (i in seq_along(yr.names)) {
    p &lt;- add_trace(
      p = p, y = data[[yr.names[i]]], x = data[['time']], name = yr.names[i], 
      type = 'scatter', mode = 'lines+markers', line = list(color = colours[i]), 
      showlegend = FALSE
    )
  }
  p
  </code></pre>
  
  <p>This yields - </p>
  
  <p><a href="https://i.stack.imgur.com/csZoS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/csZoS.png" alt="enter image description here"></a></p>
  
  <p>which is not obviously not correct. Any pointers?</p>
  
  <h1>Data for the question</h1>
  
  <pre><code>data &lt;- data.frame(
    y = c(
      15.705248, 15.82955, 17.554701, 18.100864, 17.496668, 19.347265, 
      20.031291, 23.486694, 12.536987, 15.467018, 14.233539, 17.783058, 
      16.291602, 16.980282, 18.612189, 16.623343, 21.430241, 23.575517, 
      23.334206, 28.038383, 16.763869, 19.792754, 16.427305, 21.000742, 
      20.681002, 21.83489, 23.93020353, 22.93035694, 23.26333992, 
      25.25003022, 25.80609, 29.665356, 21.654285, 18.264945, 23.107677, 
      22.91251, 19.43174
    ), year = c(
      2005, 2005, 2005, 2005, 2005, 2005, 2005, 2006, 2006, 2006, 2006, 
      2006, 2006, 2006, 2006, 2006, 2006, 2006, 2006, 2007, 2007, 2007, 
      2007, 2007, 2007, 2007, 2007, 2007, 2007, 2007, 2007, 2008, 2008, 
      2008, 2008, 2008, 2008
    ), time = c(
      0.416666666666667, 0.5, 0.583333333333333, 
      0.666666666666667, 0.75, 0.833333333333333, 0.916666666666667, 
      0, 0.0833333333333333, 0.166666666666667, 0.25, 0.333333333333333, 
      0.416666666666667, 0.5, 0.583333333333333, 0.666666666666667, 
      0.75, 0.833333333333333, 0.916666666666667, 0, 0.0833333333333333, 
      0.166666666666667, 0.25, 0.333333333333333, 0.416666666666667, 
      0.5, 0.583333333333333, 0.666666666666667, 0.75, 0.833333333333333, 
      0.916666666666667, 0, 0.0833333333333333, 0.166666666666667, 
      0.25, 0.333333333333333, 0.416666666666667
    )
  )
  </code></pre>