Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/index.html

Last active August 29, 2015 14:23
Show Gist options
  • Save shimizu/8a32984c6813137069c2 to your computer and use it in GitHub Desktop.
Save shimizu/8a32984c6813137069c2 to your computer and use it in GitHub Desktop.
Download ZIP
地球儀 - 針金細工
Raw
index.html
<!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 http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment