index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #fff;
}
</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 = 500;
var projection = d3.geo.orthographic()
.translate([width / 2, height / 2])
.scale(170)
.rotate([-15,-40,0])
.clipAngle(40)
.precision(0.6);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("world.json", function(error, world) {
console.log(world)
if (error) throw error;
svg.append("path")
.datum(topojson.feature(world, world.objects.ne_110m_land))
.attr("d", path);
var citiesData = [{"city": "Stockholm", location: {"lat": 59.3294, "long": 18.0686}}];
svg.append("circle")
.attr("r", 110)
.attr("cx", width/2)
.attr("cy", height/2)
.attr("fill", "none")
.attr("stroke", "grey")
svg.append("g")
.attr("class", "cities")
.selectAll(".cityDot")
.data(citiesData)
.enter().append("circle")
.attr("class", "cityDot")
.attr("transform", function(d) {
return "translate(" + projection([
d.location.long,
d.location.lat
]) + ")"
})
.attr("r", 3)
.attr("fill", "red");
});
</script>