D3 Examples - Mahalanobis distance

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="mahalanobis.min.js"></script>
<script>
​
var margin = 25,
    width = 960 - 2 * margin,
    height = 500 - 2 * margin;
​
var svg = d3.select("body").append("svg")
  .attr("width", width + 2 * margin)
  .attr("height", height + 2 * margin)
  .append("g")
    .attr("transform", "translate(" + margin + " " + margin + ")");
​
var x = d3.scaleLinear()
  .range([0, width]);
​
var y = d3.scaleLinear()
  .range([height, 0]);
​
d3.tsv("weight-height.tsv", arr, function(err, points){
​
  x.domain(pad(d3.extent(points.map(function(d){ return d[0]; })), 0.02));
  y.domain(pad(d3.extent(points.map(function(d){ return d[1]; })), 0.02));
​
  var maxDistance = 0;
​
  mahalanobis(points).forEach(function(d, i){
    if (d > maxDistance) maxDistance = d;
    points[i].push(d);
  });
​
  var color = d3.scaleLinear()
    .domain([0, maxDistance])
    .range([1, 0]);
​
  var unique = d3.map(points, function(d){ return d[0] + "-" + d[1]; }).values();
​
  svg.selectAll("circle")
    .data(unique)
    .enter()
    .append("circle")
      .attr("r", 3)
      .attr("cx", function(d){
        return x(d[0]);
      })
      .attr("cy", function(d){
        return y(d[1]);
      })
      .attr("fill", function(d){
        return d3.interpolateViridis(color(d[2]));
      });
​
  svg.append("g")
    .attr("class", "axis x")
    .attr("transform", "translate(0 " + height + ")")
    .call(d3.axisBottom(x));
​
  svg.append("g")
    .attr("class", "axis y")
    .call(d3.axisLeft(y));
​
});
​
function arr(row) {
  return [+row.weight, +row.height];
}
​
function pad(extent, n) {
​
  var diff = n * (extent[1] - extent[0]);
​
  return [
    extent[0] - diff,
    extent[1] + diff
  ];
​
}
​
</script>
​
    