Radar v0.3

https://d3js.slack.com/archives/C07ET41MG/p1494494798691344

Updated to use d3.timer. As the angles doesn't iterate through every integer up to 360, the test if the radar angle == target angle is now a less then/greater then test of the previous and current angle

Built with blockbuilder.org

forked from tomshanley's block: Radar v0.1

forked from tomshanley's block: Radar v0.2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Radar</title>

.radar {
        stroke: chartreuse;
        stroke-linecap: round;
      }

</style>

<body>

const targetAngle = 56; //degrees
        const targetDistance = 0.5; // % of radius
        const targetX = xPosition(targetAngle, (radius * targetDistance));
        const targetY = yPosition(targetAngle, (radius * targetDistance));

/*d3.select("#btn-update").on('click', function() {
          updateAngle();
          rotateRadar();
        } );*/

var currentAngle = 0;
        var previousAngle = 0;
  
        var svg = d3.select("#radar")
        .append("svg")
        .attr("width", heightWidth + margin + margin)
        .attr("height", heightWidth + margin + margin);

var radar = svg.append("g")
        .attr("transform", "translate(" + (margin + radius) + "," + (margin + radius) + ")");

var circle = radar.selectAll("circle")
        .data([1,2,3,4])
        .enter()
        .append("circle")
        .attr("class", "radar")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", function(d){ return radius * (d/4) })
        .style("fill", "none")
        .style("stroke-width", "2px");

/*var line = radar.append("line")
        .attr("class", "radar")
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", 0)
        .attr("y2", radius)
        .style("fill", "none")
        .style("stroke-width", "2px");*/

/*var arc = d3.arc()
        .innerRadius(0)
        .outerRadius(radius)
        .startAngle(Math.PI)
        .endAngle(Math.PI * 0.5);

var defs = svg.append("defs").append("linearGradient")
        .attr("id", "gradient")
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", 1)
        .attr("y2", 0);
       
        defs.append("stop")
        .attr("offset", "0%")
        .attr("stop-color", green)
        .attr("stop-opacity", 100);

defs.append("stop")
        .attr("offset", "100%")
        .attr("stop-color", green)
        .attr("stop-opacity", 0);
        
        var line = radar.append("path")
        .attr("class", "radar")
        .attr('d', arc())
        .style("stroke", "none")
        .style("fill", "url(#gradient)");*/
        
        var lines = radar.append("g");
        
        var lineData = []; 	
        d3.range(numberOfLines).forEach(function(el) {
          let a = (radarAngle * (el/numberOfLines)) - radarAngle;
					lineData.push({ angle: a, value: el });
				});

lines.selectAll(".lines")
        .data(lineData)
        .enter()
        .append("line")
        .attr("class", "radar")
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", function(d) { 
          return xPosition(d.angle, radius);
        })
        .attr("y2", function(d) { 
          return yPosition(d.angle, radius); 
        })
        .style("stroke-width", strokeWidth)
        .style("opacity", function(d){ return 1 * (d.value/numberOfLines); })

var target = radar.append("circle")
        .attr("class", "target")
        .attr("cx", targetX)
        .attr("cy", targetY)
        .attr("r", 20)
        .style("fill", "chartreuse")
        .style("opacity", 0)

/*setInterval(function(){
          updateAngle();
          rotateRadar();
        }, duration);*/
        
        
        d3.timer(function(elapsed){
          previousAngle = currentAngle;
          currentAngle = (elapsed / 10) % 360;
          rotateRadar();
        });

function rotateRadar() {

//line.attr("transform", "rotate(" + currentAngle + ")");
          lines.attr("transform", "rotate(" + currentAngle + ")");

if (previousAngle < targetAngle && currentAngle >= targetAngle ) {
            target.style("opacity", 1);
            target.transition()
            .duration(1000)
            .style("opacity", 0);
          };

};

function updateAngle() {
          currentAngle = currentAngle == 359 ? 0 : currentAngle + 1;
        };

function xPosition(angle, distance) { 
          var a = 360 - angle;
				  return distance * Math.sin( a * radians );
        };

function yPosition(angle, distance) {
          var a = 360 - angle;
				  return distance * Math.cos( a * radians );
        };
        
      
      </script>

</body>
</html>

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