D3 Map Projections Morphing

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<style>

.background {
  fill: none;
  pointer-events: all;
}

#states path {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
}

#states path:hover {
  stroke: red;
}

#states .active {
  fill: steelblue;
}

</style>
<body>
  <div id="current_proj_info"></div>
  <div id="myDiv"></div>
<script>

var width = 960,
    height = 500,
    centered;

var projection = d3.geo.winkel3() // ;
    .scale(width/6)
    .translate([width / 2, height / 2]);

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

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height/8, 8 * height])
    .on("zoom", zoom);

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

var states = svg.append("g")
    .attr("id", "states")
    .call(zoom);

states.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);

d3.json("/mortenjohs/4742558/example/world-countries.json", function(json) {
  states.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", path)
      .on("click", click);
});

set_projection(new Option("Mercator", "mercator", false, false));

function click(d) {

// If the click was on the centered state or the background, re-center.
  // Otherwise, center the clicked-on state.
  if (!d || centered === d) {
    projection.translate([width / 2, height / 2]);
    centered = null;
  } else {
    var centroid = path.centroid(d),
        translate = projection.translate();
    projection.translate([
      translate[0] - centroid[0] + width / 2,
      translate[1] - centroid[1] + height / 2
    ]);
    centered = d;
  }

states.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

// Transition to the new projection.
  states.selectAll("path").transition()
      .duration(1000)
      .attr("d", path);
}

function set_projection(option) {
  proj = option.value

projection = eval("d3.geo."+proj+"();");

path = d3.geo.path()
    .projection(projection);

// zoom.translate(projection.translate());

states.selectAll("path").transition()
      .duration(1000)
       .attr("d", path);
  var link = "https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-" + proj
  d3.selectAll("div#current_proj_info").html("Current projection: <a href=\""+link+"\">"+option.text+"</a>");
}

function projection_selected(e){
  set_projection(e.target[e.target.selectedIndex])
}

function zoom() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  states.selectAll("path").attr("d", path);
}

