New PfP

#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(); });