D3 test

body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

.box {
font: 10px sans-serif;
}

.box line,
.box rect,
.box circle {
fill: #fff;
stroke: #000;
stroke-width: 1.5px;
}

.box .center {
stroke-dasharray: 3,3;
}

.box .outlier {
fill: none;
stroke: #ccc;
}

//d3js.org/d3.v3.min.js
http://box.js

var margin = {top: 10, right: 50, bottom: 20, left: 50},
width = 120 – margin.left – margin.right,
height = 500 – margin.top – margin.bottom;

var min = Infinity,
max = -Infinity;

var chart = d3.box()
.whiskers(iqr(1.5))
.width(width)
.height(height);

d3.csv(“morley.csv”, function(error, csv) {
if (error) throw error;

var data = [];

csv.forEach(function(x) {
var e = Math.floor(x.Expt – 1),
r = Math.floor(x.Run – 1),
s = Math.floor(x.Speed),
d = data[e];
if (!d) d = data[e] = [s];
else d.push(s);
if (s > max) max = s;
if (s < min) min = s;
});

chart.domain([min, max]);

var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "box")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);

setInterval(function() {
svg.datum(randomize).call(chart.duration(1000));
}, 2000);
});

function randomize(d) {
if (!d.randomizer) d.randomizer = randomizer(d);
return d.map(d.randomizer);
}

function randomizer(d) {
var k = d3.max(d) * .02;
return function(d) {
return Math.max(min, Math.min(max, d + k * (Math.random() – .5)));
};
}

// Returns a function to compute the interquartile range.
function iqr(k) {
return function(d, i) {
var q1 = d.quartiles[0],
q3 = d.quartiles[2],
iqr = (q3 – q1) * k,
i = -1,
j = d.length;
while (d[++i] q3 + iqr);
return [i, j];
};
}

Advertisements
D3 test

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s