Highlight Neighboring Countries

<!doctype html>
<html>
<head>
<title>World TopoJSON</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="topojson.js"></script>
<script src="colorbrewer.v1.min.js"></script>
</head>
<body>
</body>
<script>
	
var width = 800
var height = 700

var promiseWrapper = (xhr, d) => new Promise(resolve => xhr(d, (p) => resolve(p)));

Promise.all([promiseWrapper(d3.json,"world.topojson")]).then(resolve =>{
	createMap(resolve[0])
	});

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

function createMap(topoCountries){
				
	var countries = topojson.feature(topoCountries, topoCountries.objects.countries)
	
		var projection = d3.geoMollweide()
			.scale(180)
			.translate([400,250])
			.center([20,0])
		
		var geoPath = d3.geoPath().projection(projection)
		
		var featureSize = d3.extent(countries.features, d => geoPath.area(d))
		
		var countryColor = d3.scaleQuantize()
			.domain(featureSize).range(colorbrewer.Greens[7]);
		
		svg.selectAll("path.countries")
			.data(countries.features)
			.enter()
			.append("path")
			.attr("d", geoPath)
			.classed("countries", true)
			.style("fill", d => countryColor(geoPath.area(d)))
			.style("stroke","grey")
	
	// NEIGHBORS
	
	var neighbors = topojson.neighbors(topoCountries.objects.countries.geometries)
	d3.selectAll("path.countries")
		.on("mouseover", findNeighbors)
		.on("mouseleave", clearNeighbors)
	
	function findNeighbors(d,i){
		d3.select(this).style("fill","red")
		d3.selectAll("path.countries")
			.filter((p,q) => neighbors[i].includes(q))
			.style("fill","orange")
	}
		
	function clearNeighbors(d){
		d3.selectAll("path.countries")
			.style("fill", d => countryColor(geoPath.area(d)))
	}
}

</script>
</html>

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

https://d3js.org/d3-geo-projection.v2.min.js