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, the scatterplot, to highlight the specific circle/dot which displays the data of the country that was clicked on. Could you please help me? So far i made sure that when a country is clicked, the country code is returned.

The code of the worldmap:

new Datamap({
  scope: 'world',
  done: function(datamap) {
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
      console.log(geography.id);
  });
},
element: document.getElementById('container1'),
fills: {
   A: '#fdd0a2',
   B: '#fdae6b',
   C: '#fd8d3c',
   D: '#f16913',
   E: '#d94801',
   F: '#a63603',
   G: '#7f2704',
   defaultFill: 'grey' 
},
geographyConfig: {
    borderColor: 'rgba(255,255,255,0.3)',
    highlightBorderColor: 'rgba(0,0,0,0.5)',
    popupTemplate: function(geo, data) {
      return data && data.GDP ?
      '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong><br/>GDP: <strong> $ ' + data.GDP + '</strong></div>' :
      '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong></div>';
  }
},
data: {
    "ABW": {
        "country": "Aruba",
        "fillKey": "No data",
        "GDP": "No data"
    },
    "AND": {
        "country": "Andorra",
        "fillKey": "No data",
        "GDP": "No data"
    },
    ....

The Scatterplot code:

function ScatterCorruption(){

// determine parameters
var margin = {top: 20, right: 20, bottom: 200, left: 50},
    width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// determine x scale
var x = d3.scale.linear()
.range([0, width]);

// determine y scale
var y = d3.scale.linear()
.range([height, 0]);

// determine x-axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

// determine y-axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

// make svg
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// load in data
d3.tsv("ScatCor.txt", function(error, data) {
    if (error) throw error;

  // convert data
  data.forEach(function(d) {

    d.GDP = +d.GDP;
    d.Variable = +d.Variable;
  });

  // extract the x labels for the axis and scale domain
    // var xLabels = data.map(function (d) { return d['GDP']; })

  // x and y labels
  x.domain(d3.extent(data, function(d) { return d.GDP; }));
  y.domain(d3.extent(data, function(d) { return d.Variable; }));

  // make x-axis
  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")  
  .style("text-anchor", "end")
  .attr("dx", "-.5em")
  .attr("dy", ".15em")
  .attr("transform", "rotate(-40)" )

    // make x-axis label
    svg.append("text")
    .attr("x", (width -20))
    .attr("y", height - 5)
    .attr("class", "text-label")
    .attr("text-anchor", "end")
    .text("GDP");

  // make y-axis
  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("class", "label")
  .attr("transform", "rotate(-90)")
  .attr("y", -40)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("corruption points")

  // make dots
  svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("r", 2.5)
  .attr("cx", function(d) { return x(d.GDP); })
  .attr("cy", function(d) { return y(d.Variable); });

  // chart title
  svg.append("text")
  .attr("x", (width + (margin.left + margin.right) )/ 2)
  .attr("y", 0)
  .attr("text-anchor", "middle")
  .style("font-size", "16px")
  .style("font-family", "sans-serif")
  .text("Corruption");
 }

The data is an tsv file and has the following structure:

Country Name    CountryCode GDP Variable
Gambia  GMB 850902397.34    72
Guinea-Bissau   GNB 1022371991.53   83
Timor-Leste TLS 1417000000.00   72
Seychelles  SYC 1422608276.1    45
Liberia LBR 2013000000.00   63

Any help would be greatly appreciated!

Thanks

回答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) { return x(d.GDP); })
  .attr("cy", function(d) { return y(d.Variable); });

Now, you can used 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