I’m not plublishing a library yet, because it needs more work to have a truly nice API. I want to show it here so that people can give some fedback.
The main ideas are:
initialize a plot, and put it in your model.
use the draw function for plots in your view.
push in new points from the right, and the drawing will update.
I intend to keep the configuration choices really minimal and specialized to a few use cases. For now, you can choose
The maximum number of points that the plot keeps. This helps performance and indirectly defines the speed at which the plot scrolls by.
The y-axis range: keep it within fixed bounds, or have the range change depending on your data.
The x-axis behaviour: have a sliding window, or accumulate all the points forever, making the plot ‘shrink’ along that axis.
Let me know what you think. Personally it has already helped me so much to visualize what’s happening in the simulation that I’m working on (for example, I had a huge bug in calculating ‘potential energy’ in the simulation above, which I missed just looking at the numbers. The plot for ‘total energy’ made the bug completely obvious).
If you use it in your project, I would love to see it! You can just plop TinyPlot.elm in your project and use it.
I love what you have done! I tried to rig up something in the past using elm-plot, you can see the results here (code). It uses a deque for the data storage but I never really implemented any features taking advantage of the deque. Your proposed library already has a lot of what I would need in my own use-cases.
I think the most important feature missing from your library as it relates to my use-case is x and y axis tick labels (which I am fully aware are a pain to implement). My users will initiate actions in the simulation and would have to visually determine how much time elapsed until a new steady state condition was reached and perhaps the difference between the old steady state and the new one. A possibility to address this is to perhaps incorporate elm‑visualization into your tiny library since it already does some labeling calculations.
Another idea to consider in terms of the x-axis behavior. Many commercial solutions to “real-time” plotting have a stepped type of x-axis (besides Sliding and Accumulative). In this case, the x-axis will always have the same size domain (say 0 to 100, later 20 to 120, later 40 to 140, and so on). Once the data has reached the end of the x-axis, it steps the minimum and maximum values of the x-axis accordingly.
Anyways, great job with the library. It looks very nice and it is a great addition to the burgeoning visualization ecosystem for elm. Kudos!
Somewhat offtopic, but I noticed that the animation would pause every couple of seconds in firefox. I assume GC pauses, but the problem would disappear as soon as I started the profiler. Browsers are so confusing.
@sturgman: Thanks! Adding axis tick labels is completely reasonable, I don’t think it should be too hard to implement for something this simple.
I only realized a bit too late that using elm‑visualization would maybe be smart (elm vega is another one), but I also kind of like the less-general features of a smaller library. Maybe there is space for both general-purpose dataviz construction libraries, as well as smaller opinionated single-purpose ones.
Can you elaborate on “Stepped”? As I understand, the combination of Sliding and the maximum number of points comed down to that. I guess it’s relevant here that my x-axis doesn’t really have any units, so the points are equidistant from each other.
@wbrian: Thanks! Not off-topic at all, have you tried using the version that counts frames per second? I imagine if it pauses, you would see a blip of FPS going to 0?
