Class13 3D wire

<!DOCTYPE html>
<meta charset='utf-8'>
<title>three quakes</title>
<body>
<script src="https://unpkg.com/three@0.84"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 960,
    radius = 228,
    mesh,
    graticule,
    scene = new THREE.Scene,
    camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000),
    renderer = new THREE.WebGLRenderer({alpha: true}),
    group = new THREE.Object3D(),
    z = d3.scaleLinear().domain([0,6371]).range([radius, 0]);

camera.position.z = 400;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var atlas = "https://unpkg.com/world-atlas@1/world/50m.json";
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

d3.queue()
    .defer(d3.json, atlas)
    .defer(d3.json, usgs)
    .await(ready);

function ready(error, topology, quakes) {
  if (error) throw error;

scene.add(graticule = wireframe(graticule10(), new THREE.LineBasicMaterial({color: 0xaaaaaa})));
  scene.add(mesh = wireframe(topojson.mesh(topology, topology.objects.land), new THREE.LineBasicMaterial({color: 0xff0000})));
  quakes.features.forEach(function(d) { group.add(createDot(d)) });
  scene.add(group);
  d3.timer(function(t) {
    group.rotation.x = graticule.rotation.x = mesh.rotation.x = Math.sin(t / 11000) * Math.PI / 3 - Math.PI / 2;
    group.rotation.z = graticule.rotation.z = mesh.rotation.z = t / 10000;
    renderer.render(scene, camera);
  });
}

// Converts a point [longitude, latitude] in degrees to a THREE.Vector3.
function vertex(point) {
  var lambda = point[0] * Math.PI / 180,
      phi = point[1] * Math.PI / 180,
      cosPhi = Math.cos(phi),
      r = point[2] ? z(5*point[2]) : radius; // Depth below surface (km) optional
  return new THREE.Vector3(
    r * cosPhi * Math.cos(lambda),
    r * cosPhi * Math.sin(lambda),
    r * Math.sin(phi)
  );
}

function createDot(feature) {
  var dc = [-77.0369, 38.9072];
  var position = vertex(feature ? feature.geometry.coordinates : dc);
  var material = new THREE.SpriteMaterial({ color: 0x0000ff });
  var dot = new THREE.Sprite(material);
  dot.position.set(position.x, position.y, position.z);
  return dot;
}

// Converts a GeoJSON MultiLineString in spherical coordinates to a THREE.LineSegments.
function wireframe(multilinestring, material) {
  var geometry = new THREE.Geometry;
  multilinestring.coordinates.forEach(function(line) {
    d3.pairs(line.map(vertex), function(a, b) {
      geometry.vertices.push(a, b);
    });
  });
  return new THREE.LineSegments(geometry, material);
}

// See https://github.com/d3/d3-geo/issues/95
function graticule10() {
  var epsilon = 1e-6,
      x1 = 180, x0 = -x1, y1 = 80, y0 = -y1, dx = 10, dy = 10,
      X1 = 180, X0 = -X1, Y1 = 90, Y0 = -Y1, DX = 90, DY = 360,
      x = graticuleX(y0, y1, 2.5), y = graticuleY(x0, x1, 2.5),
      X = graticuleX(Y0, Y1, 2.5), Y = graticuleY(X0, X1, 2.5);

function graticuleX(y0, y1, dy) {
    var y = d3.range(y0, y1 - epsilon, dy).concat(y1);
    return function(x) { return y.map(function(y) { return [x, y]; }); };
  }

function graticuleY(x0, x1, dx) {
    var x = d3.range(x0, x1 - epsilon, dx).concat(x1);
    return function(y) { return x.map(function(x) { return [x, y]; }); };
  }

return {
    type: "MultiLineString",
    coordinates: d3.range(Math.ceil(X0 / DX) * DX, X1, DX).map(X)
        .concat(d3.range(Math.ceil(Y0 / DY) * DY, Y1, DY).map(Y))
        .concat(d3.range(Math.ceil(x0 / dx) * dx, x1, dx).filter(function(x) { return Math.abs(x % DX) > epsilon; }).map(x))
        .concat(d3.range(Math.ceil(y0 / dy) * dy, y1 + epsilon, dy).filter(function(y) { return Math.abs(y % DY) > epsilon; }).map(y))
  };
}

</script>

https://unpkg.com/three@0.84

https://unpkg.com/topojson-client@3

https://d3js.org/d3.v4.min.js