loveice622 · November 14, 2017 17:24
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/gaze.csv b/gaze.csv
diff --git a/index.html b/index.html
 <head>
 <meta charset="utf-8">
 <script src="https://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
  

 <script>
  
 var img = new Image();
 var width,height;
  
 img.onload = function(){

        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>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>


	<script>

	var img = new Image();
	var width,height;

	img.onload = function(){

	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>