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