Series Options

[janga1997]

The next step for me is the individual series options.
While you can set options such as fillGraph and stepPlot for all the y-values universally, dyGraphs also allows us to set those options per series.

http://dygraphs.com/options.html#Series

Example Plots - https://rstudio.github.io/dygraphs/gallery-series-options.html

This would be a great addition to have, but I am not entirely sure how to deal with these.

[janga1997]

The most easiest way I can think of is a functionseries

import dygraphs.graph as dy

series1 = dy.series('line1', stepPlot=True)
series2= dy.series('line2', fillGraph=True)

----------------
fig.plot(x, y, series1, series2, color=['red'])

and internally,

def plot(self, x, y, *series, **kwargs):
    self._series = series 

Here series will be a tuple of all the series passed to function, and will be empty is nothing is passed, since the * makes sure that it is optional
But, the series arguments must be passed before the named arguments.

So something like this would not be possible.

fig.plot(x, y, color=['red'], series1, series2)

OR 
fig.plot(x, y, series1, color=['red'], series2)

[dinkelk]

Interesting! I think that your series object idea would certainly work, but it does seem different from plotting utilities I am used to. In both matplotlib and matlab, you would handle plotting multiple lines with different settings (ie. colors, stepPlot, fillGraph, etc.) by making multiple calls to the plot() function before calling show(). Here is a matplotlib example:

import matplotlib.pyplot as plt
plt.figure()
plt.plot(x, x, 'r')
plt.plot(x, 2 * x, 'g')
plt.plot(x, 3 * x, 'b')
plt.plot(x, 4 * x, 'k')
plt.show()

It would be nice if this library behaved similarly, ie.:

import dygraphs.graph as dy
fig = dy.figure()
fig.plot(x, x, stepPlot=True)
fig.plot(x, 2 * x, fillGraph=True)
fig.plot(x, 3 * x, color='orange')
fig.plot(x, 4 * x, color='red')
fig.show()

Do you think that kind of interface feasible with the current design? It seems like every call to plot could create a dygraphs series internally. When show() is called all those series can be rendered correctly with their per series settings.

[janga1997]

@dinkelk We will have to change how plot works fundamentally.
The way it is now, and the way the JS library is designed, is that multiple y-series can be plotted from a single command.
So instead of

fig.plot(x, x, stepPlot=True)
fig.plot(x, 2 * x, fillGraph=True)
fig.plot(x, 3 * x, color='orange')
fig.plot(x, 4 * x, color='red')

a single

fig.plot(x, (x, 2*x, 3*x, 4*x))

would be enough, but customizing each y-series is cumbersome.
I will have to think on this a bit, as to how to implement this to make this more closer to matplotlib.

[dinkelk]

Does dygraphs allow more than one set of x data on a graph? If not, then the interface I am asking for doesn't make much sense, because we would be implicitly assuming the user uses the same 'x' variable for each 'y' series they want to plot. If dygraphs does allow unique sets of x data on a single graph then I think the matplotlib-like interface makes a lot of sense.

From the user perspective the procedure seems pretty straight forward:

1. Create a figure you want to populate
2. Populate the figure with as many plots as you would like, with each plot having unique formatting
3. Show the figure

In this paradigm, I think dropping the multiple-y-series-in-a-single-plot functionality is totally acceptable.

In terms of implementation, it seems feasible to create a list of "series()" objects - one getting created for each plot call. And then when show is called, we use those objects to generate JS for dygraphs.

[janga1997]

Dygraphs does allow that, but there are a couple more steps in between.
Check this link. http://dygraphs.com/tests/independent-series.html

[janga1997]

in matplotlib, it does seem to take y input with multiple series
For example,

x = np.random.random(size=(10))
y = np.random.random(size=(10, 3))
plt.plot(x, y)

would return

[<matplotlib.lines.Line2D at 0x7f621ff8e550>,
 <matplotlib.lines.Line2D at 0x7f621f8d93c8>,
 <matplotlib.lines.Line2D at 0x7f621f8d9da0>]

I think the Line2D object is analogous to our Series object. Like you mentioned, we have to create a set of Series objects every time plot() is called, and when show() is called, merge all the series, and their corresponding options in some way, into a single numpy array, as dyGraphs cannot do that on its own. (See link in previous comment.)
definitely possible, but a little bit more work on our side. But would be awesome to have.

[dinkelk]

Thank you for that link. That is tricky indeed. It would definitely be good to support independent series (unique x axis) in the lib, because forcing the user to union their x-axes vectors and intersperse null values in their y vectors is a real pain. It would be nice if we did that for the user internally.

