reproject d3.carto.map

Trying to make a little page to reproject data using d3.carto jam and it kind of works.

Things which could make this a little nicer:

-Adding some graticules.

-Adding different kinds of layers.

-Figure out what the errors are about the paths which get multiplied when panning in globe mode.

For some much cleaner better javascript examples of how to do similar things w/ d3 please see Jason Davies stuff like http://www.jasondavies.com/maps/transition/ and Mike Bostocks stuff like /mbostock/3711652.

Really I'm just trying to figure out how to kind of do some things they did w/ d3-carto-map.

As always let me know if there is anything silly in my code or how I could make it better.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>reprojection selection</title>
  <meta charset="utf-8" />

</head>

#map {
    height: 90%;
    width: 90%;
    top: 10%;
    position: absolute;
  }

#title {
    padding: 20px;
  }

.bluesquare {
    fill: green;
    stroke: gray;
    stroke-width: 1px;
  }

button.marker {
    position: fixed;
    z-index: 1;
    bottom: 150px;
    left: 150px;
  }

.countryborders{
    fill:#99d8c9
  }

.reproject{
    margin-top:-10;
  }

.reprojectshp{
  margin-top:-10;
}

#projection-menu{
  margin-top:10px;
}

</style>

<select id="projection-menu"></select>
<script>
  function makeSomeMaps() {

var map =d3.carto.map();
  d3.select('#map')
    .call(map);

map.mode('globe');
map.zoom().scale(300)

map.refresh();

countryLayer = d3.carto.layer.geojson();
    countryLayer
    .path("./world.geojson")
    .label("Countries")
    .cssClass("countryborders")
    .renderMode("svg");

map.addCartoLayer(countryLayer);

d3.select("#map").append("button").attr("class", "reproject").html("Projection Mode").on("click", reproject);

d3.select("#map").append("button").attr("class", "reprojectshp").html("Sphere mode").on("click", sphereit);

function reproject(){
  var projection = d3.geo.conicEquidistant()
  .center([0, 0])
  .scale(200)
  .translate(map.zoom().translate())
  .precision(.1);

map.mode('projection')
  map.projection(projection);
  map.refresh();

};

// this is the funciton getting called by the sphere thing
function sphereit(){
  map.mode('globe');
  map.refresh;

};

// big list of d3.geo projections from https://bl.ocks.org/mbostock/3711652
var options = [
  {name: "Aitoff", projection: d3.geo.aitoff()},
  {name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50])},
  {name: "August", projection: d3.geo.august().scale(60)},
  {name: "Baker", projection: d3.geo.baker().scale(100)},
  {name: "Boggs", projection: d3.geo.boggs()},
  {name: "Bonne", projection: d3.geo.bonne().scale(120)},
  {name: "Bromley", projection: d3.geo.bromley()},
  {name: "Collignon", projection: d3.geo.collignon().scale(93)},
  {name: "Craster Parabolic", projection: d3.geo.craster()},
  {name: "Eckert I", projection: d3.geo.eckert1().scale(165)},
  {name: "Eckert II", projection: d3.geo.eckert2().scale(165)},
  {name: "Eckert III", projection: d3.geo.eckert3().scale(180)},
  {name: "Eckert IV", projection: d3.geo.eckert4().scale(180)},
  {name: "Eckert V", projection: d3.geo.eckert5().scale(170)},
  {name: "Eckert VI", projection: d3.geo.eckert6().scale(170)},
  {name: "Eisenlohr", projection: d3.geo.eisenlohr().scale(60)},
  {name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular()},
  {name: "Hammer", projection: d3.geo.hammer().scale(165)},
  {name: "Hill", projection: d3.geo.hill()},
  {name: "Goode Homolosine", projection: d3.geo.homolosine()},
  {name: "Kavrayskiy VII", projection: d3.geo.kavrayskiy7()},
  {name: "Lambert cylindrical equal-area", projection: d3.geo.cylindricalEqualArea()},
  {name: "Lagrange", projection: d3.geo.lagrange().scale(120)},
  {name: "Larrivée", projection: d3.geo.larrivee().scale(95)},
  {name: "Laskowski", projection: d3.geo.laskowski().scale(120)},
  {name: "Loximuthal", projection: d3.geo.loximuthal()},
  // {name: "Mercator", projection: d3.geo.mercator().scale(490 / 2 / Math.PI)},
  {name: "Miller", projection: d3.geo.miller().scale(100)},
  {name: "McBryde–Thomas Flat-Polar Parabolic", projection: d3.geo.mtFlatPolarParabolic()},
  {name: "McBryde–Thomas Flat-Polar Quartic", projection: d3.geo.mtFlatPolarQuartic()},
  {name: "McBryde–Thomas Flat-Polar Sinusoidal", projection: d3.geo.mtFlatPolarSinusoidal()},
  {name: "Mollweide", projection: d3.geo.mollweide().scale(165)},
  {name: "Natural Earth", projection: d3.geo.naturalEarth()},
  {name: "Nell–Hammer", projection: d3.geo.nellHammer()},
  {name: "Polyconic", projection: d3.geo.polyconic().scale(100)},
  {name: "Robinson", projection: d3.geo.robinson()},
  {name: "Sinusoidal", projection: d3.geo.sinusoidal()},
  {name: "Sinu-Mollweide", projection: d3.geo.sinuMollweide()},
  {name: "van der Grinten", projection: d3.geo.vanDerGrinten().scale(75)},
  {name: "van der Grinten IV", projection: d3.geo.vanDerGrinten4().scale(120)},
  {name: "Wagner IV", projection: d3.geo.wagner4()},
  {name: "Wagner VI", projection: d3.geo.wagner6()},
  {name: "Wagner VII", projection: d3.geo.wagner7()},
  {name: "Winkel Tripel", projection: d3.geo.winkel3()}
];

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

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

function change(){
    console.log(options[this.selectedIndex].projection);

var projector = options[this.selectedIndex].projection;

var projection = projector
      .center([0, 0])
      .scale(100)
    //  .translate(map.zoom().translate())
      .precision(.1);

map.projection(projection);
      map.refresh();

}

</script>
<body onload="makeSomeMaps()">

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

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

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

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

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

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js