Commit 6e89c983 authored by Mike Bostock's avatar Mike Bostock
Browse files

Remove qq example.

Replaced by <http://bl.ocks.org/4349187>.
parent e1443c9e
<!DOCTYPE html>
<meta charset="utf-8">
<title>Q-Q Plots</title>
<style>
@import url(../button.css);
body {
font: 10px sans-serif;
width: 960px;
height: 310px;
}
.qq .box,
.qq .tick line,
.qq .quantile,
.qq .diagonal {
stroke: #aaa;
fill: none;
}
.qq .quantile {
stroke: #000;
}
.qq g + g .y.tick {
display: none;
}
</style>
<button class="first last" onclick="transition()">Update</button>
<script src="../../d3.js"></script>
<script src="../../lib/science/science.js"></script>
<script src="../../lib/science/science.stats.js"></script>
<script>
var width = 280,
height = 280,
margin = {top: 10, right: 10, bottom: 20, left: 35},
n = 10000; // number of samples to generate
var chart = qqChart()
.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("turkers.json", function(error, turkers) {
var tm = science.stats.mean(turkers),
td = Math.sqrt(science.stats.variance(turkers)),
dd = [
[0.10306430789206111, 0.0036139086950272735, 0.30498647327844536],
[0.5924252668569606, 0.0462763685758622, 0.4340870312025223],
[0.9847627827855167, 2.352350767874714e-4, 0.2609264955190324]
];
var g = vis.selectAll("g")
.data([{
x: d3.range(n).map(Math.random),
y: turkers,
label: "Uniform Distribution"
}, {
x: d3.range(n).map(normal1(tm, td)),
y: turkers,
label: "Gaussian (Normal) Distribution"
}, {
x: d3.range(n).map(normal3(dd)),
y: turkers,
label: "Mixture of 3 Gaussians"
}])
.enter().append("g")
.attr("class", "qq")
.attr("transform", function(d, i) { return "translate(" + (width + margin.right + margin.left) * i + ")"; });
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);
};
});
function randomize(d) {
d.y = d3.range(n).map(Math.random);
return d;
}
// Based on http://vis.stanford.edu/protovis/ex/qqplot.html
function qqChart() {
var width = 1,
height = 1,
duration = 0,
domain = null,
tickFormat = null,
n = 100,
x = qqX,
y = qqY;
// For each small multiple…
function qq(g) {
g.each(function(d, i) {
var g = d3.select(this),
qx = qqQuantiles(n, x.call(this, d, i)),
qy = qqQuantiles(n, y.call(this, d, i)),
xd = domain && domain.call(this, d, i) || [d3.min(qx), d3.max(qx)], // new x-domain
yd = domain && domain.call(this, d, i) || [d3.min(qy), d3.max(qy)], // new y-domain
x0, // old x-scale
y0; // old y-scale
// Compute the new x-scale.
var x1 = d3.scale.linear()
.domain(xd)
.range([0, width]);
// Compute the new y-scale.
var y1 = d3.scale.linear()
.domain(yd)
.range([height, 0]);
// Retrieve the old scales, if this is an update.
if (this.__chart__) {
x0 = this.__chart__.x;
y0 = this.__chart__.y;
} else {
x0 = d3.scale.linear().domain([0, Infinity]).range(x1.range());
y0 = d3.scale.linear().domain([0, Infinity]).range(y1.range());
}
// Stash the new scales.
this.__chart__ = {x: x1, y: y1};
// Update diagonal line.
var diagonal = g.selectAll("line.diagonal")
.data([null]);
diagonal.enter().append("svg:line")
.attr("class", "diagonal")
.attr("x1", x1(yd[0]))
.attr("y1", y1(xd[0]))
.attr("x2", x1(yd[1]))
.attr("y2", y1(xd[1]));
diagonal.transition()
.duration(duration)
.attr("x1", x1(yd[0]))
.attr("y1", y1(xd[0]))
.attr("x2", x1(yd[1]))
.attr("y2", y1(xd[1]));
// Update quantile plots.
var circle = g.selectAll("circle")
.data(d3.range(n).map(function(i) {
return {x: qx[i], y: qy[i]};
}));
circle.enter().append("svg:circle")
.attr("class", "quantile")
.attr("r", 4.5)
.attr("cx", function(d) { return x0(d.x); })
.attr("cy", function(d) { return y0(d.y); })
.style("opacity", 1e-6)
.transition()
.duration(duration)
.attr("cx", function(d) { return x1(d.x); })
.attr("cy", function(d) { return y1(d.y); })
.style("opacity", 1);
circle.transition()
.duration(duration)
.attr("cx", function(d) { return x1(d.x); })
.attr("cy", function(d) { return y1(d.y); })
.style("opacity", 1);
circle.exit().transition()
.duration(duration)
.attr("cx", function(d) { return x1(d.x); })
.attr("cy", function(d) { return y1(d.y); })
.style("opacity", 1e-6)
.remove();
var xformat = tickFormat || x1.tickFormat(4),
yformat = tickFormat || y1.tickFormat(4),
tx = function(d) { return "translate(" + x1(d) + "," + height + ")"; },
ty = function(d) { return "translate(0," + y1(d) + ")"; };
// 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 + ")"; })
.style("opacity", 1e-6);
xtickEnter.append("svg:line")
.attr("y1", 0)
.attr("y2", -6);
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", tx)
.style("opacity", 1);
// Transition the updating ticks to the new scale, x1.
xtick.transition()
.duration(duration)
.attr("transform", tx)
.style("opacity", 1);
// Transition the exiting ticks to the new scale, x1.
xtick.exit().transition()
.duration(duration)
.attr("transform", tx)
.style("opacity", 1e-6)
.remove();
// 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) + ")"; })
.style("opacity", 1e-6);
ytickEnter.append("svg:line")
.attr("x1", 0)
.attr("x2", 6);
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", ty)
.style("opacity", 1);
// Transition the updating ticks to the new scale, y1.
ytick.transition()
.duration(duration)
.attr("transform", ty)
.style("opacity", 1);
// Transition the exiting ticks to the new scale, y1.
ytick.exit().transition()
.duration(duration)
.attr("transform", ty)
.style("opacity", 1e-6)
.remove();
});
}
qq.width = function(x) {
if (!arguments.length) return width;
width = x;
return qq;
};
qq.height = function(x) {
if (!arguments.length) return height;
height = x;
return qq;
};
qq.duration = function(x) {
if (!arguments.length) return duration;
duration = x;
return qq;
};
qq.domain = function(x) {
if (!arguments.length) return domain;
domain = x == null ? x : d3.functor(x);
return qq;
};
qq.count = function(z) {
if (!arguments.length) return n;
n = z;
return qq;
};
qq.x = function(z) {
if (!arguments.length) return x;
x = z;
return qq;
};
qq.y = function(z) {
if (!arguments.length) return y;
y = z;
return qq;
};
qq.tickFormat = function(x) {
if (!arguments.length) return tickFormat;
tickFormat = x;
return qq;
};
return qq;
};
function qqQuantiles(n, values) {
var m = values.length - 1;
values = values.slice().sort(d3.ascending);
return d3.range(n).map(function(i) {
return values[~~(i * m / n)];
});
}
function qqX(d) {
return d.x;
}
function qqY(d) {
return d.y;
}
// 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();
}
}
</script>
[0.009259259,0.014285714,0.014285714,0.016666667,0.016666667,0.017857143,0.018518519,0.027777778,0.028571429,0.028571429,0.028571429,0.033333333,0.033333333,0.035714286,0.0375,0.041666667,0.041666667,0.041666667,0.041666667,0.042857143,0.042857143,0.042857143,0.05,0.055555556,0.069444444,0.083333333,0.083333333,0.083333333,0.083333333,0.083333333,0.083333333,0.085714286,0.1,0.1,0.101851852,0.104166667,0.111111111,0.111111111,0.114285714,0.114285714,0.116666667,0.12037037,0.125,0.125,0.128571429,0.133333333,0.138888889,0.141666667,0.142857143,0.142857143,0.15,0.152777778,0.158333333,0.166666667,0.171428571,0.183333333,0.185714286,0.185714286,0.1875,0.190140845,0.194444444,0.2,0.204545455,0.208333333,0.214285714,0.214285714,0.253521127,0.271428571,0.277777778,0.291666667,0.3,0.3,0.307017544,0.324074074,0.328571429,0.333333333,0.333333333,0.342857143,0.357142857,0.358333333,0.378787879,0.381355932,0.395833333,0.4,0.414285714,0.414285714,0.414285714,0.414285714,0.43,0.433333333,0.4375,0.445833333,0.450704225,0.453333333,0.458333333,0.466666667,0.476666667,0.494736842,0.5,0.516666667,0.533333333,0.55,0.557142857,0.56884058,0.569444444,0.571428571,0.585714286,0.61,0.622222222,0.657407407,0.666666667,0.678947368,0.685714286,0.685714286,0.69047619,0.7,0.7,0.7,0.711538462,0.763888889,0.771428571,0.788888889,0.8,0.8,0.808333333,0.824712644,0.828571429,0.836842105,0.839285714,0.839285714,0.84,0.842857143,0.842857143,0.842857143,0.85,0.859649123,0.869791667,0.871428571,0.871428571,0.892344498,0.914285714,0.928571429,0.933908046,0.953703704,0.973684211,0.975,0.981481481,0.983333333,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.987096774,0.990740741,0.991666667,0.992,0.994047619,0.996666667,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment