Vermont to the World

An attempt to show Vermont at the center of the projected map, but with maximum visibility and minimal distortion on other landforms. Note that this was only accomplished by clipping Australia out of the periphery, since it's hella-area-distorted in this arrangement. Based on the fine projection work of Mike Bostock and Jason Davies

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

body {
  background: #fcfcfa;
}

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

.fill {
  fill: #6DB4D2;
}

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

.land {
  fill: #259056;
}

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

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                 
  padding: 3px;             
  font: 12px sans-serif;        
  background: #333; 
  color:#e2e3e3;  
  border: 1px solid #97EEBF; 
  border-radius: 0px;           
  pointer-events: none;         
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 960;

var projection = d3.geo.azimuthalEquidistant()
    .scale(190)
    .translate([width / 2, height / 2])
    .clipAngle(135 - 1e-3)
    .precision(.1)
    .rotate([74 + 45 / 60, -52 - 50 / 60]);

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

var graticule = d3.geo.graticule();

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);

var g = svg.append("g");

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

d3.xhr("https://api.github.com/repos/wboykinm/geosprocket-geodata/contents/world-50m.json", "application/vnd.github.v3.raw+json", function(error, data) {
  world = JSON.parse(data.response);

// load and display the cities
  d3.csv("vt.csv", function(error, data) {

g.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 10)
       .attr('opacity', 0.7)
       .attr('stroke', '#ffffff')
       .attr('stroke-width', 1)
       .style("fill", "#97eebf")
       .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", 1);      
            div .html(d.city)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px"); 
            g   .style('opacity', 1); 
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0); 
            g   .style('opacity', 0.7);  
        }); 
  });

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

svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
});

d3.select(self.frameElement).style("height", height + "px");

</script>

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

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

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

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