Experiment of testing rendering performance tradeoffs a few years ago (= don’t worry about the code, it was a throwaway). I was unhappy with SVG and naive Canvas rendering and prototyped with this infinity revolver concept. There are many other ways of getting better results with simpler code or WebGL.
A main motivation for a line bundle consisting of hundreds or thousands of lines is to either show a population of related time series (e.g. financial assets) or to show the probability distribution of a stochastic process intuitively. This type of visual works best when some key line(s), e.g. expectation or selected asset(s) show up in salient colors against the backdrop of a muted grey line bundle.
The red bars show the actual visible window; what’s outside is just a developer view. Rendering is only done when one of the two revolver panels go out of view and come back on the other side (this example uses two panels only, which is enough for this task).
A perhaps interesting feature of the solution is that time series of arbitrary chunks can be loaded; each line is comprised of blocks of whatever lengths. It’s evidenced by how the time series lines end at various X coordinates in the developer view (outside the red window). Each block is either not rendered or rendered fully.
The prototype uses a kinetic scroller and “bonds” the small infinity revolver with a prerendered, very long SVG axis, which is just translated, avoiding text rendering on panning.
The time series are simple discretized Brownians. Only 100 time series are displayed though the scrolling works nicely till around 1000 time series (haven’t bothered speeding up the data generation).
Uploaded with blockbuilder.org