D3 Examples - GazeMap

xxxxxxxxxx
 
<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>
    