|
d3scatterplot = function(svg,data) { |
|
var df=data.df; |
|
var nPix= 420,n=df.length,mar = [40,60,40,40]; |
|
var xv = df.map(function(e) { return e.x;}),xRange=expand(d3.extent(xv)); |
|
var yv = df.map(function(e) { return e.y;}),yRange=expand(d3.extent(yv)); |
|
svg.attr("width", nPix+mar[0]+mar[2]) |
|
.attr("height", nPix+mar[1]+mar[3]); |
|
|
|
var sg = svg.append("g") |
|
.attr("transform", "translate(" |
|
+ mar[0] + "," |
|
+ mar[1] + ")"); |
|
|
|
var xScale = d3.scale.linear() |
|
.range([0, nPix]) |
|
.domain(xRange); |
|
|
|
var yScale = d3.scale.linear() |
|
.range([nPix, 0]) |
|
.domain(yRange); |
|
|
|
|
|
drawdots = function() |
|
{ |
|
sg.selectAll("circle").remove(); |
|
sg.selectAll("circle") |
|
.data(df).enter() |
|
.append("circle") |
|
.attr("cx",function(d) {return xScale(d.x);}) |
|
.attr("cy",function(d) {return yScale(d.y);}) |
|
.attr("fill",function(d,i) { return (i == (n-1))?"red":"black";}) |
|
.attr("id",function(d,i) {return "point" + i}) |
|
.attr("r",5); |
|
} |
|
|
|
|
|
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(4); |
|
svg.append("g").call(xAxis) |
|
.attr("class", "axis") //Assign "axis" class |
|
.attr("transform","translate(" + mar[0] + "," + (nPix+mar[1]) + ")"); |
|
|
|
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(4); |
|
svg.append("g").call(yAxis) |
|
.attr("class", "axis") //Assign "axis" class |
|
.attr("transform","translate(" + mar[0] + "," + (mar[3]) + ")"); |
|
drawdots(); |
|
correlation_meter(df,data.ci); |
|
|
|
svg.on("click",function(el) |
|
{ |
|
//Get mouse position |
|
var mP=d3.mouse(this); |
|
//Mouse position to data coordinates |
|
var nx = xScale.invert(mP[0]-mar[0]),ny = yScale.invert(mP[1]-mar[1]); |
|
//Change datapoint accordingly |
|
df[n-1].x = nx; |
|
df[n-1].y = ny; |
|
correlation_meter(df,data.ci); |
|
drawdots(); |
|
}); |
|
|
|
|
|
} |
|
|
|
correlation_meter = function(df,ci) |
|
{ |
|
var svg = d3.select('svg'),nPix=100; |
|
var xv = df.map(function(e) { return e.x;}); |
|
var yv = df.map(function(e) { return e.y;}); |
|
|
|
d3.select("#meter").remove(); |
|
var sg = svg.append("g") |
|
.attr("id","meter") |
|
.attr("transform", "translate(" |
|
+ 100 + "," |
|
+ 20 + ")"); |
|
var yScale = d3.scale.linear() |
|
.range([nPix, 0]) |
|
.domain([-1,1]); |
|
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(4); |
|
sg.append("g").call(yAxis) |
|
.attr("class", "axis") //Assign "axis" class |
|
var cf = corcoef(xv,yv); |
|
// sg.append("circle") |
|
// .attr("cx",10) |
|
// .attr("cy",yScale(cf)) |
|
// .attr("r",4) |
|
// .attr("fill","blue"); |
|
sg.append("line") |
|
.attr("x1",5) |
|
.attr("x2",15) |
|
.attr("y1",yScale(cf)) |
|
.attr("y2",yScale(cf)) |
|
.attr("id","ciline") |
|
.attr("stroke-width","3px") |
|
.attr("stroke", "red") |
|
.attr("fill","black"); |
|
|
|
sg.append("line") |
|
.attr("x1",1) |
|
.attr("x2",1) |
|
.attr("y1",yScale(ci[0])) |
|
.attr("y2",yScale(ci[1])) |
|
.attr("id","ciline") |
|
.attr("stroke-width","5px") |
|
.attr("stroke", "grey") |
|
.attr("fill","black"); |
|
if (cf < ci[0] | cf > ci[1]) |
|
{ |
|
msg ="p < .05" |
|
sg.append("text") |
|
.attr("x",30) |
|
.attr("y",50) |
|
.attr("font-size",28) |
|
.text(msg); |
|
} |
|
} |
|
|
|
|
|
d3.json("data.json", function(data) { |
|
var svg = d3.select("#d3plot").append("svg") |
|
.attr("width","100%") |
|
.attr("height","100%"); |
|
|
|
d3scatterplot(svg,data); |
|
|
|
}); |
|
|
|
variance = function(u) |
|
{ |
|
var n=u.length,alpha = (n/(n-1)); |
|
var r = (d3.mean(u.map(function(v) { return v*v;})) - Math.pow(d3.mean(u),2)); |
|
return alpha*r; |
|
} |
|
|
|
//Subtract mean and divide by sd. |
|
standardise = function(u) |
|
{ |
|
var m = d3.mean(u), s=Math.sqrt(variance(u)); |
|
return u.map(function(v) { return (v-m)/s;}); |
|
} |
|
|
|
//Compute Pearson's correlation between u and v |
|
corcoef = function(u,v) |
|
{ |
|
var us = standardise(u),vs = standardise(v),n=u.length; |
|
return (1/(n-1))*d3.sum(us.mult(vs)); |
|
} |
|
|
|
Array.prototype.enorm = function () { |
|
return Math.sqrt(this.reduce(function(prev,cur) { return prev + cur*cur; },0)); |
|
} |
|
|
|
|
|
Array.prototype.add = function (b) { |
|
var s = Array(this.length); |
|
for (var ind = 0; ind < this.length; ind++) |
|
{ |
|
if (typeof(b)=="number") |
|
{ |
|
s[ind] = this[ind]+ b; |
|
} |
|
else |
|
{ |
|
s[ind] = this[ind]+ b[ind]; |
|
} |
|
} |
|
return s; |
|
}; |
|
|
|
Array.prototype.mult = function (b) { |
|
var s = Array(this.length); |
|
for (var ind = 0; ind < this.length; ind++) |
|
{ |
|
if (typeof(b)=="number") |
|
{ |
|
s[ind] = this[ind]* b; |
|
} |
|
else |
|
{ |
|
s[ind] = this[ind]* b[ind]; |
|
} |
|
} |
|
return s; |
|
}; |
|
|
|
|
|
|
|
Array.prototype.max = function () { |
|
return Math.max.apply(Math, this); |
|
}; |
|
|
|
//Used to expand slightly the plotting window |
|
expand = function(r) |
|
{ |
|
var d = r[1] - r[0],alpha=.8; |
|
return r.add([-alpha*d, alpha*d]); |
|
} |
