World Cup 2018 in Russia

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background: #fff;
}
.point {
  fill:red
}
.text {
  font-size:50%;
}
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #bbb;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geoMercator()
      .scale(width / 1.7)
      .translate([width / 2, height / 2])
      .rotate([-20,0])
      .center([ 20, 50 ]);

var path = d3.geoPath().projection(projection);

var graticule = d3.geoGraticule();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) {
  if (error) throw error;

svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
});
  
  
//function to add points and labels to map
function addpoint(lon,lat,text) {

var gpoint = svg.append("g").attr("class", "gpoint");
  var x = projection([lon,lat])[0];
  var y = projection([lon,lat])[1];

gpoint.append("svg:circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("class","point")
        .attr("r", 1.5);

//conditional in case a point has no associated text
  if(text.length>0){

gpoint.append("text")
          .attr("x", x+2)
          .attr("y", y+2)
          .attr("class","text")
          .text(text);
  }

}

//load world cup cities from csv
d3.csv("world-cup-2018-cities.csv", function(error, cities) {
  if (error) throw error;
  console.log(cities);
	cities.forEach(function(i){
  	addpoint(i.lon, i.lat, i.city );
  });
});
  
  
//reference
/*
https://techslides.com/demos/d3/worldmap-template-d3v4.html
https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
https://bl.ocks.org/MariellaCC/0055298b94fcf2c16940
*/
  
  
</script>
</body>

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

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