map = { // We're going to draw the map on the following SVG. var svg = d3.create("svg").attr("width", w).attr("height", h); var div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`); var map = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["EU", "AF", "AC", "AS", "SA"]) .range(d3.schemeSet1); // Draw the graticule svg .append("path") .attr("d", path(d3.geoGraticule10())) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Draw the countries var country_group = svg.append("g"); country_group .selectAll("path") .data(countries.features) .join("path") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "black") .attr("stroke-width", 1); 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); } }); // The names of the countries in one file don't necessarily agree with // the names in the other. You can manually set the centroid for a // name in the CSV file to the value in the GEO file as follows: centroid_map.set( "United States", centroid_map.get("United States of America") ); centroid_map.set("Cote d Ivorie", centroid_map.get("Côte d'Ivoire")); // Draw the bubbles. var p = parameter.toLowerCase().replace(" ", ""); var max = d3.max(country_data.map((o) => +o[p])); var bubble_group = svg.append("g"); // Use the same data to plot the circles and generate the hover var filtered_data = data.filter((o) => centroid_map.has(o.CountryName)); bubble_group .selectAll("circle") .data(filtered_data) .join("circle") .attr("cx", (d) => centroid_map.get(d.CountryName)[0]) .attr("cy", (d) => centroid_map.get(d.CountryName)[1]) .attr("r", (d) => 20 * Math.sqrt(+d[p] / max)) .attr("fill", "blue") .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 1) .style("fill", function (d) { return myColor(d.ContinentCode); } ) .style("opacity", "10") .attr("stroke", "red") .style("stroke-width", "2px") //mousehover color .on("pointerenter", function () { d3.select(this) .attr("stroke", "red") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1); }) .on("pointerleave", function () { d3.select(this) .attr("stroke", "#600") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 1); }) .nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = filtered_data[i]; let content = `

${hover.CountryName}

CountryCode : ${hover.CountryCode}

ContinentCode : ${hover.ContinentCode}

${d3.format(',')(hover[p])}

`; tippy(c, { content: content, allowHTML: true, theme: "light-border" }); }); svg.call( d3 .zoom() .extent([ [0, 0], [w, h] ]) .translateExtent([ [0, 0], [w, h] ]) .scaleExtent([1, 6]) .duration(500) .on("zoom", function (evt) { map.attr("transform", evt.transform); }) ); return svg.node(); }