[Jprogramming] interactive scatterplot

[Joe Bogner]

I would like to be able to click to identify points on a scatterplot.
Has any work been done related to this?

In the example below, we can see that 'c' appears to be an outlier. It
would be convenient to be able to click on the point and identify it
somehow.

There is a hack to identify the coordinates, but it doesn't work very well:

http://www.jsoftware.com/jwiki/AndrewNikitin/plothacks?highlight=%28plot%29%7C%28click%29

Try clicking in the upper right, and provides the exact coordinate
which would take some work to identify in the underlying dataset.

If nothing new has been done on this topic, I'm considering looking
into hacking the canvas output

Here is an example:

strToTable =: (< @ (".^:(#@".)) ) ;._2@,&' ';._2
data=: strToTable 0 : 0
a 5 10
b 7 12
c 10 50
d 8 15
)

'x y' =. > |: }."1 data

pd 'reset'
pd 'type dot'
pd 'pensize 5'
pd x;y
pd 'show'




proof of concept canvas hack

In the javascript generated:

function graph() {
    var graphCanvas = document.getElementById('canvas1');
    // ensure that the element is available within the DOM
    if (graphCanvas && graphCanvas.getContext) {
// open a 2D context within the canvas
var context = graphCanvas.getContext('2d');
// draw

        //BEGIN NEW
var pts = drawPlot(context);
       function windowToCanvas(canvas, x, y) {
            var bbox = canvas.getBoundingClientRect();

            return { x: x - bbox.left * (canvas.width  / bbox.width),
                     y: y - bbox.top  * (canvas.height / bbox.height)
                   };
        }

        graphCanvas.onmousedown = function (e) {
            var xy = windowToCanvas(graphCanvas, e.clientX, e.clientY);
            for(var i = 0; i < pts.length; i++) {
                var radius=4;
                var dx = xy.x-pts[i][0];
                var dy = xy.y-pts[i][1];
                var isHit = (dx*dx+dy*dy)<(radius*radius);
                if (isHit) {
                    console.log([i, pts[i][0], pts[i][1]]);
                }
            }
            console.log(xy);
        }
        //END NEW
    }


Where the points get added:

    var pts=[];
    pts.push([29.5,332])
    pts.push([201.5,316.4])
    pts.push([459.5,20])
    pts.push([287.5,293])
    for(var i = 0; i < pts.length; i++) {
        
ctx.beginPath();ctx.arc(pts[i][0],pts[i][1],4,0,2*Math.PI,1);ctx.fill();ctx.closePath();
    }
    return pts;

Instead of:

ctx.beginPath();ctx.arc(29.5,332   ,4,0,2*Math.PI,1);ctx.fill();ctx.closePath();
ctx.beginPath();ctx.arc(201.5,316.4,4,0,2*Math.PI,1);ctx.fill();ctx.closePath();
ctx.beginPath();ctx.arc(459.5,20   ,4,0,2*Math.PI,1);ctx.fill();ctx.closePath();
ctx.beginPath();ctx.arc(287.5,293  ,4,0,2*Math.PI,1);ctx.fill();ctx.closePath();


The nice thing about using canvas would be that it is supported on jqt and jhs

Thanks
Joe
----------------------------------------------------------------------
For information about J forums see http://www.jsoftware.com/forums.htm