var newSelect = document.createElement("select");
newSelect.id = "selectlistid"; // add some attributes
newSelect.onchange = projection_selected; // call the somethingChanged function when a change is made
newSelect[newSelect.length] = new Option("Aitoff","aitoff",false, false)
newSelect[newSelect.length] = new Option("Albers equal-area conic","albers",false, false);
newSelect[newSelect.length] = new Option("Armadillo","armadillo",false, false);
newSelect[newSelect.length] = new Option("August conformal","august",false, false);
newSelect[newSelect.length] = new Option("Lambert azimuthal equal-area","azimuthalEqualArea",false, false);
newSelect[newSelect.length] = new Option("azimuthal equidistant","azimuthalEquidistant",false, false);
newSelect[newSelect.length] = new Option("Baker Dinomic","baker",false, false);
newSelect[newSelect.length] = new Option("Berghaus Star","berghaus",false, false);
newSelect[newSelect.length] = new Option("Boggs eumorphic","boggs",false, false);
newSelect[newSelect.length] = new Option("Bonne","bonne",false, false);
newSelect[newSelect.length] = new Option("Bromley","bromley",false, false);
newSelect[newSelect.length] = new Option("Collignon","collignon",false, false);
newSelect[newSelect.length] = new Option("Lambert conformal conic","conicConformal",false, false);
newSelect[newSelect.length] = new Option("conic equidistant","conicEquidistant",false, false);
newSelect[newSelect.length] = new Option("Craig retroazimuthal","craig",false, false);
newSelect[newSelect.length] = new Option("Craster parabolic","craster",false, false);
newSelect[newSelect.length] = new Option("cylindrical equal-area, Gall–Peters, Hobo–Dyer, Tobler world-in-a-square","cylindricalEqualArea",false, false);
newSelect[newSelect.length] = new Option("Eckert I","eckert1",false, false);
newSelect[newSelect.length] = new Option("Eckert II","eckert2",false, false);
newSelect[newSelect.length] = new Option("Eckert III","eckert3",false, false);
newSelect[newSelect.length] = new Option("Eckert IV","eckert4",false, false);
newSelect[newSelect.length] = new Option("Eckert V","eckert5",false, false);
newSelect[newSelect.length] = new Option("Eckert VI","eckert6",false, false);
newSelect[newSelect.length] = new Option("Eisenlohr conformal","eisenlohr",false, false);
newSelect[newSelect.length] = new Option("Equirectangular (Plate Carrée)","equirectangular",false, false);
newSelect[newSelect.length] = new Option("Fahey","fahey",false, false);
newSelect[newSelect.length] = new Option("gnomonic","gnomonic",false, false);
newSelect[newSelect.length] = new Option("Gringorten","gringorten",false, false);
newSelect[newSelect.length] = new Option("Guyou hemisphere-in-a-square","guyou",false, false);
newSelect[newSelect.length] = new Option("Hammer, Eckert–Greifendorff, quartic authalic, Briesemeister","hammer",false, false);
newSelect[newSelect.length] = new Option("Hammer retroazimuthal","hammerRetroazimuthal",false, false);
newSelect[newSelect.length] = new Option("HEALPix","healpix",false, false);
newSelect[newSelect.length] = new Option("Hill eucyclic, Maurer No. 73","hill",false, false);
newSelect[newSelect.length] = new Option("Goode homolosine","homolosine",false, false);
newSelect[newSelect.length] = new Option("Kavrayskiy VII","kavrayskiy7",false, false);
newSelect[newSelect.length] = new Option("Lagrange conformal","lagrange",false, false);
newSelect[newSelect.length] = new Option("Larrivée","larrivee",false, false);
newSelect[newSelect.length] = new Option("Laskowski tri-optimal","laskowski",false, false);
newSelect[newSelect.length] = new Option("Littrow","littrow",false, false);
newSelect[newSelect.length] = new Option("loximuthal","loximuthal",false, false);
newSelect[newSelect.length] = new Option("Mercator","mercator",false, true);
newSelect[newSelect.length] = new Option("Miller","miller",false, false);
newSelect[newSelect.length] = new Option("Mollweide, Atlantis","mollweide",false, false);
newSelect[newSelect.length] = new Option("McBryde–Thomas flat-polar parabolic","mtFlatPolarParabolic",false, false);
newSelect[newSelect.length] = new Option("McBryde–Thomas flat-polar quartic","mtFlatPolarQuartic",false, false);
newSelect[newSelect.length] = new Option("McBryde–Thomas flat-polar sinusoidal","mtFlatPolarSinusoidal",false, false);
newSelect[newSelect.length] = new Option("Natural Earth","naturalEarth",false, false);
newSelect[newSelect.length] = new Option("Nell–Hammer","nellHammer",false, false);
newSelect[newSelect.length] = new Option("orthographic","orthographic",false, false);
newSelect[newSelect.length] = new Option("Pierce quincuncial","peirceQuincuncial",false, false);
newSelect[newSelect.length] = new Option("Polyconic","polyconic",false, false);
newSelect[newSelect.length] = new Option("Robinson","robinson",false, false);
newSelect[newSelect.length] = new Option("satellite (tilted perpsective)","satellite",false, false);
newSelect[newSelect.length] = new Option("sinusoidal","sinusoidal",false, false);
newSelect[newSelect.length] = new Option("Sinu-Mollweide","sinuMollweide",false, false);
newSelect[newSelect.length] = new Option("stereographic","stereographic",false, false);
newSelect[newSelect.length] = new Option("Van der Grinten","vanDerGrinten",false, false);
newSelect[newSelect.length] = new Option("Van der Grinten II","vanDerGrinten2",false, false);
newSelect[newSelect.length] = new Option("Van der Grinten III","vanDerGrinten3",false, false);
newSelect[newSelect.length] = new Option("Van der Grinten IV","vanDerGrinten4",false, false);
newSelect[newSelect.length] = new Option("Wagner IV, Putniṇš P2´","wagner4",false, false);
newSelect[newSelect.length] = new Option("Wagner VI","wagner6",false, false);
newSelect[newSelect.length] = new Option("Wagner VII","wagner7",false, false);
newSelect[newSelect.length] = new Option("Wiechel","wiechel",false, false);
newSelect[newSelect.length] = new Option("Winkel Tripel","winkel3",false, false);
document.getElementById('myDiv').appendChild(newSelect); // myDiv is the container to hold the select list

</script>
For more info <a href="https://github.com/mbostock/d3/wiki/Geo-Projections">click here</a>.  
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Changed ajax call from /d/4742558/world-countries.json to /mortenjohs/4742558/example/world-countries.json.

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

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