D3FC and Distributions

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3fc/5.0.0/d3fc.bundle.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/d3fc/5.0.0/d3fc.min.css">
<script src="//rawgit.com/jstat/jstat/master/dist/jstat.min.js"></script>
<select name="dist" id="dist" class="form-control">
    <option value="normal">Normal</option>
    <option value="uniform">Uniform</option>
    <option value="cauchy">Cauchy</option>
</select>
<div id="chart"></div>

CSS

#chart{
  height: 300px;
  width: 400px;
  margin-top: 20px;
}

JavaScript

var x = d3.range(-13, 3, 0.1)
var d = x.map(function(x_){
  return {x: x_, y: jStat.normal.pdf(x_, 0, 1)}
})

var data = d3.range(50).map(function(d) {
    return {
        x: d / 4,
        y: Math.sin(d / 4),
        z: Math.cos(d / 4) * 0.7
    };
});

var data = d

// create a chart
var chart = fc.chart.cartesian(
              d3.scale.linear(),
              d3.scale.linear())
          .yDomain(fc.util.extent().pad(.2).fields('y')(data))
          .yLabel('Sine / Cosine')
          .yNice()
          .yOrient('left')
          .xDomain(fc.util.extent().fields('x')(data))
          .xLabel('value')
          //.xBaseline(0)
          .margin({left: 50, bottom: 50});

// create a pair of series and some gridlines
var sinLine = fc.series.area()
  .xValue(function(d) { return d.x; })
  .yValue(function(d) { return d.y; });

var cosLine = fc.series.area()
  .xValue(function(d) { return d.x; })
  .yValue(function(d) { return d.z; });

var gridlines = fc.annotation.gridline();

// combine using a multi-series
var multi = fc.series.multi()
  .series([gridlines, sinLine]);

chart.plotArea(multi);

// render
d3.select('#chart')
    .datum(data)
    .call(chart);

function make_data(dist){
   var x = d3.range(-3, 3, 0.1)
   var d = x.map(function(x_){
     return {x: x_, y: jStat[dist].pdf(x_, 0, 1)}
   })
   return d
}

d3.select("select").on("change", function(e){
  var dist = this.value
  console.log(dist)
  var data = make_data(dist)
  chart
    .xDomain(fc.util.extent().fields('x')(data))
    .yDomain(fc.util.extent().pad(.2).fields('y')(data))
  d3.select('#chart')
    .datum(data)
    .call(chart);
})