Adding Hover Effect to p5.js Data Visualization not working? - visualization

Question

I'm currently working on a data visualization in p5.js. The data is stored in a .csv and the values are mapped to constants. These constants are then used to manipulate the position, color and size of the circles.
Here is the code so far:
let table;
function preload(){
table = loadTable("assets/songs_normalize.csv", "csv", "header");
}
function setup() {
createCanvas (3000,3000);
background(133,124,222);
for (let r = 0; r < table.getRowCount( ); r++) {
const artist = table.getString(r, "artist");
const song = table.getString(r, "song");
const duration = table.getNum(r, "duration_ms");
const year = table.getNum(r,"year");
const tempo = table.getNum (r,"tempo");
const energy = table.getNum (r,"energy");
const popularity = table.getNum(r,"popularity");
const y = map(year,1998,2020,50,2950);
const x = map(tempo,60,211,50,2950);
const size = map(duration,0, 484146, 0, 100);
const color = map (popularity,0,89,0,255)
const opacity = map(energy,0.05,1,0,255)
let circleColor = colorfill(color/2,-color,color);
circleColor.setAlpha(opacity);
noStroke();
fill (circleColor);
circle(x,y,size);
}
}
function colorfill(r,g,b) {
return color(r, g, b);
}
And this is what it looks like:
Now I want to add a simple hover effect.
I found a tutorial online that seems to do just what I need but when applied to my project, no circles are drawn:
let table;
function preload(){
table = loadTable("assets/songs_normalize.csv", "csv", "header");
}
function setup() {
createCanvas (3000,3000);
background(133,124,222);
for (let r = 0; r < table.getRowCount( ); r++) {
const artist = table.getString(r, "artist");
const song = table.getString(r, "song");
const duration = table.getNum(r, "duration_ms");
const year = table.getNum(r,"year");
const tempo = table.getNum (r,"tempo");
const energy = table.getNum (r,"energy");
const popularity = table.getNum(r,"popularity");
const y = map(year,1998,2020,50,2950);
const x = map(tempo,60,211,50,2950);
const size = map(duration,0, 484146, 0, 100);
const color = map (popularity,0,89,0,255)
const opacity = map(energy,0.05,1,0,255)
let circleColor = colorfill(color/2,-color,color);
circleColor.setAlpha(opacity);
noStroke();
//fill (circleColor);
//circle(x,y,size);
}
}
function draw() {}
//hover
let dis = dist(mouseX, mouseY, x, y);
if (dis < 5) {
fill(0);
noStroke();
circle(x, y, size);
//draw information
text(artist,x,y);
text(song,x,y+10);
} else {
fill(circleColor);
noStroke();
circle(x, y, size);
}
function colorfill(r,g,b) {
return color(r, g, b);
}

Answer 1

You forgot to include the csv file while posting the question , However i managed to find that on kaggle csv .
Here is your solution - click here
There are several problems with your code
for Hover effects to work on canvas , we need to check the distance between the points on every frame , so the hover code must be inside draw function (your draw function is empty)
to check the distance between your mouse and each circle their co-ordinates and size must be stored somewhere , In the solution i stored them in an array of objects named songs