D3 Examples - globe with longitude slider

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
​
.graticule {
   fill: none;
   stroke: #999;
   stroke-width: 0.5px;
   stroke-opacity: 0.5;
}
​
.land {
  fill: #ccc;
}
​
.ticks {
  font: 10px sans-serif;
}
​
.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}
​
.track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 10px;
}
​
.track-inset {
  stroke: #ddd;
  stroke-width: 8px;
}
​
.track-overlay {
  pointer-events: stroke;
  stroke-width: 50px;
  stroke: transparent;
  cursor: crosshair;
}
​
.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
}  
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>  
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 940,
    height = 500,
    longitude = -90;
​
var projection = d3.geoOrthographic()
    .center([0, 0 ])
    .scale(220)
    .rotate([longitude,0]);
​
var graticule = d3.geoGraticule();
  
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var path = d3.geoPath()
    .projection(projection);
​
​
var g = svg.append("g");
​
   g.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
​
var x = d3.scaleLinear()
    .domain([-180, 180])
    .range([0, width])
    .clamp(true);
​
var slider = svg.append("g")
    .attr("class", "slider")
​
slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() { slide(x.invert(d3.event.x)); }));
​
slider.insert("g", ".track-overlay")
    .attr("class", "ticks")
    .attr("transform", "translate(0," + 18 + ")")
  .selectAll("text")
  .data(x.ticks(10))
  .enter().append("text")
    .attr("x", x)
    .attr("text-anchor", "middle")
    .text(function(d) { return d + "°"; });
​
var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("cx", 470)
    .attr("id", "longitude")
    .attr("r", 9);
​
d3.select("body").insert("h2", ":first-child").text(longitude);
  
// load and display the World
d3.json("world-110m2.json", function(error, topology) {
  
// load and display the cities
d3.csv("cities.csv", function(error, data) {
    g.selectAll("circle")
       .data(data)
       .enter()
       // only visible cities
         .filter(function(d){ 
            var mlon = (d.lon % 360) + longitude; 
                    if (mlon > -90 && mlon < 90) {
            return d;
          }
       })
           .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", 3)
           .style("fill","red");
       
    g.selectAll("text")
       .data(data)
       .enter()
       // only visible cities
         .filter(function(d){ 
            var mlon = (d.lon % 360) + longitude; 
                    if (mlon > -90 && mlon < 90) {
            return d;
          }
       })
       .append("text") // append text
       .attr("x", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("y", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("dy", -7) // set y position of bottom of text
      .style("fill", "black") // fill the text with the colour black
      .attr("text-anchor", "middle") // set anchor y justification
      .text(function(d) {
            return d.city;
        }); // define the text to display
​
});
​
// TODO:
  // change land colour from styles
  // hover over countries?
  // make the graticule zoom
// show equator
// add satellite positions in blue - maybe a satellite icon
// add some solution so satellites at same long are not on top of each other
// button to reset zoom
// keyboard keys - right/left/spacebar?
  
g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});
​
  
// zoom and pan
var zoom = d3.zoom()
        .scaleExtent([1, 10])
    .translateExtent([[0,0],[960,500]])
    .on("zoom",function() {
        g.attr("transform",d3.event.transform)
        g.selectAll("circle")
            .attr("d", path.projection(projection));
​
  });
​
svg.call(zoom)
​
function slide(h) {
  handle.attr("cx", x(h));
  longitude = h;
  d3.select("h2").text(Math.trunc(h));
}
  
</script>
</body>
</html>
​
    