I am creating a sketch with comparison of different social media uses. I have layered multiple area curves one in front of the other. My intention is to create a hover effect on the point of interest. The problem I ran into is that an area curve placed in topmost layer (created last) overrides the hover comparison value for all curves.

I’ll paste the code of interest here:

```
void drawDataPoints(int col) {
int rowCount = socialMedia.getRowCount();
for(int row = 0; row < rowCount; row++) {
float value = socialMedia.getFloat(row, col);
float x = map(row, 0, 12, 50, width - 50);
float y = map(value, dataMin, dataMax, plotY2, plotY1);
strokeWeight(3);
point(x, y);
if((mx>50) && (mx<(width-50))) {
stroke(60);
strokeWeight(1);
line(mx, plotY2, mx, plotY1);
if(abs(mx-x) < 2) {
fill(0);
text(value, mx+6, my-30);
println("value: " + value);
}
}
}
}
```

This is the function for drawing point of interests on the curve.

There’s another function to show a curve as an area.

```
void drawDataArea(int col) {
noStroke();
beginShape();
int rowCount = socialMedia.getRowCount();
for (int row = 0; row < rowCount; row++) {
float value = socialMedia.getFloat(row, col);
float x = map(row, 0, 12, 50, width - 50);
float y = map(value, dataMin, dataMax, plotY2, plotY1);
vertex(x, y);
}
// For lower-right and lower-left corners.
vertex(plotX2, plotY2);
vertex(50, plotY2);
endShape(CLOSE);
}
```

I’ve called a function for mouseMoved() where mx = mouseX

I don’t know how much of sense this question makes but please help.

This is what I got thus far and I am looking to have a hover effect on those little black dots.