map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const plot = svg.append("g").attr("class", "plot"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", 20) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", py_colors.grey) .style("font-size", width / 40) .style("font-weight", 400) .style("text-transform", "uppercase") .html("Python Developers Survey ") .append("tspan") .attr("font-weight", 700) .text("2021"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", 70) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", py_colors.grey) .style("font-size", `${width / 45}px`) .style("font-weight", 700) .html(d3.format(".0%")(country_spicified_ratio)) .append("tspan") .attr("font-weight", 400) .text( " of the " + _sharing_data_outside.length + " participants specified the country they lived in" ); const plotWorld = plot .append("g") .attr("class", "world_map") .attr("transform", "translate(0," + margin.top + ")"); const plotBubbles = plot .append("g") .attr("class", "bubbles") .attr("transform", "translate(0," + margin.top + ")") .attr("id", "bubbles"); // countries plotWorld .selectAll(".country") .data(countries.features) //geometry for the countries .enter() .append("path") .attr("class", "country") .attr("d", geoPath) .style("stroke", py_colors.grey) .style("fill", py_colors.shandy) .style("stroke-width", 0.5) .style("stroke-linejoin", "round"); // bubbles plotBubbles .selectAll(".bubbles") .data(data) .enter() .append("circle") .attr("class", "bubbles") .attr("cx", (d) => myProjection([d.lon, d.lat])[0]) .attr("cy", (d) => myProjection([d.lon, d.lat])[1]) .attr("r", (d) => scaleRadiusWorld(d["count"])) .style("stroke-width", 1.3) .style("stroke", py_colors.grey) .style("fill", py_colors.azure) .style("mix-blend-mode", "multiply") .style("fill-opacity", 0.8) .nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = data[i]; let content = `

${hover.name}

Python Developers : ${hover.count}

Share of Python Devs : ${d3.format(".1%")( hover.countshare )}

`; tippy(c, { content: content, allowHTML: true, theme: tippytheme }); }); let legend_data = [value_domain[1], (value_domain[1] - value_domain[0]) / 2]; let dashstop = 70; const legend = svg .append("g") .attr("class", "header") .attr( "transform", "translate(" + width / 8 + "," + (height * 4.5) / 5 + ")" ) .attr("text-anchor", "middle") .selectAll("g") .data(legend_data) .join("g"); legend .append("circle") .style("stroke-width", 1) .style("stroke", py_colors.grey) .style("fill", colors.mix) .style("fill-opacity", 0.8) .attr("cy", (d) => -scaleRadiusWorld(d)) .attr("r", scaleRadiusWorld); legend .append("line") .attr("x1", (d) => scaleRadiusWorld(d)) .attr("x2", (d) => dashstop) .attr("y1", (d) => -scaleRadiusWorld(d)) .attr("y2", (d) => -scaleRadiusWorld(d)) .attr("stroke", py_colors.grey) .style("stroke-dasharray", "2,2"); legend .append("text") .attr("class", "arc_label") .attr("y", (d, i) => -scaleRadiusWorld(d)) .attr("x", (d, i) => dashstop) //.attr("dy", "1.3em") .text((d) => d3.format(".0f")(d) + " python devs"); svg .append("text") .attr("class", "legend_data") .attr("x", width / 8) .attr("y", (height * 4.5) / 5 + 5) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", py_colors.grey) .html(" Scale used: " + klabels[k]); svg .append("text") .attr("class", "legend_footer") .attr("x", width - margin.right) .attr("y", height - 10) .style("fill", py_colors.grey) .text(footer); return svg.node(); }