Skip to content

Instantly share code, notes, and snippets.

@loveice622

loveice622/.block

Last active November 14, 2017 13:45
Show Gist options
  • Save loveice622/f34b4811e24a37414194160264364fe1 to your computer and use it in GitHub Desktop.
Save loveice622/f34b4811e24a37414194160264364fe1 to your computer and use it in GitHub Desktop.
Download ZIP
GazeMap
Raw
.block
license: mit
Raw
1.csv
x y mouseX mouseY TimeStamp pupilLeft pupilRight
1.0 -29.0 915 375 1043099637032 NaN 2.3
1.0 -29.1 915 375 1043099853565 NaN 2.3
1.0 -29.0 915 375 1043100502725 NaN 2.3
0.9 -29.1 915 375 1043100739153 NaN 2.2
0.9 -29.1 915 375 1043100870381 NaN 1.7
0.9 -29.0 915 375 1043100953920 NaN 2.1
0.9 -28.9 915 375 1043100980517 NaN 2.2
1.0 -29.0 915 375 1043101062968 NaN 2.2
1.0 -29.1 915 375 1043101101428 NaN 2.2
1.0 -29.0 915 375 1043101126728 NaN 2.3
0.8 -29.3 915 375 1043101172815 NaN 2.1
0.1 -30.0 915 375 1043102020662 NaN 2.0
0.2 -30.1 915 375 1043102152417 NaN 2.7
0.9 -29.1 915 375 1043102312603 NaN 2.8
1.0 -29.1 915 375 1043102423477 NaN 2.3
0.8 -29.0 915 375 1043102589605 NaN 2.5
1.0 -29.1 915 375 1043102750546 NaN 2.0
0.9 -29.1 915 375 1043103107072 NaN 2.8
1.0 -29.1 915 375 1043103300919 NaN 1.9
0.9 -29.0 915 375 1043103366254 NaN 1.9
0.9 -29.0 915 375 1043103391982 NaN 2.0
0.9 -29.0 915 375 1043103431416 NaN 2.1
0.9 -29.0 915 375 1043103469834 NaN 2.1
0.9 -29.0 915 375 1043103495447 NaN 2.1
0.9 -29.0 915 375 1043103527263 NaN 2.1
0.9 -29.0 915 375 1043103567305 NaN 2.1
0.9 -29.0 915 375 1043103605689 NaN 2.2
0.9 -29.0 915 375 1043103631490 NaN 2.1
0.9 -29.0 915 375 1043103666650 NaN 2.2
0.9 -29.0 915 375 1043103705460 NaN 2.2
0.9 -29.0 915 375 1043103743902 NaN 2.2
0.9 -29.1 915 375 1043103768501 NaN 2.1
0.7 -29.3 915 375 1043103802700 NaN 2.2
0.7 -29.3 959 404 1043103843689 NaN 2.3
0.8 -29.3 1015 421 1043103882248 NaN 2.2
0.8 -29.4 1046 440 1043103920663 NaN 2.2
0.8 -29.3 1050 443 1043103965021 NaN 2.1
0.8 -29.3 1065 457 1043104007628 NaN 2.2
0.8 -29.2 1068 458 1043104047246 NaN 2.3
0.8 -29.2 1068 458 1043104088806 NaN 2.2
0.8 -29.2 1068 458 1043104135346 NaN 2.1
0.8 -29.3 1068 459 1043104179010 NaN 2.1
0.9 -29.1 1068 459 1043104218663 NaN 2.2
0.9 -29.1 1066 460 1043104259847 NaN 2.1
1.0 -29.1 1045 458 1043104296020 NaN 2.1
0.9 -29.0 1015 452 1043104331640 NaN 2.1
0.9 -29.1 977 445 1043104411011 NaN 2.1
1.0 -29.1 975 445 1043104491868 NaN 2.0
1.0 -29.1 975 445 1043104741181 NaN 2.1
1.0 -29.1 975 445 1043104780924 NaN 2.2
1.0 -29.1 975 445 1043104890396 NaN 2.3
1.0 -28.9 975 445 1043104930091 NaN 2.2
0.9 -29.2 975 445 1043105022737 NaN 2.8
1.0 -29.0 975 445 1043105158594 NaN 2.4
1.0 -29.3 975 445 1043105207177 NaN 2.4
1.0 -29.0 975 445 1043105315878 NaN 2.4
1.0 -29.1 975 445 1043105355643 NaN 2.4
1.0 -29.0 975 445 1043105481873 NaN 2.0
1.0 -29.0 975 445 1043105521544 NaN 2.0
0.4 -30.7 975 445 1043108339894 NaN 5.5
1.0 -29.0 975 445 1043110087189 NaN 1.8
0.3 -29.1 975 445 1043112615744 1.9 NaN
Raw
README.md
Raw
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://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment