Wikipedia Globe by martgnz

index.html

<!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>