JSFiddle - React, Tailwind, and code Playground

by stvnmntjy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<main class="container" data-ng-controller="AppCtrl">
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
          <li><a href="#">Sorting</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <a href="#">Bubble</a> 
      <a href="#">Bucket</a>
      <a href="#">Counting</a> 
      <a href="#">Heap</a> 
      <a href="#">Insertion</a> 
      <a href="#">Merge</a>
      <a href="#">Quick</a>
      <a href="#">Radix</a> 
      <a href="#">Selection</a> 
      <a href="#">Shell</a> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div id="dsa1" class="text-center">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="text-center">
        <div class="btn-group">
          <button type="button" title="play" class="btn btn-default"><i class="fa fa-play"></i>
          </button>
          <button type="button" title="pause" class="btn btn-default"><i class="fa fa-pause"></i>
          </button>
        </div>
        <div class="btn-group">
          <button type="button" title="to start" class="btn btn-default"><i class="fa fa-backward"></i>
          </button>
          <button type="button" title="to previous swap" class="btn btn-default"><i class="fa fa-fast-backward"></i>
          </button>
          <button type="button" title="to...

CoffeeScript

app = angular.module 'app', []

app.controller 'AppCtrl', ['$scope', '$compile', ($scope, $compile) ->
  newGraph = ->
    el = $compile("""<bar-chart data-array="arr"></bar-chart>""")($scope.$new())
    $('#dsa1').empty().append el
    return
  newArray = ->
    $scope.arr = chance.shuffle (i for i in [1..20])
    return
  $scope.arr = []
  $scope.randomize = ->
    newArray()
    $scope.restart()
    return
  $scope.restart = ->
    newGraph()   
    return
  $scope.randomize()
  bubbleSort $scope.arr
  return
]

app.directive 'barChart', ->
  template: 
    """
    <svg></svg>
    """
  restrict: 'E'
  replace: true
  scope:
    array: '='
  link: (scope, iElement, iAttrs, controller) ->
    height = 300
    console.log $(document).width()
    width = $(document).width() * 0.9
    scaleX = d3.scale.ordinal().
      domain(d3.range scope.array.length).    
      rangeRoundBands [0, width], .33
    scaleY = d3.scale.linear().
      domain([0, d3.max scope.array]).
      range [height, 0]
    svg = d3.selectAll(iElement).attr(
        height: height
        width: width
      )
    svg.selectAll('rect').
      data(scope.array).
      enter().append('rect').attr(
        height: (d) -> height - scaleY d
        width: scaleX.rangeBand()
        x: (d, idx) -> scaleX idx
        y: (d) -> scaleY d
      )
    return

swap = (arr, i, j) ->
  temp = arr[i]
  arr[i] = arr[j]
  arr[j] = temp
  return

bubbleSort = (arr) ->
  for i in [0...arr.length]
    for j in [i+1...arr.length]
      if arr[i] > arr[j]
        swap arr, i, j
        console.log arr
  return

angular.bootstrap document, ['app']