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>
      var vis = {
        w: 1000,
        h: 500,
        scale: 100,
        origin:{
          x: 55,
          y: -40
        }
      }

      console.log(window);
      var svg = d3.select('body').append('svg')
        .style('width', vis.w)
        .style('height', vis.h)

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

      group.append('path')
    		.datum({type: 'Sphere'})
    		.attr('fill', 'lightBlue')

      var projection = d3.geoOrthographic()
    		.fitExtent([[0,0], [600,600]], {type:"Sphere"})
        .scale(vis.scale)
        .translate([vis.w / 2, vis.h / 2])
        .rotate([vis.origin.x, vis.origin.y])
        .clipAngle(90);


      var geoPath = d3.geoPath(projection);
      var line = {
        type: 'LineString',
        coordinates: [[-150,0],[10,10]],
      };

      var land = group.append("path")
        .attr('class', 'land');

      var json = d3.json(
        "https://visionscarto.net/bxl/countries.geojson",
        function(err, json){
          land.datum(json);
          render();
        }
      );


    	group.append('path')
      .attr('fill', 'orange')
      .datum({
        type: "MultiPoint",
        coordinates: [
          [125.8, 39]
        ]
      })

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

      var λ = d3.scaleLinear()
        .domain([-vis.w, vis.w])
        .range([-180, 180])

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

      function dragged(d) {
        var scale = projection.scale()/100;
        var r = {
          x: λ((d.x = d3.event.x)) / scale,
          y: φ((d.y = d3.event.y)) / scale
        };
        console.log(scale, r);
        projection.rotate([vis.origin.x + r.x,
                           vis.origin.y + r.y]);
        render();
      };

      function zoomed() {
        var transform = d3.event.transform;
        var k = Math.sqrt(100 / projection.scale());
        projection.scale(vis.scale * transform.k)
        render();
      };

     	function render() {
        group.selectAll('path')
         	.attr('d', geoPath)
      };


  </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>
	var vis = {
	w: 1000,
	h: 500,
	scale: 100,
	origin:{
	x: 55,
	y: -40
	}
	}

	console.log(window);
	var svg = d3.select('body').append('svg')
	.style('width', vis.w)
	.style('height', vis.h)

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

	group.append('path')
	.datum({type: 'Sphere'})
	.attr('fill', 'lightBlue')

	var projection = d3.geoOrthographic()
	.fitExtent([[0,0], [600,600]], {type:"Sphere"})
	.scale(vis.scale)
	.translate([vis.w / 2, vis.h / 2])
	.rotate([vis.origin.x, vis.origin.y])
	.clipAngle(90);


	var geoPath = d3.geoPath(projection);
	var line = {
	type: 'LineString',
	coordinates: [[-150,0],[10,10]],
	};

	var land = group.append("path")
	.attr('class', 'land');

	var json = d3.json(
	"https://visionscarto.net/bxl/countries.geojson",
	function(err, json){
	land.datum(json);
	render();
	}
	);


	group.append('path')
	.attr('fill', 'orange')
	.datum({
	type: "MultiPoint",
	coordinates: [
	[125.8, 39]
	]
	})

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

	var λ = d3.scaleLinear()
	.domain([-vis.w, vis.w])
	.range([-180, 180])

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

	function dragged(d) {
	var scale = projection.scale()/100;
	var r = {
	x: λ((d.x = d3.event.x)) / scale,
	y: φ((d.y = d3.event.y)) / scale
	};
	console.log(scale, r);
	projection.rotate([vis.origin.x + r.x,
	vis.origin.y + r.y]);
	render();
	};

	function zoomed() {
	var transform = d3.event.transform;
	var k = Math.sqrt(100 / projection.scale());
	projection.scale(vis.scale * transform.k)
	render();
	};

	function render() {
	group.selectAll('path')
	.attr('d', geoPath)
	};



	</script>
	</body>