basic scatter plot plus regression

_.md

[ Launch: basic scatter plot ] 824a49ed5a13dc5c54a5 by Y4suyuki
[ Launch: basic scatter plot ] cab8217ff460c71d5fc3 by Y4suyuki

config.json

{"description":"basic scatter plot plus regression","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/GbV69N3.png"}

inlet.css

.axis path {
  fill:none;
  stroke:black;
  shape-rendering: crispEdges;
}
.line {
  fill:none;
  stroke: #fd2eb8;
}

inlet.js

var d_num = 58;
var norm = d3.random.normal(0,5)
var formula = function(x) { return 1 + 1.2 * x;}

var df = d3.range(1,d_num).map(function(e) { 
  var x = norm();
  return {x: x, y:formula(x) + norm()}
});

/* statistics of df */
var mean = {x: d3.mean(df, function(d) { return d.x; }),
            y: d3.mean(df, function(d) { return d.y; })};

var cov = 1/(d_num - 1) * (d3.sum(df.map(function(d) { 
  return d.x * d.y;
})) - d_num * mean.x * mean.y);

var vr_x = 1/(d_num - 1) * d3.sum(df.map(function(d) { 
  return Math.pow(d.x - mean.x, 2) 
}))
var vr_y = 1/(d_num - 1) * d3.sum(df.map(function(d) { 
  return Math.pow(d.y - mean.y, 2); 
}))
var corr = cov/(Math.pow(vr_x,0.5)*Math.pow(vr_y,0.5));

var width = 400,
    height = 300;

var margin = {left: 20, top: 20}

var x = d3.scale.linear(),
    y = d3.scale.linear();

x.range([margin.left, width]);
y.range([height,margin.top]);

x_extent = d3.extent(df, function(d) { return d.x; });
y_extent = d3.extent(df, function(d) { return d.y; });



x.domain([x_extent[0] - (x_extent[1] - x_extent[0])*0.05, x_extent[1]])
y.domain([y_extent[0] - (y_extent[1] - y_extent[0])*0.05, y_extent[1]])

var xAxis = d3.svg.axis(),
    yAxis = d3.svg.axis();

xAxis.scale(x).orient('bottom');
yAxis.scale(y).orient('left');

var svg = d3.select('svg')

var canv = svg.append('g')
.attr('transform', 'translate(' + 10 + ',' + 10 + ')')

var stats = svg.append('g')
.attr('transform', 'translate(' + 30 + ',' + (height + 85) + ')');

var text_format = d3.format(".3f");


stats.append('text')
.text('Cor(X,Y): ' + text_format(corr));

stats.append('text')
.text('Var(X):' + text_format(vr_x))
.attr('y',22);

stats.append('text')
.text('Var(Y):' + text_format(vr_y))
.attr('y',22 * 2);

var radius = 4
var circles = canv.selectAll('circle').data(df)
.enter()
.append('circle')
.attr('r', 0)
.attr('cx', function(d) { return x(d.x); })
.attr('cy', function(d) { return y(d.y); })
.attr('fill', '#767dd0')
.on('mouseover', function() {
  d3.select(this).transition()
  .attr('fill', '#ccd382')
  .duration(300)
  .transition()
  .attr('r', 9)
  .attr('stroke-width', 4)
  .attr('stroke', '#5118cd');
  
})
.on('mouseout', function() {
  d3.select(this).transition()
  .attr('fill', '#767ad0')
  .attr('r', radius)
  .attr('stroke-width', 0);
});

circles.transition()
.duration(300)
.attr('r', radius)
.each("end", function(){
  path.transition()
  .duration(500)
  .ease("cubic")
  .attr("stroke-dashoffset", 0);
})
canv.append('g')
.attr('transform', 'translate(' + 0 + ',' + height + ')')
.attr('class', 'axis x')
.call(xAxis);

canv.append('g')
.attr('transform', 'translate(' + margin.left + ',' + 0 + ')')
.attr('class', 'axis y')
.call(yAxis);

var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

var b1 = corr / Math.pow(vr_x, 0.5) * Math.pow(vr_y, 0.5);
var b0 = mean.y - mean.x * b1

var fit_data = [{x:x_extent[0],y:b0+b1*x_extent[0]}, 
                {x: 0, y:b0},
                {x:x_extent[1], y:b0 + b1*x_extent[1]}];


path = canv.append('path')
.attr('class', 'line fit')
.attr('stroke-width', 2)
.attr('d', line(fit_data));


var totalLen = path.node().getTotalLength();
console.log(totalLen);

path.attr("stroke-dasharray", totalLen + " " + totalLen)
.attr("stroke-dashoffset", totalLen)