How To Make Scatterplot Highlight Data On-click

Dear fellow programmers, I'm trying to make 2 interactive visualisations. The first one is a worldmap on which the user can click. With every click i want the second visualisation,

Solution 1:

A quick option would be to add country code as class or id attribute to the circle.

Something like this

// make dots
svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", function(d) { return d.CountryCode + " dot"; }) // <--- See this line
  .attr("r", 2.5)
  .attr("cx", function(d) { returnx(d.GDP); })
  .attr("cy", function(d) { returny(d.Variable); });

Now, you can use the countryCode you returned to just set another class or directly add color style.

var highlightData = function(country){
  // remove any highlights
  d3.selectAll('.dot').classed('active', false);
  d3.select('.' + country).classed('active',true);
}

Now all you need is some styling that will apply the look you want for the highlighted points

.dot.active {
  fill: #bada55;
}

You could also apply the style to the g tag and do more with the active data point.