[Canvas click location] #d3 #javascript

canvasClickLocation.js

	// when the user click on the map, find what objects are under the mouse pointer.
    // inspired by: https://bl.ocks.org/mbostock/444757cc9f0fde320a5f469cd36860f4
    clickSubject:()=>{

        // check if data are loaded
        if( internal.data.json ){
            // compute the pointer position, relative to the canvas origin
            let eventX = d3.event.x-internal.canvas.bb.left, eventY = d3.event.y-internal.canvas.bb.top

            // if a zoom transformation has been applied, compute the mouse position in data space coordinates.
            if( internal.zoom.transform ){
                let dcoords = internal.zoom.transform.invert([eventX,eventY])
                eventX = dcoords[0]
                eventY = dcoords[1]
            }

            // get all the data that are "under" the mouse pointer
            let subjects = internal.data.data.reduce((o,d)=>{
                let radius = internal.data.scale(d.pageview), // get the radius size, according to the current scale
                    coords = internal.projection([d.gt_lon,d.gt_lat]), // project the data into data space
                    dx = eventX - coords[0], 
                    dy = eventY - coords[1];

                // if the distance between the center and the curser is less than the radius (computed without the square root)
                if((dx*dx+dy*dy) < radius*radius ){ o.push(d) }

                return o
            },[])

            return subjects
        }
        return []
    },