How do you add tooltips to p5.js not using HTML?

hawkdidy

Hello All, I have a project I am working on where I must use p5.js. I have a data visualization that involves a matrix like object. When I hover over one of the boxes of the matrix I want to see underlying data. I have searched on google but did not find anything that would help me. I can't post the data but my code looks like this:

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() 

The resulting data matrix looks like this http://imgur.com/55jkRiJ . I have no idea where to start. This code does not have any attempted implementation of the tooltip. Just the code that generates the matrix so that maybe someone can point me in the right direction.

blindfish

Well you could of course attempt to add traditional collision detection for each region that is intended to invoke a tooltip; but that would be heavy going and probably not very performant...

I implemented something in Processing a while back that might help: that used an image buffer to store the index of each region; then you just get the colour value of the equivalent square on the buffer to retrieve your data and display it in a tooltip. Here's the link: Colour based retrieval of objects from an ArrayList. Hint in JS you can replace an ArrayList with a standard array.