Polar line graphs (or graphs where one axis happens to be circular)

[Qanpi]

Hey!

I know you've mentioned the philosophy and underlying assumptions of uPlot center around shared-x, large data series.

That said, I was wondering if there has been thought of supporting polar line graphs like below. In many ways, they are similar to a standard shared-x line plot, except one of the axes happens to be circular.

The chart above to my shallow understanding should not break any of the axioms of uPlot. That said, the next example is slightly different as it hints at the possibility of having multiple datapoints with the same x value. I thought to include it anyway to get your thoughts on whether you think it's a) possible, b) reasonable to support these kinds of graphs too.

[leeoniya]

i think it would be good to add support for this but it's not super simple. some not-straighforward things that quickly come to mind:

• cursor selection and zooming? right now it's a [square] div in the DOM but would need to become a slice of a donut. should be possible with svg, but then would be good to make both uniform and migrate the cartesian selection to svg also (easy).
• selection sync. i dont see a quick way to sync a polar selection that spans the 0/360 crossover to cartesian uPlots. it would require a split selection with more than one range.
• axis auto-sizing and padding calculation, not hard but would likely need different logic
• how should line drawing/interpolation work? is a line connecting two points on same radius always be an arc?

generally you're right that polar/radial plots should be possible within uPlot's paradigm, but it's not quick addition.

[leeoniya]

on the other hand maybe you're not actually needing a polar plot, but simply a cartesian plot with a centered 0,0 and an overlay 🤔

[Qanpi]

If you mean transposing the polar coordinates onto a cartesian plot and then 'faking' the circles around, then I suppose that works in the case of the first example.

In the second example though (or e.g. the first example but where the plotted line looks like a spiral), you'd have two y-values for a single x-coordinate if you're thinking in cartesian terms (straight line test).

[leeoniya]

uplot has mode: 2 that allows multiple unaligned datasets and arbitrary x/y pairs in each. i think it might be useful to take the scatter/bubble plot demos and see what we would need to add to axes options to support this use case. i think it should be fairly minimal without having to support a "real" polar coord space, which imo is much more niche to mathematics domains than what we're trying to do here.

[Qanpi]

Okay, that's nifty.

Still not sure if I completely understood the mechanics behind 'connecting the dots' though. In particular, I can see how you'd be able to plot a bunch of dots/points in a way that mimics the polar coordinate space. But if you want a line between them, how do you ensure the proper order of connecting them?

I assume (possibly incorrectly) that uPlot currently connects datapoints in order of their x-value. Even if the connection could be made in the order of which the data is presented to uPlot, that would require the consumer to sort the data points in a 'polar' order. This sorting operation would be practically working with the polar coordinate space anyway.

[leeoniya]

that would require the consumer to sort the data points in a 'polar' order.

why?

if you're building something like a radar display, there is no order, or connections.

if you're building something like a bearing indicator with a gps track, then the order of the data is the order of the connections.

the reason uPlot's mode: 1 requires time ordering and unique timestamps is because the linear path builder does visual downsampling and the cursor hover logic uses a binary search over the x values. neither of these applies to arbitrary/unordered xy pairs, where you would write a much more simple path builder that consists only of lineTo() calls on each data point. the cursor/hover behavior uses a spatial index (quadtree atm) in the scatter demo which doesnt require specific data ordering.

are you thinking of some specific use case where the connection order and the natural data order will diverge?

[Qanpi]

I suppose you're right.

In that case, one could technically just get away with a polarToCartesian() and a visual makeover of one of the axes. I'm not sure if the donut/slice selection is even a desired feature, as opposed to perhaps the more intuitive rect.

[jackplourde]

Adding onto this for a similar use case, but rather looking at a scatter polar-plot, that plots the time history as a gradient like in the image below. This doesn't require lines connecting the data points. Currently using plotly plugin for this but its very heavy weight and would enjoy a direct grafana solution for this

[leeoniya]

i'm not quite sure what the above plot is showing me, would you mind explaining how to interpret this, and link to some places or use cases where this is a de facto type of viz?

[jackplourde]

Sure thing!

The plot above was used to track a gimbal. So the angle-axis of the plot above is tracking gimbal heading and the radial-axis is tracking gimbal angle. It's essentially a time-series scatter plot, where the darker points are the most recent values from streaming data and the lighter points are less recent. Here is another example of the plot below, but instead using a random data source, so not tracking anything real.

[jackplourde]

So yeah to be clear for me the use case for this vis is being able to report the absolute location of a gimbal. Which is much more intutive to represent in a polar coordinate space

[jackplourde]

So some use cases I see for this:

• Thrust vector visualization for aircraft or rockets
• Antenna patterns
• Wind speed/direction
• Vibration analysis (or any case where you plot amplitude against phase)
• Radar systems

[leeoniya]

all of these things can still be represented with Cartesian, just with a polar/radial axes overlay and a data transformation from a/r to x/y coords as long as none of these cases expect:

1. the cursor & drag-selection to polar
2. line interpolation between consecutive points to follow a real polar coordinate space