I was unaware of the Line2D object. You are correct, that is the same as the Series object. So to me it seems to boil down to a few options.

1. plot() takes normal x/y vectors with a single set of visual formatting options. We don't expose the Series object to the user. Maybe we need to enforce that only a single x/y pair is plotted with each plot() call in this paradigm? Or maybe we can get away with plotting multiple x/y pairs in a single plot. The key is that each plot() call determines a single set of formatting for those plotted lines.

2. We expose the Series object to the user, and plot() takes any amount of Series objects as input. Each series object contains all of its formatting information. It kind of feels weird to me to allow both naked x and y and Series objects in a single plot() call. ie, I am not sure I like this idea:

fig.plot(x, y, series1, series2, color=['red'])

I am leaning towards option 1, since as a user it seems simpler if I don't have to learn what a Series object is in addition to learning about the plot() function. What are your thoughts?

[janga1997]

The second one is easier to implement, and the first one is easier to use.
We should go for the first one.

But we have to figure out how to properly merge all the Series objects generated internally on calling fig.show(). But definitely doable.

[dinkelk]

Sounds good. There might be some trickery in numpy that could help us out. But the brute force method would be to create one long x-axis by picking the smallest remaining out of x1, x2, x3 etc. At the same time create your separate y axes, putting in the proper y value if it has the corresponding smallest x at that point, otherwise put in null for that y axis.

Here is some psuedo code:

# Input set of x and y vectors
xlist = [x1, x2, x3, etc..]
ylist = [y1, y2, y3, etc..]

# The x and y vectors we want to give to dygraphs
new_ylist = [[], [], [], etc...]
new_x = []

# Large number to help with finding the minimum:
max = maximum_number_in_xlist(xlist)

# Populate the x and y vectors:
while True:
  # Find the smallest x value remaining among all the x vectors
  minIndex = max
  for index, x in enumerate(xlist):
    if x.peek(0) < minIndex:
      minIndex = index
  
  # Add to the x vector
  x.append(xlist[minIndex].pop(0))

  # Add to the y vectors
  for index, new_y, y in enumerate(zip(new_ylist, y_list)):
    if index == minIndex:
      new_y.append(y.pop(0))
    else:
      new_y.append("null")

You can probably come up with something sexier...

[janga1997]

@dinkelk I didn't understand your pseudo code completely, but if I am not wrong, it may rearrange the input data into ascending order, w.r.t to the x values.
For example, if input data

x = """
      1, 2
      3, 6,
      -1, 0
      """

it might rearrange it to
"""
-1, 0
1, 2
3, 6
"""

That should be a potential problem, right?

Edit: I've tried a few approaches to merging our data by using numpy's and pandas' core functions, but the problem of sorting by x-value remains.
Sorting the data implicitly doesn't seem right.

[janga1997]

@dinkelk How's this for a compromise (kinda similar to how dygraphs for R works)

x = *Some Data*
y1 = *Some Data*
y2 = *Some Data*

labels = ['first', 'second']

# Create Series objects in the background
plt.series('first', stepPlot=True, strokeWidth=5)
plt.series('second', strokeWidth=3)

# Add Data, and options set here will be global.
plt.plot(x, (y1, y2), labels=labels, drawPoints=True)

# All the Series options objects in the background are added to the plot
plt.show()

[dinkelk]

@janga1997 - what my pseudo code intends to do is essentially turn this:

x1 = [1, 4, 7]
y1 = [3, 17, 5]
x2 = [2, 5.5, 6]
y2 = [17, 27, 4]

into this

x' = [1, 2, 4, 5.5, 6, 7]
y1' = [3, null, 17, null, null, 5]
y2' = [null, 17, null, 27, 4, null]

The first set of data contains a unique x axis with each y axis, which is the ideal input for the plot method, ie.

plot.plot(x1, y1, **options)
plot.plot(x2, y2, **options)

Internally my little pseudo code would turn x1, x2, y1, and y2 into x', y1', and y2' which, from my understanding, are in the perfect format for plotting with dygraphs, according to this.

The key deficiency with your compromise is that it doesn't allow a unique x-axis to be associated with each y axis data. Does that make sense? Am I missing something?

[janga1997]

@dinkelk Both x1 and x2 in your example have data in the ascending order.
What happens when x1 = [4, 1, 7] and x2 = [6, 2, 5.5] ?
If I understand your code correctly it would convert it to x' = [1, 2, 4, 5.5, 6, 7].

The plot for x1 = [4, 1, 7] and x1 = [1, 4, 7] would be starkly different.

Therefore, we are destroying the original order in which data was supplied to us, by sorting it according to the x-values.