map = { for (let i = 0; i < 200; i++){ simulation.tick(); } const svg = d3.create("svg") .attr("width", width) .attr("height", h) .attr("overflow", "visible"); var map = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["EU", "AF", "AN", "AS", "SA","NA","OC"]) .range(d3.schemeSet3); var centroid_map = new Map(); countries.features.forEach(function (c) { var centroid = path.centroid(c); if (!isNaN(centroid[0])) { centroid_map.set(c.properties.NAME, centroid); } }); var p = parameter.toLowerCase().replace(" ", ""); var max = d3.max(country_data.map((z) => +z[p])); var bubble_group = svg.append("g"); // Using the same data to plot the circles and generate the hover var filtered_data = data.filter((z) => centroid_map.has(z.CountryName)); svg.call(d3.zoom() .scaleExtent([1, 8]) .translateExtent([[-width,-h],[width * 2, h * 2]]) .on("zoom", zoomed)); function zoomed() { var transform = d3.zoomTransform(this); bubble_group.attr("transform", transform); } svg.selectAll("circle") .data(countries.features) //.data(filtered_data) .enter().append("circle") .attr("r", d => r(d.properties.POP_EST)) //.attr("r", (d) => d3.max([7, 30 * Math.sqrt(+d[p] / max)])) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", "steelblue") .attr("fill-opacity", 0.3) .attr("stroke", "steelblue").nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = countries.features[i].properties; let content = `

${hover.NAME}

CountryCode : ${hover.ISO_A2}

ContinentCode : ${hover.CONTINENT}

${parameter } : ${d3.format(",")(hover[p])}

` tippy(c, { content: content, allowHTML: true, theme: "light-border", placement: "top", boundary: "window", display: "flex", }); }); return svg.node(); }