Hi,

I have this requirement to horizontally and vertically scroll the scatter-plot. When we are zoomed in, it becomes difficult to see the hidden data points.

I understand that we can perform the horizontal scroll by two fingers mouse down + mouse move event but the operation is not very user friendly. I was hoping for something like what google map does to move around the map.

Thank you.

Currently in 3D mode, it is possible to define a set of points in the space such that performing a specific rotation of that space hides the entire dataset behind what appear to be a draw distance shader positioned at the origin.

While there may be good performance reasons to enable a draw distance shader by default, it would be nice if we had:

• A disable: boolean flag that turns that shader off
• [Optional] If possible, a drawDistance: number = 0 property that sets the distance from the origin along the view-plane normal (VPN) at which the draw distance shader takes effect. drawDistance === 0 (default) should start the effect at the origin, drawDistance > 0 should move the shader away from the origin and camera along VPN, and drawDistance < 0 should move the shader to a point between the origin and camera along VPN.

Hi,

Thank you for this very useful library.

I have a query regarding sprites render mode.

Currently, the number of small sprites present in the image should be equal to or more than the number of data points on the plot. Is there a way to reuse these sprites and avoid repetition?

I have repetitive images and want to reuse the same image for multiple coordinates.

Thanks.

Why not all points get selected when there is overlap between points? Is it possible to fix it?
Example:

Point selection when zoomed out:

Points actually selected:

Thanks for the lib. it's very helpful!

Hi,

I don't know if it's a bug or I am doing something wrong. Need help here.

I have a requirement to change colors based on certain user actions. Once the colors are changed using setPointColorer and I try to select one or more data points the selection does not appear on UI.

I get the selected data points in onSelect method but the selected points are not highlighted nor do the unselected point's opacity is changed.

outline: none;

This makes plotting lots of points significantly faster because colors do not have to be parsed

Hello, I have two questions.
How can I change the data from 2D to 3D format?
Can the points in it be defined as different types of points as different colors?

I just noticed a "console.log" left on latest commit of scatter_plot.ts ://github.com/PAIR-code/scatter-gl/commit/a9e8a816754d53ef573a38df9df7c4d58c7c329f#diff-9298a6445b2ddc4745fb5b8a7229a041b60594f3ea841df333e5d7d4fb4d3053R223

It's not substantial! thanks

This was mentioned as a desired feature request by a few LIT users; it'd be nice to ctrl-click to select multiple datapoints in the embeddings projector.

number[][]?

The current version in the npm doesn't include the fix in #26. Is there any chance we can get an update on the npm with fix?

Describe the current behavior

Given a dataset of (x, y, z) points, if all values of the z dimension are the same, the points will not appear on the visualizer. This only works for the image and point rendermodes; the text rendermode is unaffected.

Describe the expected behavior

The points are expected to appear.

Standalone code to reproduce the issue

Adding the line vector[2] = 0 after line 26 in index.ts will replicate this issue.

If I pass in a sprite image to the scatter GL dataset as an HTML Image element, it initially renders fine, but when something changes in my data that requires a scatter plot render() call, the datapoints no longer render at all, but they are invisible. They can still be interacted with, such as clicking, but they can't be seen.

If I pass in a sprite image as a string path to a static image, I don't get this same problem.

I have a requirement to be able to click and make a certain action on labels that appear on hovering or clicking a datapoint.

This feature would be great to have.

Hello @cannoneyed!

This is a very nice little library, thanks for extracting this functionality from the main tensorflow projector. I'm finding it very useful in a project i'm working on.

I found a small bug in the label rendering - when using a 2D canvas and points are selected, an "undefined" string label is also rendered at the same time. This occurs in the github pages demo also. I am not quite sure why this is happening, but two additional details:

1. the undefined label occurs on the very first point that is passed in the dataset
2. It only occurs for the canvas renderer, so I wonder if it is related to a 3d ScatterPlotVisualizer which is attached to the ScatterPlot, which is subsequently not removed when the renderer infers the dataset dimensionality. Also, disposeAllVisualizers here is never called, I think.

Anyway, thanks for the library - let me know if I can contribute a fix, if it's obvious to you what the problem is. Ta!

Hi,

I would like to implement a scenario in which we can show the labels for x, y and z axis for 3D scatter plot.

While exploring an unrelated bug, I noticed that ScatterGL uses offsetWidth and offsetHeight properties of its container to set the size of the canvas it renders into.

As the offsetWidth and offsetHeight return the integer values, this can induce horizontal and/or vertical scroll bars in containers if one dimension is not an integer. See the following screenshot from LIT.

