React Slider for Distributions

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/jstat/jstat/master/dist/jstat.min.js"></script>
<div class="container-fluid" >
  <div class="well" id='main'></div>
</div>

CSS

#main{margin-top: 30px;}
div.slider{margin-bottom: 15px;}
select.distribution{margin-bottom: 15px;}
span.slider__label,
span.slider__value{
  margin-bottom: 10px;
}

.x-axis-layer path,
.x-axis-layer line {
  fill: none;
  stroke: black;
  stroke-opacity: 0.8;
  shape-rendering: crispEdges;
}

.quantity {
  font-weight: bold;
  font-size: 48px;
}

CoffeeScript

R = React.DOM
Rc = React.createElement
#Rb = ReactBootstrap


FoodImage = (props) ->
	console.log props
	R.img { className: 'pull-left', src: "https://s3-eu-west-1.amazonaws.com/backend-dev-djangos3bucket-sn3vc5pbwwio/scrambledegg/peas " + props.data + ".jpeg", width: 600, height: 400 }

Slider = (props) ->
  R.div {className: 'slider', key: props.key},
    R.span {className: 'pull-left slider__label'}, props.label
    R.span {className: 'pull-right slider__value'}, 
      R.input {type: "number", className: "form-control input-sm"
        , value: props.value
        , onChange: props.handleChange
        , step: 0.1
        , style: {width: 60}}
    R.div {className: 'slider__range'},
      R.input {
        type: "range"
        min: "0"
        max: "12"
        step: "1"
        value: props.value
        onChange: props.handleChange
      }

sliderData = {}
sliderData.normal = [
  {
    label: "quantity"
    value: 6
  }
]
sliderData.exp = [
  {
    label: "rate"
    value: 0.1
  }
]

sliderData.uniform = [
  {
    label: "a"
    value: 0.1
  },
  {
    label: "b"
    value: 10
  }
]

AreaChart = d3Kit.factory.createChart(
  {
    margin: {top: 20, right: 20, bottom: 20, left: 20},
    initialWidth: 800,
    initialHeight: 200
  },
  [],
  (skeleton) ->
    L = skeleton.getLayerOrganizer()
    S = 
      x: d3.scale.linear()
      y: d3.scale.linear()
    A = 
      x: (d) -> d.x
      y: (d) -> d.y
    L.create(['area', 'x-axis', 'y-axis'])
    visualize = d3Kit.helper.debounce ->
      data = skeleton.data()
      W = skeleton.getInnerWidth()
      H = skeleton.getInnerHeight()
      S.x.range([0, W]).domain d3.extent(data, A.x)
      S.y.range([H, 0]).domain [0, d3.max(data, A.y)]
      area = d3.svg.area()
        .x((d) -> S.x A.x(d))
        .y0(H)
        .y1((d) -> S.y A.y(d))
      #area = d3.svg.line()
      #  .x((d) -> S.x A.x(d))
      #  .y((d) -> S.y A.y(d))
      areaL = L.get('area').selectAll('path').data([data])
     ...