SVG глобус, невидимая часть

Имеется вращающийся глобус, где при наведении на определенные страны, те подсвечиваются. Проблема в том, что мне надо, чтобы на задней части глобуса страны не светились, а границы континентов меняли свой цвет. Я думал, что можно как-то изменить clipAngle и создать несколько наложенных карт с разным уровнем видимости, которые вращались бы одновременно, но это сразу так не вышло. Потом я пробовал создать две проекции опять же с разным значением clipAngle, но оно все равно ломается. Может кто помочь с этой проблемой?

// Draw the world 
var world = svg.selectAll('.lands').data([land]).enter().append('path').attr("class", "lands").attr('d', path);
// Draw the cities
var cities = svg.selectAll('.cities').data([points]).enter().append('path').attr("class","cities").attr('d', path);
//Draw the countries
d3.json("https://rawgit.com/Bramsiss/Globe/master/world-counries1.json", function(collection) { 
var countries = svg.selectAll(".country").data(collection.features).enter().append("path").attr("d", path).attr("class", "country");
 countries.on("mouseover", function() {
 this.style.stroke = 'rgba(193, 0, 32, 0.5)';
})
.on("mouseout", function() {
this.style.stroke = 'rgba(0, 0, 0, 0)';
});

Может там действительно это как-то слишком просто решается, но я уже третий день мучаюсь...

Ну и сам глобус: https://codepen.io/bramsis/pen/ZvzGdo