chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.selectAll("circle")
.data(data3)
.join("circle")
.attr('r', d => airbnb_scale_r(d.perc_Airbnb))
.attr('cx', d => x(d.x))
.attr('cy', d => y(d.y))
.style('mix-blend-mode', 'multiply')
.attr("fill", function(d) {
if (d.perc_Airbnb > 10) {
return "#F9DC5C";
}
return "#29DDC7";
})
.attr("opacity", function(d) {
if (d.perc_Airbnb > 10 && d.perc_Airbnb < 30) {
return 1;
}else if (d.perc_Airbnb > 29 && d.perc_Airbnb < 50){
return 1;
}else if (d.perc_Airbnb > 49 && d.perc_Airbnb < 100){
return 1;
}else if (d.perc_Airbnb > 99){
return 1;
}
return 1;
})
return svg.node();
}