tomshanley/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    https://d3js.slack.com/archives/C07ET41MG/p1494494798691344
Built with blockbuilder.org

  
## index.html
<!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>

    <!-- CSS -->

    <style>
      html, body, svg {
        background: black;
      }

      .radar {
        stroke: chartreuse;
      }

    </style>

    <body>

      <div id="radar"></div>

      <!--
        <button id="btn-update">rotate</button>
      -->


      <script src="https://d3js.org/d3.v4.min.js"></script>
      <script>

        const heightWidth = 500;
        const margin = 10;
        const radius = (heightWidth/2) - margin;
        const duration = 5;
        const radians = 0.0174532925;

        const green = "chartreuse";

        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 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 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);

        function rotateRadar() {

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

          if (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>
	<!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>

	<!-- CSS -->

	<style>
	html, body, svg {
	background: black;
	}

	.radar {
	stroke: chartreuse;
	}

	</style>

	<body>

	<div id="radar"></div>

	<!--
	<button id="btn-update">rotate</button>
	-->


	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	const heightWidth = 500;
	const margin = 10;
	const radius = (heightWidth/2) - margin;
	const duration = 5;
	const radians = 0.0174532925;

	const green = "chartreuse";

	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 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 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);

	function rotateRadar() {

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

	if (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>