#map {
width: 100%;
height: 600px;
margin: 0 auto;
}
const width = document.getElementById("map").offsetWidth;
const height = document.getElementById("map").offsetHeight;
const projection = d3.geoNaturalEarth1()
.scale(width / 2 / Math.PI)
.translate([width / 2, height / 2]);
const svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.json("https://unpkg.com/world-atlas/world/110m.json").then(data => {
const countries = topojson.feature(data, data.objects.countries);
svg.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.attr("fill", "#ccc")
.attr("d", d3.geoPath(projection));
});
svg.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.attr("fill", "#ccc")
.attr("d", d3.geoPath(projection))
.on("mouseover", function(event, d) {
const countryName = d.properties.name;
const timezone = moment.tz.guess();
const showTimes = [
moment.utc("5:00", "H:mm").tz(timezone).format("h:mm A z"),
moment.utc("11:00", "H:mm").tz(timezone).format("h:mm A z"),
moment.utc("17:00", "H:mm").tz(timezone).format("h:mm A z"),
moment.utc("23:00", "H:mm").tz(timezone).format("h:mm A z")
];
d3.select(this)
.attr("fill", "#f00")
.append("title")
.text(`${countryName}\n${showTimes.join("\n")}`);
})
.on("mouseout", function(event, d) {
d3.select(this)
.attr("fill", "#ccc")
.select("title")
.remove();
});
Community Net Vision