flekschas / regl-scatterplot

Scalable WebGL-based scatter plot library build with Regl
https://flekschas.github.io/regl-scatterplot/
MIT License
185 stars 21 forks source link

Connecting all points via a single line does not work #125

Closed flekschas closed 1 year ago

flekschas commented 1 year ago

When one tries to connect all points via a single line, the line connection does not show up.

E.g., the following example does not work

const scatterplot = createScatterplot({ showLineConnections: true, ... });

scatterplot.draw(
  new Array(10)
    .fill()
    .map((e, i) => [-1 + (i / 6) * 2, -1 + Math.random() * 2, i, 1, 0])
);

However, as soon as one attempts to draw two lines by simply changing the last point component from 0 to i % 5 the lines are drawn correctly.

E.g.:

const scatterplot = createScatterplot({ showLineConnections: true, ... });

scatterplot.draw(
  new Array(10)
    .fill()
    .map((e, i) => [-1 + (i / 6) * 2, -1 + Math.random() * 2, i, 1, i % 5])
);

A simple fix is to flatten the curvePointValues array as follows:

          pointConnections.setPoints(
            curvePointValues.length === 1
              ? curvePointValues[0]
              : curvePointValues,
            {
              colorIndices: getPointConnectionColorIndices(curvePointValues),
              opacities: getPointConnectionOpacities(curvePointValues),
              widths: getPointConnectionWidths(curvePointValues),
            }
          );
pramod-bls commented 1 year ago

Thank you very much!