Skip to content

Instantly share code, notes, and snippets.

@loveice622

loveice622/.block

Last active November 24, 2017 23:42
Show Gist options
  • Save loveice622/95d1dbe762e2856f09317affc9294a88 to your computer and use it in GitHub Desktop.
Save loveice622/95d1dbe762e2856f09317affc9294a88 to your computer and use it in GitHub Desktop.
Download ZIP
GazeMap
Raw
.block
license: mit
Raw
README.md
Raw
Fixation.csv
x y tick duration
752 396 10040 660
760 415 10730 1470
796 464 12300 5970
783 494 18300 33430
780 486 51760 9070
772 487 60860 10030
770 477 70920 3000
236 189 74460 30
251 185 74520 700
261 190 75260 30
253 197 75320 470
252 206 75820 940
221 200 76820 7200
241 189 84060 4560
241 182 88650 1170
234 180 89850 4840
254 197 94720 6870
242 192 101620 11300
230 192 112950 370
186 265 113420 30
97 485 113620 30
33 698 113790 2260
17 814 116150 3300
36 813 119480 3440
18 814 122950 970
29 831 123950 130
41 815 124150 3200
36 806 127380 6700
36 808 134110 8140
40 808 142280 2800
26 805 145150 100
40 806 145280 7670
35 809 152980 4600
29 806 157610 9670
25 806 167340 3340
15 814 170740 40
9 799 170840 40
26 802 170910 2900
1095 648 174680 30
1070 641 174770 40
1071 646 174840 1300
1128 633 176240 8070
1114 626 184340 14770
1120 620 199140 1030
1121 618 200200 940
1114 622 201170 2470
825 519 204000 40
807 509 204070 1200
766 478 205400 14630
763 494 220070 100
775 499 220200 30730
777 495 250960 70
786 500 251060 4440
789 484 255530 300
785 476 255860 2500
795 479 258390 140
797 482 258560 100
787 486 258690 540
796 472 259260 200
787 492 259490 140
795 477 259660 2600
791 484 262290 240
783 486 262560 3200
792 481 265820 440
798 463 266290 1270
783 486 267590 3500
784 493 271120 970
782 476 272120 740
776 489 272890 3700
789 478 276620 5870
787 476 282520 1740
787 495 284320 3470
786 484 287820 500
785 480 288350 840
795 464 289220 1570
773 476 290850 40
777 478 290920 270
779 483 291220 270
787 471 291520 2300
790 475 293850 1670
781 473 295550 470
782 475 296050 740
791 488 296850 240
789 482 297120 100
783 479 297250 1240
792 474 298520 3700
789 487 302250 2400
779 484 304680 570
788 473 305280 610
1279 246 306350 70
1264 249 306480 1500
1301 218 308080 70
1292 230 308180 9800
1280 237 318020 4530
1290 240 322580 2700
1285 233 325310 1270
1330 305 326650 60
1361 470 326780 130
1397 631 327010 40
1405 646 327080 300
1412 668 327410 40
1431 692 327480 2300
1419 702 329810 7570
1431 723 337410 340
1419 728 337780 330
1432 723 338150 130
1451 687 338310 40
1476 652 338410 1940
1477 622 340380 570
1539 594 341080 1330
1537 597 342440 40
1536 598 342540 2270
1594 660 344910 170
1559 781 345140 140
1560 779 345310 300
1556 779 345640 800
1533 748 346510 970
1536 732 347510 8070
1478 736 355710 2970
1416 742 358770 3970
1365 741 362840 200
1358 748 363070 3470
1345 740 366610 100
1346 731 366740 70
1345 727 366840 2770
1364 673 369640 2970
1370 670 372640 2170
1426 677 374970 70
1444 678 375070 740
1441 679 375840 10900
1463 844 386770 1330
1477 693 388140 60
1474 639 388240 1730
1466 649 390000 8570
1455 656 398600 3600
1466 667 402230 340
92 826 403600 70
107 823 403730 1170
32 827 405070 30
45 831 405130 3700
47 795 408870 30
63 802 408930 2270
68 804 411230 540
37 808 411830 70
46 817 411930 200
46 813 412200 2400
43 820 414630 6770
68 810 421430 340
63 809 421830 100
68 813 421960 1140
59 813 423130 4600
45 807 427800 2200
48 808 430030 300
44 812 430360 940
50 808 431330 370
44 809 431730 700
49 807 432460 1240
39 809 433730 1370
35 814 435130 600
Raw
index.html
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.line {
fill: none;
stroke: LightCoral;
stroke-width: 2px;
}
.tick line {
stroke: #C0C0BB;
}
.axis-label, .legend-label {
fill: #0f0f0e;
font-size: 10pt;
font-family: sans-serif;
}
</style>
</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 =400
height=200
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");
var w=600
var h=400
const margin = { left: 40, right: 20, top: 10, bottom: 40 };
const innerWidth = w - margin.left - margin.right;
const innerHeight = h - margin.top - margin.bottom;
var svgDiag = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
const g = svgDiag.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const xAxisG = g.append('g')
.attr('transform', `translate(0, ${innerHeight})`);
const yAxisG = g.append('g');
const xValue = d => d.delay;
const xLabel = 'Time(ms)';
const yValue = d => d.vel;
const yLabel = 'Velocity m/s';
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
const xAxis = d3.axisBottom()
.scale(xScale)
.tickSize(-innerHeight)
.tickFormat(d3.format("d"));
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(6)
.tickSize(-innerWidth)
xAxisG.append('text')
.attr('class', 'axis-label')
.attr('x', innerWidth / 2)
.attr('y', 30)
.text(xLabel);
yAxisG.append('text')
.attr('class', 'axis-label')
.attr('x', -innerHeight / 2)
.attr('y', -20)
.attr('transform', `rotate(-90)`)
.style('text-anchor', 'middle')
.text(yLabel);
d3.csv("Fixation.csv", function(d){
d[0].vel=0
for(i = 0; i < d.length; i ++)
{
if(d[i].x<=0)
{
console.log(i)
continue
}
d[i].delay=d[i].tick-d[0].tick
d[i].label=i.toString()
if(i>0)
{
d[i].vel = Math.sqrt(Math.pow(d[i].x - d[i-1].x, 2)+ Math.pow(d[i].y - d[i-1].y, 2))
/ (d[i].tick - d[i-1].tick);
//console.log(d[i].vel)
}
if (i<d.length-1)
{
var r
r=(Number(d[i+1].tick)-Number(d[i].tick))
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", 2)
.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", 10)
.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)
}
}
xScale
.domain(d3.extent(d, xValue))
.range([0, innerWidth])
yScale
.domain(d3.extent(d, yValue))
.range([innerHeight, 0])
console.log(d3.extent(d, xValue),d3.extent(d, yValue))
// define the line
var valueline = d3.line()
.x(function(d) { return xScale(xValue(d)); })
.y(function(d) { return yScale(yValue(d)); });
// Add the valueline path.
g.append("path")
.attr("class", "line")
.attr("d", valueline(d))
xAxisG.call(xAxis);
yAxisG.call(yAxis);
// var pulseCircles = svg.selectAll('circle')
// .data(d)
// .transition()
// .delay(d=>d.delay)
// .duration(2000)
// .attr('r', d=>d.r)
// .style('opacity', 50)
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment