GazeMap

Built with blockbuilder.org

forked from loveice622's block: GazeMap

width=img.naturalWidth ;
        height=img.naturalHeight ;

};
img.src = "https://user-images.githubusercontent.com/25095189/32792548-8f1dedf4-c931-11e7-865b-c32d2d486236.png";

width =1600
  height=900

var svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

svg.append("image")
   .attr("x",0).attr("y",0)
   .attr("width", width)
   .attr("height", height)
   .attr("xlink:href", "https://user-images.githubusercontent.com/25095189/32792548-8f1dedf4-c931-11e7-865b-c32d2d486236.png");

d3.csv("gaze.csv", function(d){
  
  
	for(i = 1; i < d.length; i ++)
  
  {
    if(Number(d[i].x)<=0 || Number(d[i+1].x)<=0)
    {
       console.log(i, d[i].x, d[i].y)
       continue
    }
     
    d[i].delay=Number(d[i].TimeStamp)-Number(d[1].TimeStamp)
    d[i].label=i.toString()
    
    if (i<d.length-1)
    {
       var r
       r=(Number(d[i+1].TimeStamp)-Number(d[i].TimeStamp))
       if(r<1)
       	d[i].r=1
       else
        d[i].r=r
       //console.log(i,d[i].r, d[i].delay)
    }

if(i < d.length-1){
      
      
       svg.append("line")
				.attr("x1", Number(d[i].x))
				.attr("y1", Number(d[i].y))
				.attr("x2", Number(d[i+1].x))
				.attr("y2", Number(d[i+1].y))
				.style("stroke", "#8da0cb")
				.style("stroke-width", 0)
				.style("opacity", 0.8)
        .transition()
        .delay(d[i].delay)
        .duration(2000)
        .style("stroke-width", 2)
       
      
			svg.append("circle")
				.attr("cx", Number(d[i].x))
				.attr("cy", Number(d[i].y))
				.attr("r", 0)
				.style("fill", "red")
				.style("opacity", 0.4)
        .transition()
        .delay(d[i].delay)
        .duration(2000)
        .attr('r', 10)
        .style('opacity', 50)
      
      
      svg.append("text")
				.attr("x", Number(d[i].x-5))
				.attr("y", Number(d[i].y+5))
          .transition()
             .delay(d[i].delay)
             .duration(2000)
             .text(d[i].label)

}
	}
  
//     var pulseCircles = svg.selectAll('circle')
//              .data(d)
//              .transition()
//              .delay(d=>d.delay)
//              .duration(2000)
//              .attr('r', d=>d.r)
//              .style('opacity', 50)
    
 
   
})

</script>
</body>

https://d3js.org/d3.v3.min.js