title: Ad interactivity to list tag in beeswarm viz using D3 v4
body: <p>I have been trying to add some interactivity to a chart using D3, but based on a list tag in the HTML.</p>
  
  <p>What I want to is, when people hover the list items (Brazil, Americas, Africa etc), to the dots to highlight, like <code>opacity: 1;</code> or <code>fade</code> effects, something that will highlight the continent's dots when I hover their names. </p>
  
  <p><a href="http://codepen.io/voltdatalab/pen/KzrNGo?editors=0010" rel="nofollow">Here is the code</a> </p>
  
  <p>I tried variations to the short snippet below, which has worked for me in the past, for more simple charts: </p>
  
  <pre><code>    cell.append("circle")
    .attr("r", 4)
    .attr("cx", function(d) { return d.data.x; })
    .attr("cy", function(d) { return d.data.y; })
    .attr("fill",function(d) { if(d.data.id === "Brasil")return "#000";      
    if(d.data.region === "África")return "rgba(255, 224, 102, 0.4)"; 
    if(d.data.region === "Americas")return "rgba(112, 193, 179, 0.4)"; 
    if(d.data.region === "Europa")return "rgba(36, 123, 160, 0.4)";
    if(d.data.region === "Ásia")return "rgba(250, 166, 26, .4)";if(d.data.region === "Oceânia")return "rgba(141, 153, 174, 0.4)"})
    ;
  
    d3.selectAll(".legenda")
   .on("mouseover", function (d) {
   d3.select (d.region)
   .style("opacity", 1);
   })
   .on("mouseout", function (d) {
   d3.selectAll(".legenda")
   .style("opacity", .4);
   });
  </code></pre>
  
  <p>I haven't figure it out how to bind with the data in this case.</p>