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 width="960" height="600">
<defs>
    <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="960" height="500">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000" />
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
      <feMerge>
        <feMergeNode in="offsetBlur" />
        <feMergeNode in="litPaint" />
      </feMerge>
    </filter>	
</defs>	
<rect x="1" y="1" width="960" height="600" fill="#fff" />	
</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 projection = d3.geo.orthographic() 
        .scale(245)	
        .rotate([0,0,0])	
		.translate([w / 2, h / 2])
        .clipAngle(180);	
    
    var path = d3.geo.path().projection(projection);
        
    d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){ 
       
	   
		var stage = svg.append("svg:g").attr("filter", "url(#MyFilter)"); 
		
		
		var map = stage.append("svg:path")
			.attr({
			"d":function(){ return path(geojson)},
				"fill":"none",
				"stroke-width":4,
				"stroke":"gray",
			});
			
 
		// Reference from https://bl.ocks.org/mbostock/6738360		
		var m0, o0;
		var update = function(){
				map.attr("d", function(){ return path(geojson)}); 
		}
		var 	mousedown = function () {
			m0 = [d3.event.pageX, d3.event.pageY];
			o0 = projection.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];
			projection.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