Plotting an increasingly larger array of data

Community Help
1

I trying to make a plot (histogram for example) of datasets that gets added observations to when the user clicks a button. Here is a bare bone example: Adding data to array and plot histogram after each added data point / Mattias Villani | Observable.
The problem is that the data array gets updated, but is not reactive. So the notebook only works if the user runs the cell with the histogram after having clicked the button to update the data.

I understand that I am doing something weird here, probably against the reactive philosophy of Observable, but I hope that you can excuse a newbie.

Thanks!

1 Like
2

You can simply add one line so that the bar plot depends on counter. Perhaps something like so:

reactive_barplot = (counter,
Plot.plot({
  marks: [
    Plot.ruleY([0]),
    Plot.rectY(data, Plot.binX({ y: "sum" }, { x: "x", thresholds: 10 }))
  ]
}))

Hereā€™s the result:

And hereā€™s what the bar plot might look like after a few pushes (though, I guess itā€™s random):

reactive_barplot
reactive_barplot1280Ɨ800 9.13 KB

1 Like
3

Thatā€™s great, and solves my problem! Thanks!

Hope you have the time with some follow up questions, to understand the solution, and the etiquette for how to behave in this forum:

  1. I can see that the (counter, plotObject) syntax does two things: i) since counter is now in this cell, the plot become reactive to changes in the counter, ii) it returns the last of two object in the parentheses, which displays the plot. Where can I read about the (counter, plotObject) syntax? Seems like a tuple for me, but is not, and why does it return only the second argument? Is this is hack/shortcut to get reactivity for my setting, or is it part of the observable/javascript philosophy?
  2. Is there a better way to achieve my goal? I am fine with this solution, but I would like to know if this was a ā€œhackā€ to solve my problem?
  3. Etiquette: I saw that you forked my notebook in order to answer my question, which is a great boon of Observable. Will you keep this fork for posteriority, and if so, for how long? Should I keep my notebook so that people can dig back to my original question?

Thanks a lot for your help, and sorry for my questions, but I have been really impressed by Observable and I want to learn this well. It will revolutionize my teaching.

4

If youā€™re coming from a Python background, then I can see how it would look like a tuple. Youā€™re correct that itā€™s not a tuple but it is quite standard Javascript. More precisely, according to the MDN docs:

The comma (,) operator evaluates each of its operands (from left to right) and returns the value of the last operand.

I definitely would not call this a hack; itā€™s quite a standard way to force one short cell to depend upon another. I guess I might more typically write:

{
  counter;
  return Plot.plot({
    marks: [
      Plot.ruleY([0]),
      Plot.rectY(data, Plot.binX({ y: "sum" }, { x: "x", thresholds: 10 }))
    ]
  });
}

This would certainly be preferred if you require more complicated code to produce the output. I just happened to go for the shorter route this time.

Yes. Iā€™ve got a whole collection of forum responses. :slight_smile:
I donā€™t think thereā€™s really an established etiquette surrounding this, though.

Iā€™m happy happy to answer questions when I can but, like most folks, my time is kinda variable. And I agree about Observable - itā€™s really quite awesome!

2 Likes
5

Great answers, thanks you so much for your patience!

3 Likes