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
xxxxxxxxxx
<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