ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Contour chart with binning
Posted by Sebastian on Oct-30-2024 19:35
| Reply | Monitor
Hello everyone,

I got asked to create a chart showing a huge number of noisy data comprising of z-values at XY-coordinates.

In my case contour chart seems to be the chart type of choice regarding the intended look. Unfortunately, there are some many data that I do not need the contour plot to interpolate values but to think about statistical preprocessing in order to get a proper result. The intention of the chart is to get a first impression of the z-values (color coded) as a function of x and y although there is a lot of noise in the z-value.

I know some chart types like binned scatter plots from other libraries, e.g. R. An example is shown here:
https://r-graph-gallery.com/100-high-density-scatterplot-with-binning.html

Here, the z-value (color) of a certain bin is calculated internally according to a specified function: count, mean, ...

Is there an easy implementation for that using ChartDirector or do I have to calulate the bins, the value and everything else in advance by myself?

Kind regards,
Sebastian

  Re: Contour chart with binning
Posted by Peter Kwan on Oct-30-2024 23:17
| Reply | Monitor
Hi Sebastian,

Although ChartDirector has no built-in binning function, I believe it is easy to write the binning code for rectangular grids (instead of hexagonal grids). The chart will then look it a discrete heat map.

It may take less than 10 lines of code for the binning depending on the programming language. If you can inform me of your programming language and framework (such as C#/WPF,  C++/MFC, PHP, ...), I can try to develop an example using random data.

Best Regards
Peter Kwan

  Re: Contour chart with binning
Posted by Sebastian on Oct-30-2024 23:23
| Reply | Monitor
Hi Peter,

thank you for your instant reply. The code arround my request in written in C#.

Best regards
Sebastian

  Re: Contour chart with binning
Posted by Peter Kwan on Oct-31-2024 22:58
| Reply | Monitor
Attachments:
Hi Sebastian wrote,

Below is a binning example. I started with some random scattered points with 2D gaussian distribution. Then the code bins them into 20 x 20 cells. Below please find the image of the original scatter points and the binned cells as a discrete heat map chart.

The code I used is as follows. You can see it is not difficult to bin the points. From the (x, y) coordinates, it is easy to determine which cell the scatter points falls into, and increment the point count for that cell.


// Generate random points with 2D Gaussian distribution
RanSeries r = new RanSeries(123);
double[] x = r.getGaussianSeries(1000, 0, 4);
double[] y = r.getGaussianSeries(1000, 0, 4);
var dataX = new List<double>();
var dataY = new List<double>();
for (int i = 0; i < x.Length; ++i)
{
    if ((Math.Abs(x[i]) < 10) && (Math.Abs(y[i]) < 10))
    {
        dataX.Add(x[i] + 10);
        dataY.Add(y[i] + 10);
    }
}

XYChart c = new XYChart(450, 450);
c.setPlotArea(55, 65, 350, 350, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);

//c.addScatterLayer(dataX.ToArray(), dataY.ToArray(), "", Chart.SquareSymbol, 2, 0x000000, 0x000000);
//c.xAxis().setLinearScale(0, 20, 1);
//c.yAxis().setLinearScale(0, 20, 1);

double binMin = 0;
double binMax = 20;
int binCount = 20;

// Bin points into 20 x 20 grid
double[] binData = new double[binCount * binCount];
for (int i = 0; i < dataX.Count; ++i)
{
    int xIndex = (int)Math.Floor((dataX[i] - binMin) / (binMax - binMin) * binCount - 0.001);
    int yIndex = (int)Math.Floor((dataY[i] - binMin) / (binMax - binMin) * binCount - 0.001);
    binData[xIndex + yIndex * binCount]++;
}

c.addDiscreteHeatMapLayer(binData, binCount);
c.xAxis().setLinearScale(0, binCount, 1);
c.yAxis().setLinearScale(0, binCount, 1);

viewer.Chart = c;


Best Regards
Peter Kwan
scattered.png
binned.png