Map + satellites

This small example was made to explore how to add geo satellite positions onto a world map.

forked from d3noob's block: Adding names to places

<!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;
}
  
</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 = 960,
    height = 500,
    longitude = -90;

var projection = d3.geoOrthographic()
    .center([0, 0 ])
    .scale(200)
    .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);

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

</script>
</body>
</html>

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

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

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/d3-geo-projection.v2.min.js

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