Mapping Decreasing Volumes to Increasing Pixels in a Chart Application using Linear Interpolation

15 Views Asked by At

As a developer building a chart application, I'm using linear interpolation to map time values to pixel positions on the screen. My current approach utilizes the following function:

    fun interpolatePixelByTimestamps(
    startPixel: Double,
    endPixel: Double,
    startTimestamp: Long,
    endTimestamp: Long,
    targetTimestamp: Long
): Float {
    slope = (endPixel - startPixel) / (endTimestamp - startTimestamp).toFloat()
    interpolatedPixel = startPixel + slope * (targetTimestamp - startTimestamp)
    return interpolatedPixel.toFloat()
}

However, I'm encountering a challenge when applying this technique to volumes. Unlike timestamps, volume values in my dataset decrease from top to bottom. Consequently, using a directly analogous function for volume-to-pixel mapping results in an undesirable behavior:

  • Top point (highest volume, pixel 0): p1(1000, 0)
  • Bottom point (lowest volume, pixel 1080): p2(100, 1080)

Using simple linear interpolation with these points would map volumes decreasingly with increasing pixel values, which is incorrect.

My Question:

  1. What mathematical techniques or transformations can I apply to effectively map decreasing volumes to increasing pixel positions while preserving the underlying data relationships?
  2. Are there specific considerations (e.g., non-linear relationships, data normalization) that I should take into account for accurate volume-to-pixel mapping in my chart application?