Skip to content

Instantly share code, notes, and snippets.

@martgnz
Last active October 28, 2017 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martgnz/75519cc603f0254ec753d02a5175ad93 to your computer and use it in GitHub Desktop.
Save martgnz/75519cc603f0254ec753d02a5175ad93 to your computer and use it in GitHub Desktop.
Wikipedia Globe
license: mit
border: none
height: 505
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/rbush@1.4.3/rbush.js"></script>
<script src="https://unpkg.com/spamjs@1.1.0/spam.min.js"></script>
<script type='text/javascript'>
var width = 960;
var height = 600;
var graticule = d3.geo.graticule().step([30, 30]);
// Canvas radial gradient
var x = width / 2,
y = height / 2,
// Radii of the start glow.
innerRadius = 220,
// Radii of the end glow.
outerRadius = 300,
// Radius of the entire circle.
radius = 200;
d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", function(
error,
d
) {
topojson.presimplify(d);
var map = new StaticCanvasMap({
element: "body",
width: width,
height: height,
projection: d3.geo
.orthographic()
.clipAngle(90)
.precision(0.1)
.scale(250)
.rotate([-65, -40, 0]),
data: [
{
features: topojson.feature(d, d.objects["countries"]),
static: {
prepaint: function(parameters) {
parameters.context.beginPath();
parameters.path({ type: "Sphere" });
parameters.context.lineWidth = 2;
parameters.context.strokeStyle = "rgb(198, 197, 197)";
parameters.context.stroke();
var gradient = parameters.context.createRadialGradient(
x,
y,
innerRadius,
x,
y,
outerRadius
);
gradient.addColorStop(0, "rgb(248, 248, 248)");
gradient.addColorStop(1, "rgb(210, 210, 210)");
parameters.context.fillStyle = gradient;
parameters.context.fill();
parameters.context.beginPath();
parameters.path(graticule());
parameters.context.lineWidth = 0.2;
parameters.context.strokeStyle = "rgba(30,30,30, 0.5)";
parameters.context.stroke();
},
paintfeature: function(parameters, d) {
parameters.context.lineWidth = 0.8 / parameters.scale;
parameters.context.strokeStyle = "rgba(0,0,0, 0.6)";
parameters.context.stroke();
if (d.id === "762") {
parameters.context.fillStyle = "rgb(55, 106, 55)";
} else {
parameters.context.fillStyle = "rgb(224, 224, 224)";
}
parameters.context.fill();
}
}
}
]
});
map.init();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment