block by wboykinm 7919209

Vermont to the World

Full Screen

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

index.html

<!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="//d3js.org/d3.v3.min.js"></script>
<script src="//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>

vt.csv

code,city,country,lat,lon
vt,vermont,usa,44,-72.5