makeScatterPlot = circlesContainer => {
const scatterData = gapminderData.filter(d => d.year === year);
circlesContainer.selectAll("circle.dot")
.data(scatterData)
.join("circle")
.attr("class", "dot")
.attr("cx", d => xScaleScatter(d.fertility))
.attr("cy", d => yScaleScatter(d.life_expect))
.attr("r", d => radiusScale(d.pop))
.attr("fill", d => d.country === selectedCountry ? "#3484c7" : quantizedColor(d.life_expect))
.attr("opacity", 0.8)
.on("click", (event, d) => {
if (d.country === selectedCountry) {
mutable selectedCountry = null;
}
else mutable selectedCountry = d.country;
});
circlesContainer.append("g")
.call(yAxisScatter);
circlesContainer.append("g")
.call(xAxisScatter);
circlesContainer.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("fill", "currentColor")
.attr("y", 30)
.attr("x", 10)
.text(`Average Fertility & Life Expectancy by Country in ${year}`);
}