Old school D3 from simpler times

All examples By author By category About

shimizu

Full window Github gist

地球儀 - ドロップシャドウエフェクト

<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
	margin: 0px;
	padding: 0px;	
}
</style>

<body>
<svg>
<defs>
	<filter id="drop-shadow" width="150%" height="150%">
		<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="2"></feGaussianBlur>
		<feOffset result="offsetBlur" dx="4" dy="4"></feOffset><feBlend in="SourceGraphic" in2="offsetBlur" mode="normal"></feBlend>
	</filter>	
</defs>	
	
</svg>	
	
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

<script>
	
(function(){
	"use strict";
	
	var w = 960;
	var h = 500; 
    
    var svg = d3.select("svg").attr("width", w).attr("height", h); 
     
    var projection90 = d3.geo.orthographic() 
        .scale(245)	
        .rotate([0,0,0])	
		.translate([w / 2, h / 2])
        .clipAngle(90);	
    
    var projection180 = d3.geo.orthographic() 
        .scale(245)	
        .rotate([0,0,0])	
		.translate([w / 2, h / 2])
        .clipAngle(180);	
    	
	
    var frontPath = d3.geo.path().projection(projection90);
    var backPath = d3.geo.path().projection(projection180);
        
    d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){ 
        
	   
		var stage = svg.append("svg:g"); 
		
		
		var backMap = stage.append("svg:path")
			.attr({
			"d":function(){ return backPath(geojson)},
				"fill-opacity":1,
				"fill":"gray",
				"stroke":"none",
			});

var frontMap = stage.append("svg:path")
			.attr({
			"d":function(){ return frontPath(geojson)},
				"fill-opacity":1,
				"fill":"blue",
				"stroke":"none",
				"filter": "url(#drop-shadow)"
			});
			
		// Reference from https://bl.ocks.org/mbostock/6738360	
		var m0, o0;
		var update = function(){
				backMap.attr("d", function(){ return backPath(geojson)}); 
				frontMap.attr("d", function(){ return frontPath(geojson)}); 
		}
		var 	mousedown = function () {
			m0 = [d3.event.pageX, d3.event.pageY];
			o0 = projection90.rotate();
			d3.event.preventDefault();
		}
		var mousemove = function () {
		  if (m0) {
			var m1 = [d3.event.pageX, d3.event.pageY];
			var o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
			o1[1] = o1[1] > 30  ? 30  :
					o1[1] < -30 ? -30 :
					o1[1];
			projection90.rotate(o1);
			projection180.rotate(o1);
			update();
		  }
		}
		var mouseup = function () {
			if (m0) {
				mousemove();
				m0 = null;
			}
		}	   		
	
				
		d3.select(window)
			.on("mousemove", mousemove)
			.on("mouseup", mouseup);
			
		svg.on("mousedown", mousedown);	
	   			
    });

})();
</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js