normal distribution manipulate

_.md

[ Launch: normal distribution ] 4b00d2969e6caf100491 by Y4suyuki
[ Launch: normal distribution ] 0a81a5ffa02ed20c8623 by Y4suyuki

config.json

{"description":"normal distribution manipulate","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/0VC3Myr.png"}

inlet.css

.line {
  stroke-width: 1px;
  opacity: .6;
}
.line.mover {
  stroke-width: 3px;
}
.line.std_norm{
  /*fill: #96cbfc;*/
  fill:none;
  stroke: #8397fa;
  stroke-width: 2px
}

.line.norm {
  /*fill: #fba497;*/
  fill:none;
  stroke: #f86c6e;
  stroke-width: 2px
}

text.std_norm {
  fill: #8397fa;
}
text.norm{
  fill: #f86c6e;
}

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

circle.knob {
  fill:white;
  opacity:0.7;
  cursor:pointer;
}

inlet.js

var pi = Math.PI,
    e = Math.E;

var nd = function(s,m) { 
  var f = function(x) {
      return 1/(s*Math.pow(2 * pi,0.5)) * Math.exp(-(Math.pow((x - m), 2))/(2 * Math.pow(s,2))); 
  }
  return f;
}

var s = 1.0,
    m = 0;
var s2 = 0.7168,
    m2 = 0.64;

var norm1 = nd(s,m),
    norm2 = nd(s2,m2);
var data1 = d3.range(-4, 4, 0.1).map(function(x) { return {x:x, y:norm1(x)}; } ),
    data2 = d3.range(-4, 4, 0.1).map(function(x) { return {x:x, y:norm2(x)}; } );
var margin = {left: 40, top: 50};



svg = d3.select('svg');

function draw_norm(data,c) {
  var height = 300,
      width = 500;
  
  var x = d3.scale.linear(),
      y = d3.scale.linear();


  function draw() {
  
    x.range([margin.left, width]);
    y.range([height, margin.top]);
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain([0,0.5])
    //y.domain(d3.extent(data, function(d) { return d.y;}));

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

    svg.append('g')
    .attr('class', 'axis x')
    .attr('transform', 'translate(' + 0 + ',' + height + ')')
    .call(xAxis);
    /*
    svg.append('g')
    .attr('class', 'axis y')
    .attr('transform', 'translate(' + ((width-margin.left) / 2+margin.left) + ',' + 0 + ')')
    .call(yAxis);
    */
    svg.append('path')
    .datum(data)
    .attr('class', 'line' + ' ' + c)
    .attr('d', line)
    .on('mouseover', function(){
      d3.select(this).classed('mover', true);
    })
    .on('mouseout', function(){
      d3.select(this).classed('mover', false);
    });
  }

  draw.w = function(value) {
    if (!arguments.length) return width;
    width = value;
    return draw;
  };
  draw.h = function(value) {
    if (!arguments.length) return height;
    height = value;
    return draw;
  };
  draw.xsc = function(f) {
    if (!arguments.length) return x;
    x = f;
    return draw;
  };
  
  return draw;
  
}

var width = 480,
    height = 300;


var dr_std_norm = draw_norm(data1, 'std_norm').w(width).h(height);
var dr_norm = draw_norm(data2, 'norm').w(width).h(height)
dr_std_norm();
dr_norm();

svg.append('text')
.text('Mean: ' + m + ', ' + 'Std: ' + s)
.attr('x', 40)
.attr('y', 300 + 100)
.attr('class', 'std_norm');

svg.append('text')
.text('Mean: ' + m2 + ', ' + 'Std: ' + s2)
.attr('x', 40)
.attr('y', 300 + 100 + 20)
.attr('class', 'norm')

function draw_ref_line(pos) {
  var line = d3.svg.line()
  .x(function(d) { return d.x + margin.left; })
  .y(function(d) { return d.y; });
  
  d3.select('path.reference')
  .datum([{x:pos[0], y:0}, {x:pos[0], y:height}])
  .attr('class', 'reference line')
  .attr('stroke','black')
  .attr('d', line);
}

svg.append('path')
.datum({x:0,y:0}, {x:0, y:height})
.attr('class', 'reference line')
.attr('stroke', 'black');

svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + 0 + ')')
.append('rect')
.attr('height', height)
.attr('width', width - margin.left)
.attr('opacity', 0.0512)
.on('mouseover', function() {
  pos = d3.mouse(this);
  console.log(pos);
  
  draw_ref_line(pos);
})
.on('mousemove', function() {
  pos = d3.mouse(this);
  console.log(pos);
  draw_ref_line(pos);
})
.on('mouseout', function() {
  d3.select('path.reference').attr('stroke', '')
})



var width2 = 200,
    height2 = 0,
    radius = 12;

function create_panel_knob(){
  var width = 100,
      radius = 7,
      height = 0;
  
  function dragMove() {
      d3.select(this)
      .attr('cx', Math.max(1, Math.min(width2, d3.event.x)))
      .attr('cy', Math.max(radius, Math.min(height2-radius, d3.event.y)));
      var xpos = d3.select(this).attr('cx');
      var new_s = xpos/100;
      var stat_text = d3.select('text.norm').text().split(', ').map(function(e) { return e.split(': ');});
      var mn = parseFloat(stat_text[0][1]);
      console.log(xpos);
      var new_norm = nd(new_s,mn);
      var new_data = d3.range(-4,4,0.1).map(function(x) {return {x:x, y:new_norm(x)};})
      var x = d3.scale.linear().range([margin.left,480]),
          y = d3.scale.linear().range([300, margin.top]);
      x.domain(d3.extent(new_data, function(d) { return d.x; }));
      y.domain([0,0.5]);
      var line = d3.svg.line().interpolate('basis')

      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); });
  
      d3.select('path.norm').datum(new_data).attr('d', line);
      d3.select('text.norm').text('Mean: ' + mn +', Std: ' + new_s);
  }
 
  
  function draw() {
    svg.append('g')
    .attr('class', 'panel');
  
    d3.select('.panel')
    .append('path')
    .datum([{x:0, y:radius}, {x:width, y:radius}])
    .attr('d', d3.svg.line().x(function(d) { return d.x;}).y(function(d) { return height - radius + d.y;}))
    .attr('class', 'line')
    .attr('stroke', 'black');
    

    var drag = d3.behavior.drag()
    .on('drag', dragMove);
    
    d3.select('.panel')
    .attr('transform', 'translate(' + 50 + ',' + 447 + ')')
    .append('circle')
    .attr('class', 'knob')
    .attr('r', radius)
    .attr('cx', 0)
    .attr('cy', height)
    .attr('stroke-width', 4)
    .attr('stroke', '#dd5030')
    .call(drag);
  }
  
  draw.w = function(value) {
    if (!arguments.length) return width;
    width = value
    return draw
  }
  draw.h = function(value) {
    if (!arguments.length) return height;
    height = value
    return draw
  }
  draw.r = function(value) {
    if (!arguments.length) return radius;
    radius = value;
    return draw;
  }
  draw.dragf = function(f) {
    if (!arguments.length) return dragMove;
    dragMove = f;
    return draw;
  }
  return draw
}


function dragMove2() {
  d3.select(this)
  .attr('cx', Math.max(1, Math.min(width2, d3.event.x)))
  .attr('cy', Math.max(radius*3, Math.min(height2-radius, d3.event.y)));
  var xpos = d3.select(this).attr('cx');
  var new_m = xpos/100;
  var stat_text = d3.select('text.norm').text().split(', ').map(function(e) { return e.split(': ');});
  var sd = parseFloat(stat_text[1][1]);
  console.log(s);
  console.log(xpos);
  var new_norm = nd(sd,new_m);
  var new_data = d3.range(-4,4,0.1).map(function(x) {return {x:x, y:new_norm(x)};})
  var x = d3.scale.linear().range([margin.left,width]),
      y = d3.scale.linear().range([height, margin.top]);
  x.domain(d3.extent(new_data, function(d) { return d.x; }));
  y.domain([0,0.5]);
  var line = d3.svg.line().interpolate('basis')
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });
  
  d3.select('path.norm').datum(new_data).attr('d', line);
  d3.select('text.norm').text('Mean: ' + new_m +', Std: ' + sd);
}


var panel1 = create_panel_knob().w(width2).h(radius).r(radius);
var panel2 = create_panel_knob().w(width2).h(radius*3).r(radius).dragf(dragMove2);
panel1();
panel2();