Tools for Scientific Computing in Ruby

The Nyaplot Internal Event Handler

Nyaplot multi-pane example


Last week I implemented the multiple panes interactivity to the front-end of Nyaplot. You can see the demo on this notebook.

Skip over single pane demo, and have a look at the paragraph ‘Multiple panes demo’ at the bottom. In this example, the histogram and bar chart are created individually, and then thrown into one instance of Nyaplot::Frame. After running, both of the diagrams appear in one out-put box on the notebook. When you click the histogram, bar chart refrects that and change its height.

In this article I will explain about the event handler of Nyaplot, which allows for interactivity among panes.

The Trick

The trick is actually hidden in Nyaplot::DataFrame. In this example, both of the two diagrams are generated from columns in one DataFrame. When Nyaplot receives a column object (instance of Nyaplot::Series, defined here), it internally find its source data frame and remembers its location.

Consequently, Nyaplot can find that histogram and bar chart are sharing their data source, and allows them to interact with each other.

Nyaplot::DataFrame Example


Before explaining the event handler, I want to outline Nyaplot’s diagram rendering procedure. In the back-end JavaScript library, diagrams, such as histograms, fetch column data from data frames and generate their SVG DOM nodes dynamically (source code).

The key is a data frame written in JavaScript. After mouse events coming from a filter (such as the gray box on the plot area) are handled, the histogram registers its filter function to the data frame and instructs all diagrams to update their SVG DOM objects. The bar chart updates its SVG from data filtered by the new function.

As you can see, Nyaplot’s inner workings are fairly simple; and these workings are common to all diagrams supported by Nyaplot. So not only the histogram and bar chart, but other diagrams as well, can behave interactively (e.g., histogram, bar, and Venn example).


Despite, or perhaps because of, the relative simplicity of the structure, the event handler functions well. The actual interactivity in Nyaplot is based on the data frame object, both in the Ruby front-end and the JavaScript back-end. As a result, handling events in DataFrame is both natural and efficient for Nyaplot.

Additional Information

Nyaplot and its back-end library Nyaplotjs are being developed on GitHub.

If you are interesed, feel free to try it and raise issues or send pull-requests.