heavysixer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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="http://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>
	<!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="http://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>