Tooltips for data in javascript using p5.js

Question

I am trying to make tooltips for a data visualization I made using p5.js but I am completely lost. Nothing I tried works. This is my code as is.

 var table; var i; var j; var cellValue; var label; var test; function preload() { matrix = loadTable("dataLayer2matrix.csv","csv") labels = loadTable("dataLayer2labels.csv","csv") test = matrix } function setup() { createCanvas(1500,1500) noStroke() fill(0,0,255,10) angleMode(DEGREES) background(255,255,255) matrixStartX = 200 matrixStartY = 250 var matrixRows = matrix.getRows() var matrixSize = matrixRows.length // Experiment with grid fill(75, 75, 75, 50) for (r = 0; r <= matrixSize; r++) { rect(matrixStartX , matrixStartY + r * 20 - 1 , 20 * matrixSize, 1) rect(matrixStartX + r * 20 - 1 , matrixStartY, 1, 20 * matrixSize) } // Draw matrix for (var mr = 0; mr < matrixSize; mr++) { for (var mc = 0; mc < matrixSize; mc++) { cellValue = matrixRows[mr].getNum(mc) fill(49,130,189,cellValue*10) rect(mc * 20 + matrixStartX, mr * 20 + matrixStartY, 19 ,19) } } // Labels - horizontal fill(75, 75, 75, 255) labelsRow = labels.getRows() for (mc = 0; mc < matrixSize; mc++) { label = labelsRow[0].getString(mc) text(label, 10, mc*20+matrixStartY + 15) } // Labels - vertical push() translate(matrixStartX + 15, matrixStartY - 15) rotate(-90) for (mc = 0; mc < matrixSize; mc++) { label = labelsRow[0].getString(mc) text(label, 0, mc*20) } pop() //Tooltip when clicked } /* if(mouseIsPressed){ fill(50); text(cellValue, 10,10,70,80); }*/ } }

It makes this image:

I want it so that when I go over a square I get the data in it. I really can't seem to do it. Thanks.

Answer 1

I think the advice telling you to use bootstrap is missing the fact that you're using p5.js. Bootstrap is more for dealing with html components, not internal Processing sketches.

Instead, you probably want to do this with p5.js code. The best thing you can do is break your problem down into smaller steps:

Step 1: Can you draw a single rectangle?

Instead of trying to add this new functionality to your existing sketch, it might be easier if you start with a simpler example sketch with just a single rectangle.

Step 2: Can you detect when the mouse is inside that rectangle?

If you know where you're drawing the rectangle, you know its coordinates. You also know the coordinates of the mouse from the mouseX and mouseY variables. So to detect whether the mouse is inside the rectangle, you simply have to use if statements that compare the coordinates of the mouse to the coordinates of the rectangle. There are a ton of resources on google for this, and it might help if you draw some examples out on a piece of paper.

Also, don't worry about the tooltip just yet. Just do something simple like change the color of the rectangle when the mouse is inside it.

Step 3: Can you display the information box?

Again, do this in its own sketch first. Maybe create a function that takes a position and the information you want to display as parameters and displays it in a rectangle. Don't worry about making it a tooltip yet. Just get it displaying. Use hard-coded values for the information.

Step 4: Can you combine your small example sketches?

You have code that triggers when the mouse is inside a rectangle. You have code that draws the tooltip. Can you make it so the tooltip is drawn when the mouse is inside the rectangle?

Step 5: Only when all of the above works, then you should start thinking about adding it to your full sketch.

Instead of using an example rectangle, you'll have to use the rectangles you're drawing on the screen. Instead of calling the tooltip function with hard-coded values, use the values you get from the squares.

Take on those pieces one at a time, and make small steps toward your goal. Then if you get stuck, you can post an MCVE of the specific step you're on. Good luck!