GazeMap

Built with blockbuilder.org

forked from loveice622's block: GazeMap

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

};
img.src = "https://loveice622.github.io/11-50-56.jpg";

width =1247
  height=604

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/32782796-8f3e2c28-c917-11e7-9b66-8acf0156e74b.jpg");

d3.csv("1.csv", function(d){

for(i = 0; i < d.length; i ++)
  
  {
    
    d[i].delay=Number(d[i].TimeStamp)-Number(d[0].TimeStamp)
    
    if (i<d.length-1)
    {
       d[i].r=(Number(d[i+1].TimeStamp)-Number(d[i].TimeStamp))*0.3
    }
    
		svg.append("circle")
			.attr("cx", Number(d[i].mouseX))
			.attr("cy", Number(d[i].mouseY))
			.attr("r",0)
			.style("fill", "Lime")
			.style("opacity", 0.4)

if(i < d.length-1){
			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)

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

</script>
</body>

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