Interactive Earth

Inspired by earth wind map. A modular visualisation of the earth using layers and d3 projections.

This repo has inspiration code from earth which will eventually be removed. This codebase simply groups together layers and provides a 'layer diff' technique for fast reordering and rerendering of layers.

See the Interactive Earth Handbook for an example of how to group interactive-earth modules together into a visualisation.

Enjoy.

// compute
var d3 = require('d3');
var quadtiles = require('d3-quadtiles');
var projection = d3.geo.orthographic()
  .precision(0.1)
  .clipAngle(90)
  .rotate([-150, 25])
  .scale(150)
  .translate([300, 240])
  .clipExtent([[0, 0], [600, 480]]);
var quadtiles = require('d3-quadtiles');
var quad = quadtiles(projection, { maxtiles: 32, maxzoom: 18 });

// ui
var el = document.querySelector('#map');
var interactiveEarth = require('interactive-earth');
var earth = interactiveEarth(el, { classname: 'earth' });
var tiles = require('interactive-earth-tiles');
var naturalearth = tiles({ url: '//{subdomain}.tiles.mapbox.com/v3/mapbox.natural-earth-2/{z}/{x}/{y}.png' });

var layers = [];
layers.push(['tiles', naturalearth]);

// every update or frame
earth.render(layers, projection, quad);

Each layer is indexed by a string id which is used to update the correct dom element.