Add x- and y-scales to Q-Q plot.

d3.chart.js

@@ -542,6 +542,7 @@ d3.chart.qq = function() {
       duration = 0,
       domain = null,
       intervals = 100,
+      tickFormat = null,
       distribution = d3_chart_qqUniform;
       values = d3_chart_qqValues;
       qi = d3_chart_qqQi;
@@ -645,6 +646,89 @@ d3.chart.qq = function() {
           .duration(duration)
           .attr("width", function(d) { return x1(d[0]); })
           .attr("height", function(d) { return x1(d[1]); });
+
+      var xformat = tickFormat || x1.tickFormat(4);
+
+      // Update x-ticks.
+      var xtick = g.selectAll("g.x.tick")
+          .data(x1.ticks(4), function(d) {
+            return this.textContent || xformat(d);
+          });
+
+      var xtickEnter = xtick.enter().append("svg:g")
+          .attr("class", "x tick")
+          .attr("transform", function(d) { return "translate(" + x0(d) + "," + height + ")"; })
+          .attr("opacity", 1e-6);
+
+      xtickEnter.append("svg:line")
+          .attr("y1", 0)
+          .attr("y2", -5);
+
+      xtickEnter.append("svg:text")
+          .attr("text-anchor", "middle")
+          .attr("dy", "1em")
+          .text(xformat);
+
+      // Transition the entering ticks to the new scale, x1.
+      xtickEnter.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(" + x1(d) + "," + height + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the updating ticks to the new scale, x1.
+      var xtickUpdate = xtick.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(" + x1(d) + "," + height + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the exiting ticks to the new scale, x1.
+      xtick.exit().transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(" + x1(d) + "," + height + ")"; })
+          .attr("opacity", 1e-6)
+          .remove();
+
+      var yformat = tickFormat || y1.tickFormat(4);
+
+      // Update ticks.
+      var ytick = g.selectAll("g.y.tick")
+          .data(y1.ticks(4), function(d) {
+            return this.textContent || yformat(d);
+          });
+
+      var ytickEnter = ytick.enter().append("svg:g")
+          .attr("class", "y tick")
+          .attr("transform", function(d) { return "translate(0," + y0(d) + ")"; })
+          .attr("opacity", 1e-6);
+
+      ytickEnter.append("svg:line")
+          .attr("x1", 0)
+          .attr("x2", 5);
+
+      ytickEnter.append("svg:text")
+          .attr("text-anchor", "end")
+          .attr("dx", "-.5em")
+          .attr("dy", ".3em")
+          .text(yformat);
+
+      // Transition the entering ticks to the new scale, y1.
+      ytickEnter.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(0," + y1(d) + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the updating ticks to the new scale, y1.
+      var ytickUpdate = ytick.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(0," + y1(d) + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the exiting ticks to the new scale, y1.
+      ytick.exit().transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(0," + y1(d) + ")"; })
+          .attr("opacity", 1e-6)
+          .remove();
     });
   }
 
@@ -690,6 +774,12 @@ d3.chart.qq = function() {
     return qq;
   };
 
+  qq.tickFormat = function(x) {
+    if (!arguments.length) return tickFormat;
+    tickFormat = x;
+    return qq;
+  };
+
   return qq;
 };
 

examples/qq/qq.css

@@ -1,3 +1,6 @@
 .qq circle, .qq .diagonal, .qq .box { stroke: #000; stroke-width: .5px; fill: none; }
 .qq .box { stroke: #666; }
 .qq { font: 12px sans-serif; }
+.y.tick text { display: none; }
+.qq0 .y.tick text { display: block; }
+.tick line { stroke: #666; stroke-width: .5px; fill: none; }

examples/qq/qq.js

@@ -35,13 +35,14 @@ normal3.label = "Mixture of 3 Gaussians";
 
 var w = 270,
     h = 270,
-    m = [10, 50, 20, 30], // top right bottom left
+    m = [10, 30, 20, 60], // top right bottom left
     min = Infinity,
     max = -Infinity;
 
 var chart = d3.chart.qq()
     .width(w).height(h)
     .domain([-.5, 1.5])
+    .tickFormat(function(d) { return d * 100; })
     .distribution(function(d) { return d.dist; });
 
 /* Distributions for comparison. */
@@ -53,7 +54,8 @@ var wrapper = d3.select("#chart").append("svg:svg")
 var vis = wrapper.selectAll("g")
     .data(dists.map(function(d) { return {dist: d3.range(10000).map(d), values: turkers.percent.values, label: d.label}; }))
   .enter().append("svg:g")
-    .attr("transform", function(d, i) { return "translate(" + ((w + m[3]) * i + m[3]) + "," + m[0] + ")"; })
+    .attr("transform", function(d, i) { return "translate(" + ((w + m[1]) * i + m[3]) + "," + m[0] + ")"; })
+    .attr("class", function(d, i) { return "qq" + i; })
     .call(chart);
 
 wrapper.append("svg:text")

src/chart/qq.js

@@ -5,6 +5,7 @@ d3.chart.qq = function() {
       duration = 0,
       domain = null,
       intervals = 100,
+      tickFormat = null,
       distribution = d3_chart_qqUniform;
       values = d3_chart_qqValues;
       qi = d3_chart_qqQi;
@@ -108,6 +109,89 @@ d3.chart.qq = function() {
           .duration(duration)
           .attr("width", function(d) { return x1(d[0]); })
           .attr("height", function(d) { return x1(d[1]); });
+
+      var xformat = tickFormat || x1.tickFormat(4);
+
+      // Update x-ticks.
+      var xtick = g.selectAll("g.x.tick")
+          .data(x1.ticks(4), function(d) {
+            return this.textContent || xformat(d);
+          });
+
+      var xtickEnter = xtick.enter().append("svg:g")
+          .attr("class", "x tick")
+          .attr("transform", function(d) { return "translate(" + x0(d) + "," + height + ")"; })
+          .attr("opacity", 1e-6);
+
+      xtickEnter.append("svg:line")
+          .attr("y1", 0)
+          .attr("y2", -5);
+
+      xtickEnter.append("svg:text")
+          .attr("text-anchor", "middle")
+          .attr("dy", "1em")
+          .text(xformat);
+
+      // Transition the entering ticks to the new scale, x1.
+      xtickEnter.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(" + x1(d) + "," + height + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the updating ticks to the new scale, x1.
+      var xtickUpdate = xtick.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(" + x1(d) + "," + height + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the exiting ticks to the new scale, x1.
+      xtick.exit().transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(" + x1(d) + "," + height + ")"; })
+          .attr("opacity", 1e-6)
+          .remove();
+
+      var yformat = tickFormat || y1.tickFormat(4);
+
+      // Update ticks.
+      var ytick = g.selectAll("g.y.tick")
+          .data(y1.ticks(4), function(d) {
+            return this.textContent || yformat(d);
+          });
+
+      var ytickEnter = ytick.enter().append("svg:g")
+          .attr("class", "y tick")
+          .attr("transform", function(d) { return "translate(0," + y0(d) + ")"; })
+          .attr("opacity", 1e-6);
+
+      ytickEnter.append("svg:line")
+          .attr("x1", 0)
+          .attr("x2", 5);
+
+      ytickEnter.append("svg:text")
+          .attr("text-anchor", "end")
+          .attr("dx", "-.5em")
+          .attr("dy", ".3em")
+          .text(yformat);
+
+      // Transition the entering ticks to the new scale, y1.
+      ytickEnter.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(0," + y1(d) + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the updating ticks to the new scale, y1.
+      var ytickUpdate = ytick.transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(0," + y1(d) + ")"; })
+          .attr("opacity", 1);
+
+      // Transition the exiting ticks to the new scale, y1.
+      ytick.exit().transition()
+          .duration(duration)
+          .attr("transform", function(d) { return "translate(0," + y1(d) + ")"; })
+          .attr("opacity", 1e-6)
+          .remove();
     });
   }
 
@@ -153,6 +237,12 @@ d3.chart.qq = function() {
     return qq;
   };
 
+  qq.tickFormat = function(x) {
+    if (!arguments.length) return tickFormat;
+    tickFormat = x;
+    return qq;
+  };
+
   return qq;
 };