React Slider for Distributions

by ramnathv

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;
}

CoffeeScript

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

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'}, props.value
    R.div {className: 'slider__range'},
      R.input {
        type: "range"
        min: "0.1"
        max: "5"
        step: "0.1"
        value: props.value
        onChange: props.handleChange
      }

sliderData = {}
sliderData.normal = [
  {
    label: "mean"
    value: 0.1
  },
  {
    label: "stdev"
    value: 1
  }
]
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: 250
  },
  [],
  (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])
      areaL.enter().append("path")
      areaL
        .transition().duration(750)
        .attr
          d: area
          stroke: "none"
          fill: "steelblue"
        
      xAxis = d3.svg.axis()
        .scale(S.x.nice())
        .orient('bottom')
        .ticks(4)
      L.get('x-axis')
        .attr("transform", "translate(0, #{H})")
        .transition()
       ...