block by heavysixer ed7522e830f4823e5b31

fresh block

Full Screen

Built with blockbuilder.org

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="https://rawgit.com/Delapouite/JsClipper/master/clipper.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .land {
      fill: none;
      stroke: #000000;
    }
    .stroke {
      fill: none;
      stroke: #ff0000;
    }
    .spiral {
      fill: #ffffff;
      stroke: #CC0A48;
      fill-opacity: 0.2
    }

  </style>
</head>

<body>
  <svg></svg>
  <script>
    var pointsFromPath = function(path){
      var points = []
      for(var x = 0; x < path.getTotalLength(); x++){
        points.push(path.getPointAtLength(x));
      }
      return points;
    }
    var roundTo = function (input, sigdigs) {
        return Math.round(input * Math.pow(10, sigdigs) ) / Math.pow(10, sigdigs);
      }

      var makeSpiralPoints = function(origin, revolutions, pointCount, clockwise, padding){
        var direction = clockwise ? 1 : -1;
        var circ = padding / (2 * Math.PI);
        var step = (2 * Math.PI * revolutions) / pointCount;
        var points = [], angle, x, y;
        for (var i = 0; i <= pointCount ; i++){
          angle = direction * step * i;
          x = roundTo((circ * angle) * Math.cos(angle) + origin.x, 2);
          y = roundTo((circ * angle) * Math.sin(angle) + origin.y, 2);
          points.push(x + " " + y);
        }

        return('M ' + points.shift() + ' S ' + points.join(' '));
      }

    var render = function(world){
      var svg = d3.select("svg");
      var width = 500;
      var height = 500;
      var center = {
        x: width/2,
        y: height/2
      }

      var countries = topojson.feature(world, world.objects.land);

      var projection = d3.geo.orthographic()
      .scale(200)
      .rotate([9,0,0])
      .translate([width/2, height/2])
      .clipAngle(90);


      var path = d3.geo.path()
      .projection(projection);


      svg.append("path")
        .attr("d", path(countries))
        .classed("land", true);

      var bbox = svg.select('.land')[0][0].getBBox();

      var spiral = svg.append("path")
      .attr("d", makeSpiralPoints({
        x:center.x,
        y:center.y
      },bbox.height/8, 4000, false, 4))
      .classed("spiral", true);
      
      // extract points
      var spiralPoints = pointsFromPath(spiral.node());
      var geoPoints = pointsFromPath(spiral.node());
      console.log(spiralPoints);
    }
    
    d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-110m.json",
            function(error, json) {
      if (error){
        return console.warn(error);
      }
      render(json);
  });

  </script>
</body>