Accepted answer

The problem is that the data points that are used to draw the circles don't contain name parameter. For all the circles is undefined and they are all colored the same (third color from the z scale, which happens to be green). The easiest solution should be to add the name parameter to data points like this:

var lookBookData = z.domain().map(function (name) {
  return {
    name: name,
    values: (d) {
      return {date:, lookbookcount: d[name], name: name};


If you apply the fill to the group the children will inherit that style."fill", function(d) {
    return z(;
  .data(function (d) {
    return d.values;
  .attr("class", "circle")
  .attr("r", 4)
  .attr("cx", function (d) {
    return x(;
  .attr("cy", function (d) {
    return y(d.lookbookcount);

The way your code is doing right now, after you bind the data using just the values, the circles have no reference to name anymore.

PS: applying styles to groups will change all their children. So, a solution following @Tormi approach may suit you better.

Related Query

More Query from same tag