Show different concentrations on scatter plots with different colors [closed]

Question

I have an app which parses data files on the clients browsers and displays a scatter chart. This is an example of a scatter chart with 10,000 data points:

This is an example of a scatter chart with 1.4 million data points:

My algorithm is crude and simple. I get the events in a correct format (eg if the canvas is 200px x 200px, and the the minimum and maximum values of the data are 0 and 262144, then the values (100000, 200000) would be plotted at (76, 47) Note: the 47 is 200-153 since with HTML Canvas its plotted from the top on the y axis, not bottom). Here's the Javascript:

    getFormattedEvents(enrichedEvents).forEach(
      (formattedEvent) => {
        context.fillStyle = formattedEvent.color;
        context.fillRect(formattedEvent[0], formattedEvent[1], 1, 1);
        if (
          formattedEvent[0] > width ||
          formattedEvent[0] < 2 ||
          formattedEvent[1] > height ||
          formattedEvent[1] < 2
        ) {
          pointsOutside.push([formattedEvent[0], formattedEvent[1]]);
          pointsOutsideCanvasCount++;
        }
      }
    );

You can see I also keep a count of any points that dont fall on the canvas (eg values outside of 0 to 262144 wont fall on the Canvas).

I want to do 2 things: Use 3 colors to show where the highest concentration of points is e.g. something like this:

And I also want to make the algorithm more efficient. Currently, if there are 1 million data points, I loop through 1 million times and plot on the canvas. So one pixel may get drawn on many many times.

Initially, I had an algorithm which checked the color of a point, and if it was already black (meaning already a point drawn there), I would make the color green. If it was green, I would make the color yellow. And if yellow, make the color orange (highest concentration). This worked fine when al the datasets were 10,000. But now some users have huge datasets of over 1 million - and now the scatter plot for these large datasets are all orange.

What's the best approach here?

I have created a Codepen: https://codepen.io/mark-kelly-the-looper/pen/VwQyVaE

Answer 1

I'm sorry, but I'm not the one to review your code. I never did anything with React or Babel, but I do have some suggestions to improve your plots. So this is not a code review answer, but I hope it is useful.

The first suggestion is easy: Make the canvas bigger, which spreads the dots out more, lowering the chance they overlap, while keeping the visual output the same size. Here's what I mean:

https://codepen.io/kikosoft/pen/mdXpoQd

Notice how I make the canvas twice as big:

<canvas
  style={{ border: "thick solid #32a1ce" }}
  className="canvas"
  id="canvas-1"
  width={400}
  height={400}
/>

but the CSS says it's still the same size:

#canvas-1 {
  width: 200px;
  height: 200px;
}

Putting the results next to each other gives a better idea of the "improvement".

All the dots are there in the second graph, but it looks like the plot contains less. That's actually true, a single dot from the left graph only occupies 1/4 of the area it did in the right graph. Single dots should look like tiny gray dots. This makes it easier to make plots with more data in it.

My second suggestion is that you can do this with your color plots as well. The bigger the canvas the less chance that dots will be drawn in the same place multiple times.