SamuelRiversMoore/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    function createMap() {
      var width = 400,
        height = 300,
        scale = 100,
        origin = {
          x: 55,
          y: -40
        };

      var svg = d3.select('body').append('svg')
        .style('width', 400)
        .style('height', 300)
        .style('border', '1px lightgray solid');

      var group = svg.append("g").datum({
        x: 0,
        y: 0
      })

      var projection = d3.geoOrthographic()
        .scale(scale)
        .translate([width / 2, height / 2])
        .rotate([origin.x, origin.y])
        .center([0, 0])
        .clipAngle(90);

      var geoPath = d3.geoPath()
        .projection(projection);

      var graticule = d3.geoGraticule();

      // zoom AND rotate
      svg.call(d3.zoom().on('zoom', zoomed));

      group.call(d3.drag().on('drag', dragged));

      // code snippet from http://stackoverflow.com/questions/36614251
      var λ = d3.scaleLinear()
        .domain([-width, width])
        .range([-180, 180])

      var φ = d3.scaleLinear()
        .domain([-height, height])
        .range([90, -90]);

      group.append('path')
        .datum(graticule)
        .attr('class', 'graticule')
        .attr('d', geoPath);

      function dragged(d) {
        var r = {
          x: λ((d.x = d3.event.x)),
          y: φ((d.y = d3.event.y))
        };
        projection.rotate([origin.x + r.x, origin.y + r.y]);
        updatePaths(svg, graticule, geoPath);
      };

      function zoomed() {
        var transform = d3.event.transform;
        var k = Math.sqrt(100 / projection.scale());
        projection.scale(scale * transform.k)
        updatePaths(svg, graticule, geoPath);
      };

    };

    function updatePaths(svg, graticule, geoPath) {

 	svg.selectAll('path.graticule').datum(graticule).attr('d', geoPath);
    };

    createMap();
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	function createMap() {
	var width = 400,
	height = 300,
	scale = 100,
	origin = {
	x: 55,
	y: -40
	};

	var svg = d3.select('body').append('svg')
	.style('width', 400)
	.style('height', 300)
	.style('border', '1px lightgray solid');

	var group = svg.append("g").datum({
	x: 0,
	y: 0
	})

	var projection = d3.geoOrthographic()
	.scale(scale)
	.translate([width / 2, height / 2])
	.rotate([origin.x, origin.y])
	.center([0, 0])
	.clipAngle(90);

	var geoPath = d3.geoPath()
	.projection(projection);

	var graticule = d3.geoGraticule();

	// zoom AND rotate
	svg.call(d3.zoom().on('zoom', zoomed));

	group.call(d3.drag().on('drag', dragged));

	// code snippet from http://stackoverflow.com/questions/36614251
	var λ = d3.scaleLinear()
	.domain([-width, width])
	.range([-180, 180])

	var φ = d3.scaleLinear()
	.domain([-height, height])
	.range([90, -90]);

	group.append('path')
	.datum(graticule)
	.attr('class', 'graticule')
	.attr('d', geoPath);

	function dragged(d) {
	var r = {
	x: λ((d.x = d3.event.x)),
	y: φ((d.y = d3.event.y))
	};
	projection.rotate([origin.x + r.x, origin.y + r.y]);
	updatePaths(svg, graticule, geoPath);
	};

	function zoomed() {
	var transform = d3.event.transform;
	var k = Math.sqrt(100 / projection.scale());
	projection.scale(scale * transform.k)
	updatePaths(svg, graticule, geoPath);
	};

	};

	function updatePaths(svg, graticule, geoPath) {

	svg.selectAll('path.graticule').datum(graticule).attr('d', geoPath);
	};

	createMap();
	</script>
	</body>