1 // Based on http://vis.stanford.edu/protovis/ex/qqplot.html

     2 d3.chart.qq = function() {

     3   var width = 1,

     4       height = 1,

     5       duration = 0,

     6       domain = null,

     7       tickFormat = null,

     8       n = 100,

     9       x = d3_chart_qqX,

    10       y = d3_chart_qqY;

    11 

    12   // For each small multiple…

    13   function qq(g) {

    14     g.each(function(d, i) {

    15       var g = d3.select(this),

    16           qx = d3_chart_qqQuantiles(n, x.call(this, d, i)),

    17           qy = d3_chart_qqQuantiles(n, y.call(this, d, i)),

    18           xd = domain && domain.call(this, d, i) || [d3.min(qx), d3.max(qx)], // new x-domain

    19           yd = domain && domain.call(this, d, i) || [d3.min(qy), d3.max(qy)], // new y-domain

    20           x0, // old x-scale

    21           y0; // old y-scale

    22 

    23       // Compute the new x-scale.

    24       var x1 = d3.scale.linear()

    25           .domain(xd)

    26           .range([0, width]);

    27 

    28       // Compute the new y-scale.

    29       var y1 = d3.scale.linear()

    30           .domain(yd)

    31           .range([height, 0]);

    32 

    33       // Retrieve the old scales, if this is an update.

    34       if (this.__chart__) {

    35         x0 = this.__chart__.x;

    36         y0 = this.__chart__.y;

    37       } else {

    38         x0 = d3.scale.linear().domain([0, Infinity]).range(x1.range());

    39         y0 = d3.scale.linear().domain([0, Infinity]).range(y1.range());

    40       }

    41 

    42       // Stash the new scales.

    43       this.__chart__ = {x: x1, y: y1};

    44 

    45       // Update diagonal line.

    46       var diagonal = g.selectAll("line.diagonal")

    47           .data([null]);

    48 

    49       diagonal.enter().append("svg:line")

    50           .attr("class", "diagonal")

    51           .attr("x1", x1(yd[0]))

    52           .attr("y1", y1(xd[0]))

    53           .attr("x2", x1(yd[1]))

    54           .attr("y2", y1(xd[1]));

    55 

    56       diagonal.transition()

    57           .duration(duration)

    58           .attr("x1", x1(yd[0]))

    59           .attr("y1", y1(xd[0]))

    60           .attr("x2", x1(yd[1]))

    61           .attr("y2", y1(xd[1]));

    62 

    63       // Update quantile plots.

    64       var circle = g.selectAll("circle")

    65           .data(d3.range(n).map(function(i) {

    66             return {x: qx[i], y: qy[i]};

    67           }));

    68 

    69       circle.enter().append("svg:circle")

    70           .attr("class", "quantile")

    71           .attr("r", 4.5)

    72           .attr("cx", function(d) { return x0(d.x); })

    73           .attr("cy", function(d) { return y0(d.y); })

    74           .style("opacity", 1e-6)

    75         .transition()

    76           .duration(duration)

    77           .attr("cx", function(d) { return x1(d.x); })

    78           .attr("cy", function(d) { return y1(d.y); })

    79           .style("opacity", 1);

    80 

    81       circle.transition()

    82           .duration(duration)

    83           .attr("cx", function(d) { return x1(d.x); })

    84           .attr("cy", function(d) { return y1(d.y); })

    85           .style("opacity", 1);

    86 

    87       circle.exit().transition()

    88           .duration(duration)

    89           .attr("cx", function(d) { return x1(d.x); })

    90           .attr("cy", function(d) { return y1(d.y); })

    91           .style("opacity", 1e-6)

    92           .remove();

    93 

    94       var xformat = tickFormat || x1.tickFormat(4),

    95           yformat = tickFormat || y1.tickFormat(4),

    96           tx = function(d) { return "translate(" + x1(d) + "," + height + ")"; },

    97           ty = function(d) { return "translate(0," + y1(d) + ")"; };

    98 

    99       // Update x-ticks.

   100       var xtick = g.selectAll("g.x.tick")

   101           .data(x1.ticks(4), function(d) {

   102             return this.textContent || xformat(d);

   103           });

   104 

   105       var xtickEnter = xtick.enter().append("svg:g")

   106           .attr("class", "x tick")

   107           .attr("transform", function(d) { return "translate(" + x0(d) + "," + height + ")"; })

   108           .style("opacity", 1e-6);

   109 

   110       xtickEnter.append("svg:line")

   111           .attr("y1", 0)

   112           .attr("y2", -6);

   113 

   114       xtickEnter.append("svg:text")

   115           .attr("text-anchor", "middle")

   116           .attr("dy", "1em")

   117           .text(xformat);

   118 

   119       // Transition the entering ticks to the new scale, x1.

   120       xtickEnter.transition()

   121           .duration(duration)

   122           .attr("transform", tx)

   123           .style("opacity", 1);

   124 

   125       // Transition the updating ticks to the new scale, x1.

   126       xtick.transition()

   127           .duration(duration)

   128           .attr("transform", tx)

   129           .style("opacity", 1);

   130 

   131       // Transition the exiting ticks to the new scale, x1.

   132       xtick.exit().transition()

   133           .duration(duration)

   134           .attr("transform", tx)

   135           .style("opacity", 1e-6)

   136           .remove();

   137 

   138       // Update ticks.

   139       var ytick = g.selectAll("g.y.tick")

   140           .data(y1.ticks(4), function(d) {

   141             return this.textContent || yformat(d);

   142           });

   143 

   144       var ytickEnter = ytick.enter().append("svg:g")

   145           .attr("class", "y tick")

   146           .attr("transform", function(d) { return "translate(0," + y0(d) + ")"; })

   147           .style("opacity", 1e-6);

   148 

   149       ytickEnter.append("svg:line")

   150           .attr("x1", 0)

   151           .attr("x2", 6);

   152 

   153       ytickEnter.append("svg:text")

   154           .attr("text-anchor", "end")

   155           .attr("dx", "-.5em")

   156           .attr("dy", ".3em")

   157           .text(yformat);

   158 

   159       // Transition the entering ticks to the new scale, y1.

   160       ytickEnter.transition()

   161           .duration(duration)

   162           .attr("transform", ty)

   163           .style("opacity", 1);

   164 

   165       // Transition the updating ticks to the new scale, y1.

   166       ytick.transition()

   167           .duration(duration)

   168           .attr("transform", ty)

   169           .style("opacity", 1);

   170 

   171       // Transition the exiting ticks to the new scale, y1.

   172       ytick.exit().transition()

   173           .duration(duration)

   174           .attr("transform", ty)

   175           .style("opacity", 1e-6)

   176           .remove();

   177     });

   178   }

   179 

   180   qq.width = function(x) {

   181     if (!arguments.length) return width;

   182     width = x;

   183     return qq;

   184   };

   185 

   186   qq.height = function(x) {

   187     if (!arguments.length) return height;

   188     height = x;

   189     return qq;

   190   };

   191 

   192   qq.duration = function(x) {

   193     if (!arguments.length) return duration;

   194     duration = x;

   195     return qq;

   196   };

   197 

   198   qq.domain = function(x) {

   199     if (!arguments.length) return domain;

   200     domain = x == null ? x : d3.functor(x);

   201     return qq;

   202   };

   203 

   204   qq.count = function(z) {

   205     if (!arguments.length) return n;

   206     n = z;

   207     return qq;

   208   };

   209 

   210   qq.x = function(z) {

   211     if (!arguments.length) return x;

   212     x = z;

   213     return qq;

   214   };

   215 

   216   qq.y = function(z) {

   217     if (!arguments.length) return y;

   218     y = z;

   219     return qq;

   220   };

   221 

   222   qq.tickFormat = function(x) {

   223     if (!arguments.length) return tickFormat;

   224     tickFormat = x;

   225     return qq;

   226   };

   227 

   228   return qq;

   229 };

   230 

   231 function d3_chart_qqQuantiles(n, values) {

   232   var m = values.length - 1;

   233   values = values.slice().sort(d3.ascending);

   234   return d3.range(n).map(function(i) {

   235     return values[~~(i * m / n)];

   236   });

   237 }

   238 

   239 function d3_chart_qqX(d) {

   240   return d.x;

   241 }

   242 

   243 function d3_chart_qqY(d) {

   244   return d.y;

   245 }