chartp1 = {
const svg = d3.create("svg")
.style("display", "block")
.attr("viewBox", [0, 0, widthp1 + 25, heightp1 + 25]);
const defs = svg.append("defs");
defs.append("path")
.attr("id", "outline")
.attr("d", path(outline));
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", new URL("#outline", location));
const g = svg.append("g")
.attr("clip-path", `url(${new URL("#clip", location)})`);
g.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("fill", "#edfbff");
let animationstate = testp1.b.textContent
var div = d3.select("body").append("div")
.attr("class", "tool-tip")
.style("opacity", 0);
g.selectAll("path")
.append("g")
.data(countriesp1.features)
.join("path")
.attr("fill", d => color(currentDatap1.get(d.properties.name)))
.attr("d", path)
.on('mouseover', function(d, i) {
if(animationstate == "Play"){
d3.select(this).transition()
.duration('50')
.attr('opacity', '.75');
div.transition()
.duration(50)
.style("opacity", 1);
div.html(`${d.properties.name} <br> ${currentDatap1.has(d.properties.name) && currentDatap1.get(d.properties.name) != "N/A" ? "AQI: " + currentDatap1.get(d.properties.name) : "N/A"}`)
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
}})
.on('mouseout', function(d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '1');
div.transition()
.duration(50)
.style("opacity", 0);});
g.append("path")
.datum(topojson.mesh(worldp1, worldp1.objects.countries1, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
const graticule = g.append("path")
.attr("class", "graticule")
.attr("d", path(d3.geoGraticule10()));
svg.call(d3.zoom()
.extent([[0, 0], [widthp1, heightp1]])
.scaleExtent([1, 8])
.on("zoom", zoomed));
function zoomed() {
var e = d3.event,
tx = Math.min(0, Math.max(e.transform.x, widthp1 - widthp1 * e.transform.k)),
ty = Math.min(0, Math.max(e.transform.y, heightp1 - heightp1 * e.transform.k));
e.transform.translate([tx, ty]);
g.attr("transform", [
"translate(" + [tx, ty] + ")",
"scale(" + e.transform.k + ")"].join(" "));
}
return svg.node();
}