Map of Europe - for Migrant project

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

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

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