Color specific point in beeswarm d3js (v.4 alpha)

Question

guys, I am working with the most recent beeswarm visualization by Mike Bostock.

I wonder, in D3js v.4, how to change the color of one single specific point. In this case, I am talking about unemployment in more than 180 countries, and I would like to single out only "Brazil" with a different color.

How can I pick Brazil's dot and make it with a different color? As last resort, I suppose I could use SVG to single it out, but its to big a code, burden. I am fairly new to D3.

Here is the code: http://codepen.io/voltdatalab/pen/KzrNGo

 var cell = g.append("g")
  .attr("class", "cells")
.selectAll("g").data(d3.voronoi()
    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
  .polygons(data)).enter().append("g");

  cell.append("circle")
  .attr("r", 5)
  .attr("cx", function(d) { return d.data.x; })
  .attr("cy", function(d) { return d.data.y; })
  ;   

Here is what I want to do:

I did this manipulating the SVG, not D3 code

Answer 1

You need to add .attr("fill",function(d) { if(d.data.id === "Djibouti")return "red"; }) to circle. Following is the change you need to make:

cell.append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return d.data.x; })
      .attr("cy", function(d) { return d.data.y; })
      .attr("fill",function(d) { if(d.data.id === "Djibouti")return "red"; })
      ;

Replace Djibouti with Brazil . Here is a bin . Let me know if you want something like this.