sampling

_.md

[ Launch: sampling ] ae8f1e9e966533a0e2e2 by enjalot

config.json

{"description":"sampling","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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/RA6u5UJ.png"}

inlet.js

var height = 150;
var points = [
  {x: 100, y: 100},
  {x: 150, y: 114},
  {x: 200, y: 75},
  {x: 250, y: 90}
]

var line = d3.svg.line()
.x(function(d) {
  return d.x
})
.y(function(d) {
  return d.y
})
.interpolate("cardinal")
//.interpolate("basis")

var svg = d3.select("svg")



var path = svg.append("path")
.attr("d", line(points))
.style({
  fill: "none",
  stroke: "#000",
  "stroke-width": 3
})

var circles = svg.selectAll("circle")
.data(points)
.enter().append("circle")
.attr({
  cx: function(d) { return d.x },
  cy: function(d) { return d.y },
  r: 5,
  fill: "none",
  stroke: "#6d6d6d"
})

var node = path.node()
var samples = getSamples(node, 49);


var rects = svg.selectAll("rect")
.data(samples)
.enter().append("rect")
.attr({
  x: function(d) { return d.x },
  y: function(d) { return d.y },
  width: 1,
  height: function(d) { return height - d.y }
})

function getSamples(path, num) {
  var len = path.getTotalLength()
  var p;
  var result = []
  for(var i = 0; i < num; i++) {
    p = path.getPointAtLength(i * len/num);
    result.push(p);
  }
  return result
}

function getArea(samples, x) {
  // TODO faster search
  var total = 0;
  var s;
  for(var i = 0; i < samples.length; i++) {
    s = samples[i];
    if(s.x > x) break;
    total += s.y;
  }
  return total;
}
console.log("area", getArea(samples, 195));