pointColor and category relations

[plankter]

Could you please clarify how to colorize point according to category? Am i right that category point values are should be indexes to pointColor array of hex RGB values?

I have two scenarios in mind:

1. There are two clusters of points, with points category values, for instance, 5 and 6. How i should map these categories to ["#b0b5fb", "#fbb0b0"] in colormap?

2. Category values are continuous float intensity numbers between, let's say, [0, 1]. How can i map these to sequential color map, that is calculated like:

import { scaleSequential, rgb, interpolateRainbow } from "d3";

const categories = [0.9142996651785714, 0.6185661394571521, 0.4210590563322369, 0.37805454905440167, 0.6646064142262713,…];
const min = Math.min(...categories);
const max = Math.max(...categories);
const colorScale = scaleSequential(interpolateRainbow).domain([min, max]);
const colors: string[] = [];
for (let i = 0; i < categories.length; i++) {
    colors.push(rgb(colorScale(i)).hex());
}

this.scatterplot.set({
    colorBy: "category",
    pointColor: colors,
});

It would be very useful to provide color values directly in point value array. Something like [x, y, category, value, "#fbb0b0"].

[flekschas]

Could you please clarify how to colorize point according to category?

Can you please point out which parts of the API descriptions are unclear so I can try to improve them?
For a concrete example see https://github.com/flekschas/regl-scatterplot/blob/master/example/index.js#L136-L137

How i should map these categories to ["#b0b5fb", "#fbb0b0"] in colormap?

For performance reasons, I am not evaluating a mapping function for every point. Instead, it's assumed that 0 refers to the first color, 1 refers to the second color etc. Hence, if your categories are 5, test, and 42.123 then you first need to map these values to 0, 1, and 2, and then provide three colors as the pointColor, and finally set colorBy to category.

Category values are continuous float intensity numbers

Categorical values are by definition not continuous ;) If you want to color by continuous values use colorBy: 'value' as shown here: https://github.com/flekschas/regl-scatterplot/blob/master/example/index.js#L139-L161
It's assumed that your values go from [0,1]. The shader than maps [0, 1] to [0, numColors - 1].
If you have continuous values and want to use categorical color values you first have to discretize the data. How you do that is up to you. E.g., if your data is in [-.1, 1337] and you want two categories: -0. to 42 and 42 to 1337 then you have to first convert any number in [-.1,42] to 0 and ]42,1337] to 1.

It would be very useful to provide color values directly in point value array. Something like [x, y, category, value, "#fbb0b0"]

It would be handy but also inefficient. I am rendering the points using a rgba float texture that allows to store 4 values: x, y, value, and category. If you want to load arbitrary colors you need another texture object. That is, of course, possible to implement but outside the scope of this package.

In general, to keep the implementation as fast as possible, I decided that the user is in charge of mapping the data. I hope this clarifies your questions.

[plankter]

Thank you for the explanation. I was confused because i thought that colorBy parameter was used only to select an appropriate value from point 4-values vector, but the visualization was different for colorBy: 'value' and colorBy: 'category', though both category and value were the same in the vector. Also it wasn't initially clear that values should be normalized to [0, 1] range (i suppose due to WebGL requirements).

Also i don't understand how to set initial panning of the scatterplot: changing target parameter from the initial [0, 0] value doesn't affect anything. In my case problem is that (0, 0) point isn't located at the center of the scatterplot component, but shifted to bottom right corner (see screenshot), and i would like to shift the view so the plot is centered.

I don't know if you can see it on the uploaded screenshot, but a selected point, which is located relatively in the center of the screen, has coordinates [X: -0.5
Y: 0.10666394233703613]. But probably i am missing something here.

[flekschas]

Thanks for clarifying, I agree the coloring isn't immediately obvious given :)
I'll try to update the README accordingly. Maybe I'll include an example.

Also i don't understand how to set initial panning of the scatterplot:

Mhhh this might very well be a bug, do you mind creating a separate GitHub issue? In theory, what you're doing should work. I'll take a look.

[plankter]

Thank you, i'll create new issue then.