One solution is to take the floor of the width and height from getBoundingClientRect() so that it's guaranteed to be at most 1px smaller in each dimension, thereby avoiding scroll bars. Another solution is to support float values for canvas dimesions.

I have tried changing the point color to a lighter color when backgroundColor is say black, but it doesn't change.
here is the code:

scatterGL = new ScatterGL(
      document.querySelector('#scatter-gl-container'),
      { 
        'rotateOnStart': false, 
        'selectEnabled': true, 
        'styles': { 
          backgroundColor: '#000', 
          axesVisible: false,
          point: {
            colorUnselected: '#111',
            colorNoSelection: '#fff', // color defaults to black
          }
        }
      } 
    );

Hi,

When I change the dimension from 3D to 2D and vice versa using the setDimensions(nDimensions: number) method, the original camera parameters (camera position & camera zoom)which were passed in the constructor are not retained, they are overridden with the default camera parameters.

I think these parameters should be passed when calling the makeCamera() method.

Thank you.

We could convert Dataset to an interface with getX(index), getY(index), getZ(index) methods so users could store positions how they desire.

If you select some datapoints and then use click and drag to rotate the graph, unclicking the mouse to end the rotation probably shouldn't be treated as a "click" which causes selection to change based on where the mouse pointer is.

Maybe we ought to expose a function that instantiates the ScatterGL instance and begins rendering, rather than tying it to the constructor.

Hi,
This is a great light 3d/2d scatter plot, thanks!
I'm trying to make it work on observablehq but got this error. I'm not sure if I've figure it out, seems like some Threejs version problem.

TypeError: Cannot read property 'ROTATE' of undefined
I've also notice you're using a specific orbit three-orbitcontrols-ts package, and I'm not sure how to load it on observablehq to make it compatible with scatter-gl

https://observablehq.com/d/e04e7853659f6530

thanks for the help

As A user when I click or hover clusters/or individual node I am able to add label and quick note about selected clusters/or individual node

Depending on the camera orientation/position in the space, it is possible and relatively easy to have labels extend beyond the viewable area and get clipped.

Would it be possible to implement intelligent label placement such that the label anchor is set to the closer of the two. sides of the viewable area (i.e., if the point is closer to the left side, the the text is anchored to the left and extends to the right, but if the point is closer to the right side, the the text is anchored to the right and extends to the left)? I think this would minimize clipping potential without the math getting too fancy.

I am wondering how to display custom HTML when we hover over the points. Right now only label stings are visible when we hover. Any idea or suggestions would be really appreciated.

Custom HTML - think a title, subtitle, some string, maybe some background color, image ...things like that.

If providing a sprite image in a scatter gl dataset to the render function, then later providing a different dataset to change what the plot renders, it seems that the images seen in the plot aren't being updated to show sprites from the new dataset.

In scattergl/scatter_plot_rectangle_selector.ts, the comments in the interface state that x and y refer to the bottom left coordinate, when they refer to the top right.

This is solely an issue in the comments; the rectangular selector works fine. This can easily be replicated/ verified by logging the bounding box.

When the mouse moves over a line in a sequence, onHover is called with null. The mouse is still over the point, but also on the sequence/line too.

Problems:

• When user clicks, they want to select the point, but scatter-gl does not think mouse is on a point.
• The point hover color change effect in my app flickers strangely as the mouse crosses over the line embedded in a point.

The three version specified in the package.json which is 0.108 doesn't produce polylines. If I use a bundler with npm package, I will not able to produce polylines.

I setup two codepen page to show case this issue
Scatter GL 0.0.4 w/ [email protected]: https://codepen.io/stevenguh/pen/VwvLwve
Scatter GL 0.0.4 w/ [email protected]: https://codepen.io/stevenguh/pen/PoPqomK

Viewing https://pair-code.github.io/scatter-gl/ with 3D disabled and label-based color, it seems that some (non-opaque) points do not let the points behind them be shown.

Here is a zoom of an region of the demo, where, e.g., the yellow-ish point in the middle blends with one of the red circle but not with the other.

Same thing with lower opacity

It looks like the transparency gets kind of premultiplied with the background color.

This behavior makes one of my use case very unusable, where some points have very low opacity points that hide more opaque ones.

Any idea, suggestion of where to start to hack for a fix, or a workaround is welcome.

Toggling data points on/off is a very useful feature, but we're not handling this case explicitly (either removing them entirely, or changing their color, which messes up mouse handling)