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 svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 600)

    var projection = d3.geoAzimuthalEquidistant()
      .rotate([180, -40])
    	.fitExtent([[0,0], [600,600]], {type:"Sphere"})

    	//.fill('blue')

    var g = svg.append("g");

    g.append('path')
    	.datum({type: 'Sphere'})
    	.attr('fill', 'lightBlue')
    /*
    d3.timer(function(e){
      projection.rotate([e/100], 30);
      render();
    })
    */

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

    g.append("path")
    	.datum(line)
    	.attr("stroke", "red")
    	.attr("stroke-width", 3)
    	.attr('fill', 'none')

	  var land = g.append("path")

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


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

		var render = function(){
      g.selectAll('path')
        .attr('d', path)
    }
    render();


		var zoom = d3.zoom()
  		.scaleExtent([1, 8])
    	.on("zoom", zoomed);

    var drag = d3.drag().on("drag", dragged);
    svg
    	.call(drag)
   		.call(zoom)
	    //.call(zoom.event);

    function zoomed() {
      console.log(d3.event);
      g.attr("transform", d3.event.transform); // updated for d3 v4
    }

    function dragged() {
			var angle = d3.event.x/2;
      console.log(angle)
      projection.rotate(angle);
      render();

      //d3.event.subject[0] = transform.invertX(d3.event.x);
      //d3.event.subject[1] = transform.invertY(d3.event.y);
      //render();
    }


  </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 svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 600)

	var projection = d3.geoAzimuthalEquidistant()
	.rotate([180, -40])
	.fitExtent([[0,0], [600,600]], {type:"Sphere"})

	//.fill('blue')

	var g = svg.append("g");

	g.append('path')
	.datum({type: 'Sphere'})
	.attr('fill', 'lightBlue')
	/*
	d3.timer(function(e){
	projection.rotate([e/100], 30);
	render();
	})
	*/

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

	g.append("path")
	.datum(line)
	.attr("stroke", "red")
	.attr("stroke-width", 3)
	.attr('fill', 'none')

	var land = g.append("path")

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


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

	var render = function(){
	g.selectAll('path')
	.attr('d', path)
	}
	render();


	var zoom = d3.zoom()
	.scaleExtent([1, 8])
	.on("zoom", zoomed);

	var drag = d3.drag().on("drag", dragged);
	svg
	.call(drag)
	.call(zoom)
	//.call(zoom.event);

	function zoomed() {
	console.log(d3.event);
	g.attr("transform", d3.event.transform); // updated for d3 v4
	}

	function dragged() {
	var angle = d3.event.x/2;
	console.log(angle)
	projection.rotate(angle);
	render();

	//d3.event.subject[0] = transform.invertX(d3.event.x);
	//d3.event.subject[1] = transform.invertY(d3.event.y);
	//render();
	}


	</script>
	</body>