powersparks/.block

## .block
license: gpl-3.0

## ReadMe.md

      
    Raw
  

              ReadMe.md
            
          
    based on:
Mastering D3.js
By: Pablo Navarro Castillo
Publisher: Packt Publishing
Pub. Date: August 25, 2014
Print ISBN-13: 978-1-78328-627-0
Web ISBN-13: 978-1-78328-628-7
also:
https://www.jasondavies.com/maps/rotate/.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
<meta charset="utf-8">

<style>

.foreground {
  fill: #d8ffff;
  stroke: #333;
  stroke-width: 1.5px;
}

.land {
  fill: #d7c7ad;
  stroke: #766951;
}
.graticule {
   fill: none;
   stroke: #aaa;
   stroke-width: 1px;
   stroke-opacity: 0.5;
   pointer-events: none;
}
.globe {
    fill: #E9E9E9;
    pointer-events: none;
}

.land {
    fill: #BCBCBC;
    pointer-events: none;
}

.guide {
    stroke: #3299BB;
    pointer-events: none;
}

.guide-label {
    fill: #3299BB;
    pointer-events: none;
}

.graticule {
    fill: none;
    stroke: #aaa;
    stroke-width: 1px;
    stroke-opacity: 0.5;
    pointer-events: none;
}

.graticule-black {
    fill: none;
    stroke: #555;
    stroke-width: 1px;
    stroke-opacity: 0.5;
}

.cellestial-globe {
    fill: #060061;
    pointer-events: none;
}

.star {
    fill: #fff;
}

.star-label {
    text-transform: uppercase;
    font-size: 10px;
    fill: #fff;
    fill-opacity: 0.6;
}
</style>
</head>
<body>
<h2 class="section-subtitle">Orthographic Projection (with Clipping)</h2>


<div id="map-orthographic-clip"></div>


<script>
    d3.json('land.json', function(error, data) {

        if (error) { console.error(error); }

        // Width and height of the SVG element
        var width = 600, height = 300;
    var diameter = 300,
            radius = diameter/2,
            velocity = .01,
            then = Date.now();

        var geojson = topojson.feature(data, data.objects.ne_50m_land);

        // Create and configure an instance of the Orthographic projection
        var orthographic = d3.geoOrthographic()
            .scale(height / 2)
            .translate([width / 2, height / 2])
            .clipAngle(90);

        // Create and configure the geographic path generator
        var path = d3.geoPath()
            .projection(orthographic);

        var div = d3.select('#map-orthographic-clip'),
            svg = div.append('svg')
                .attr('width', width)
                .attr('height', height);

        // Globe
        svg.append('path').datum({type: 'Sphere'})
            .attr('class', 'globe')
            .attr('d', path);

        // Features
        svg.append('path').datum(geojson)
            .attr('class', 'land')
            .attr('d', path);

        // Create the graticule lines and append them to the SVG container
        var graticule = d3.geoGraticule();

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

      d3.timer(function() {
          var angle = velocity * (Date.now() - then);
          orthographic.rotate([angle,0,0]);
          svg.selectAll("path")
            .attr("d", path.projection(orthographic));
        });

    });
</script>
</body>
</html>

## land.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              land.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<meta charset="utf-8">

	<style>

	.foreground {
	fill: #d8ffff;
	stroke: #333;
	stroke-width: 1.5px;
	}

	.land {
	fill: #d7c7ad;
	stroke: #766951;
	}
	.graticule {
	fill: none;
	stroke: #aaa;
	stroke-width: 1px;
	stroke-opacity: 0.5;
	pointer-events: none;
	}
	.globe {
	fill: #E9E9E9;
	pointer-events: none;
	}

	.land {
	fill: #BCBCBC;
	pointer-events: none;
	}

	.guide {
	stroke: #3299BB;
	pointer-events: none;
	}

	.guide-label {
	fill: #3299BB;
	pointer-events: none;
	}

	.graticule {
	fill: none;
	stroke: #aaa;
	stroke-width: 1px;
	stroke-opacity: 0.5;
	pointer-events: none;
	}

	.graticule-black {
	fill: none;
	stroke: #555;
	stroke-width: 1px;
	stroke-opacity: 0.5;
	}

	.cellestial-globe {
	fill: #060061;
	pointer-events: none;
	}

	.star {
	fill: #fff;
	}

	.star-label {
	text-transform: uppercase;
	font-size: 10px;
	fill: #fff;
	fill-opacity: 0.6;
	}
	</style>
	</head>
	<body>
	<h2 class="section-subtitle">Orthographic Projection (with Clipping)</h2>




	<div id="map-orthographic-clip"></div>




	<script>
	d3.json('land.json', function(error, data) {

	if (error) { console.error(error); }

	// Width and height of the SVG element
	var width = 600, height = 300;
	var diameter = 300,
	radius = diameter/2,
	velocity = .01,
	then = Date.now();

	var geojson = topojson.feature(data, data.objects.ne_50m_land);

	// Create and configure an instance of the Orthographic projection
	var orthographic = d3.geoOrthographic()
	.scale(height / 2)
	.translate([width / 2, height / 2])
	.clipAngle(90);

	// Create and configure the geographic path generator
	var path = d3.geoPath()
	.projection(orthographic);

	var div = d3.select('#map-orthographic-clip'),
	svg = div.append('svg')
	.attr('width', width)
	.attr('height', height);

	// Globe
	svg.append('path').datum({type: 'Sphere'})
	.attr('class', 'globe')
	.attr('d', path);

	// Features
	svg.append('path').datum(geojson)
	.attr('class', 'land')
	.attr('d', path);

	// Create the graticule lines and append them to the SVG container
	var graticule = d3.geoGraticule();

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

	d3.timer(function() {
	var angle = velocity * (Date.now() - then);
	orthographic.rotate([angle,0,0]);
	svg.selectAll("path")
	.attr("d", path.projection(orthographic));
	});

	});
	</script>
	</body>
	</html>