go_ndm_01

These projections are available in the geo.projection plugin.

forked from mbostock's block: Projection Transitions

forked from anonymous's block: Projection Transitions

forked from vicapow's block: Projection Transitions

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fcfcfa;
  height: 500px;
  position: relative;
  width: 960px;
}

#projection-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<select id="projection-menu"></select>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-geo.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var width = 960,
    height = 500;

var options = [
  {name: "Equirectangular (Plate Carrée)", projection: d3.geoEquirectangular()},
  {name: "Natural Earth", projection: d3.geoNaturalEarth()}
];

options.forEach(function(o) {
  o.projection.rotate([0, 0]).center([0, 0]);
});

var interval = setInterval(loop, 1500),
   i = 0,
    n = options.length - 1;

var projection = options[i].projection;
  
  console.log(projection)

var path = d3.geoPath()
    .projection(projection);

var graticule = d3.geoGraticule();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
  
  svg.append("circle")
    .attr("cx", projection([0,0])[0])
    .attr("cy", projection([0,0])[1])
    .attr("r", 5)
  	.attr("fill", "red");

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) {
  if (error) throw error;

svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);
});

var menu = d3.select("#projection-menu")
    .on("change", change);

menu.selectAll("option")
    .data(options)
  .enter().append("option")
    .text(function(d) { return d.name; });

function loop() {
  var j = Math.floor(Math.random() * n);
  menu.property("selectedIndex", i = j + (j >= i));
  update(options[i]);
}

function change() {
  clearInterval(interval);
  update(options[this.selectedIndex]);
}

function update(option) {
  svg.selectAll("path").transition()
      .duration(750)
      .attrTween("d", projectionTween(projection, projection = option.projection));
}

function projectionTween(projection0, projection1) {
  return function(d) {
    var t = 0;

var projection = d3.geoProjection(project)
        .scale(1)
        .translate([width / 2, height / 2]);

var path = d3.geoPath()
        .projection(projection);

function project(λ, φ) {
      λ *= 180 / Math.PI, φ *= 180 / Math.PI;
      var p0 = projection0([λ, φ]), p1 = projection1([λ, φ]);
      return [(1 - t) * p0[0] + t * p1[0], (1 - t) * -p0[1] + t * -p1[1]];
    }

return function(_) {
      t = _;
      return path(d);
    };
  };
}

</script>

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

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v1.min.js

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

https://d3js.org/d3-geo-projection.v1.min.js

https://d3js.org/topojson.v2.min.js