d3.js Chart - QQ Plot - different colors for each part of the chart

Question

Need help to generate the colors in chart

Problem : I am creating d3 chart - QQ plot, I want to add colors to each part of the chart. But I am not able to do it, so required help on this.

Js fiddle link

Thank you for your valuable time.

Any help is appreciated

Refrence. I am considering D3 QQ plot over protovis QQ plot due to ease of customisation.

Protovis QQ plot

D3 original QQ Plot

Data will be binded in following code

  var g = vis.selectAll("g") 
.data([{
  x: d3.range(n).map(Math.random),
  y: turkers[0].percent.values,
  label: "Uniform Distribution"
}, {
  x: d3.range(n).map(normal1(tm, td)),
  y: turkers[0].percent.values,
  label: "Gaussian (Normal) Distribution"
}, {
  x: d3.range(n).map(normal3(dd)),
  y: turkers[0].percent.values,
  label: "Mixture of 3 Gaussians"
}])
.enter().append("g")
.attr("class", "qq")
.attr("r", 5)
.attr("transform", function(d, i) {
  return "translate(" + (width + margin.right + margin.left) * i + ")";
})

Answer 1

One possible solution (out of many) is selecting the circles inside each group:

g.each(function(_, i) {
    d3.select(this).selectAll("circle").style("stroke", colors(i))
});

In this case, the second argument (i) is the index of each group, which I'm using to pass to a color scale.

Here is the updated JSFiddle: https://jsfiddle.net/3bjwv36r/

And here the S.O. snippet:

var tooltip = d3.select("body").append("div").attr("class", "toolTip");

var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var colors = d3.scale.ordinal().range(["blue", "orange", "green"]);

var width = 270,
  height = 270,
  margin = {
    top: 20,
    right: 10,
    bottom: 20,
    left: 35
  },
  n = 10000; // number of samples to generate

var chart = d3.qq()
  .width(width)
  .height(height)
  .domain([-.1, 1.1])
  .tickFormat(function(d) {
    return ~~(d * 100);
  });

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

d3.json("https://api.myjson.com/bins/uti7i", function(error, turkers) {
  if (error) throw error;

  var tm = mean(turkers[0].percent.values),
    td = Math.sqrt(variance(turkers[0].percent.values)),
    dd = [
      [0.10306430789206111, 0.0036139086950272735, 0.30498647327844536],
      [0.5924252668569606, 0.0462763685758622, 0.4340870312025223],
      [0.9847627827855167, 2.352350767874714e-4, 0.2609264955190324]
    ];

  var Mean = turkers[0].Mean;
  var STDDeviation = turkers[0]["STD Deviation"];
  var NormalTestPValue = turkers[0]["Normal test p-value"];
  var minValue = turkers[0].percent.minValue;
  var maxValue = turkers[0].percent.maxValue;

  var g = vis.selectAll("g")
    .data([{
      x: d3.range(n).map(Math.random),
      y: turkers[0].percent.values,
      label: "Uniform Distribution"
    }, {
      x: d3.range(n).map(normal1(tm, td)),
      y: turkers[0].percent.values,
      label: "Gaussian (Normal) Distribution"
    }, {
      x: d3.range(n).map(normal3(dd)),
      y: turkers[0].percent.values,
      label: "Mixture of 3 Gaussians"
    }])
    .enter().append("g")
    .attr("class", "qq")
    .attr("r", 5)
    .attr("transform", function(d, i) {
      return "translate(" + (width + margin.right + margin.left) * i + ")";
    })
    .on("mousemove", function(d, turkers) {
      tooltip
        .style("left", d3.event.pageX - (-40) + "px")
        .style("top", d3.event.pageY - 70 + "px")
        .style("display", "inline-block")
        .html(("<table><tr> <td><b>" +
          d3.event.clientX + "<sup>th</sup> Percentile: </b>" + d.x[d3.event.clientX].toFixed(2) + " , " + d.y[d3.event.clientY].toFixed(2) + "</td></tr><tr><td><b>Mean : </b>" + Mean +
          "</td></tr><tr><td><b>STD Deviation :</b> " + STDDeviation +
          "</td></tr><tr><td><b>Normal Test P-Value :</b> " + NormalTestPValue +
          "</td></tr><tr><td><b> Min Value : </b>" + minValue.toFixed(2) +
          "</td></tr><tr><td><b> Max Value :</b> " + maxValue + "</td></tr><table>"
        ));
    })
    .on("mouseout", function(d) {
      tooltip.style("display", "none");
    });

  g.append("rect")
    .attr("class", "box")
    .attr("width", width)
    .attr("height", height);

  g.call(chart);




  g.append("text")
    .attr("dy", "1.3em")
    .attr("dx", ".6em")
    .text(function(d) {
      return d.label;
    });

  chart.duration(1000);

  window.transition = function() {
    g.datum(randomize).call(chart);
  };
  g.each(function(_, i) {
    d3.select(this).selectAll("circle").style("stroke", colors(i))
  });
});

function randomize(d) {
  d.y = d3.range(n).map(Math.random);
  return d;
}

// Sample from a normal distribution with mean 0, stddev 1.
function normal() {
  var x = 0,
    y = 0,
    rds, c;
  do {
    x = Math.random() * 2 - 1;
    y = Math.random() * 2 - 1;
    rds = x * x + y * y;
  } while (rds == 0 || rds > 1);
  c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
  return x * c; // throw away extra sample y * c
}

// Simple 1D Gaussian (normal) distribution
function normal1(mean, deviation) {
  return function() {
    return mean + deviation * normal();
  };
}

// Gaussian Mixture Model (k=3) fit using E-M algorithm
function normal3(dd) {
  return function() {
    var r = Math.random(),
      i = r < dd[0][2] ? 0 : r < dd[0][2] + dd[1][2] ? 1 : 2,
      d = dd[i];
    return d[0] + Math.sqrt(d[1]) * normal();
  }
}

// Welford's algorithm.
function mean(x) {
  var n = x.length;
  if (n === 0) return NaN;
  var m = 0,
    i = -1;
  while (++i < n) m += (x[i] - m) / (i + 1);
  return m;
}

// Unbiased estimate of a sample's variance.
// Also known as the sample variance, where the denominator is n - 1.
function variance(x) {
  var n = x.length;
  if (n < 1) return NaN;
  if (n === 1) return 0;
  var m = mean(x),
    i = -1,
    s = 0;
  while (++i < n) {
    var v = x[i] - m;
    s += v * v;
  }
  return s / (n - 1);
}

body {
  font: 12px sans-serif;
  width: 960px;
  height: 310px;
}

.qq .box,
.qq .tick line,
.qq .quantile,
.qq .diagonal {
  stroke: #aaa;
  fill: none;
}

.qq .quantile {
  stroke: #000;
}

.qq .diagonal {
  stroke: red;
}

.qq g+g .y.tick {
  display: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.toolTip {
  font: 12px sans-serif;
  position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: #fff;
  color: #000;
  border: 1px solid red;
  padding: 14px;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://bl.ocks.org/mbostock/raw/4349187/d3.qq.min.js"></script>