d3.bs.progress

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<div class="container">
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-info">Update</button>
        <br/><br/> 
      </div>
       
    </div>
    <div class="row">
        <div class="col-xs-6 new"></div>
        <div class="col-xs-6"></div>
  </div>
  <div class="progress-bar  progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
</div>
        </div>
    </div>
</div>

CSS

.container{
  margin-top: 20px;
}

.dataquality{
  height: 10px;
}

CoffeeScript

data = [
 {value: 80, key: 'success', status: 'valid'},
 {value: 20, key: 'danger', status: 'na'}
]

make_data = ->
  v = Math.round(Math.random()*100, 0)
  [
   {value: v, key: 'success', status: "valid"},
   {value: 100 -v, key: 'danger', status: "na"}
  ]

d3.bs = d3.bs || {}

d3.bs.progress = ->
  exports = (selection) ->
    selection.each (data) ->
      pbar = d3.select(@).selectAll(".progress").data([{}])
      pbar.enter().append("div.progress.dataquality")
      items = pbar.selectAll('div.progress-bar').data(data)
      items.enter().append('div.progress-bar')
      items
        .attr
          class: (d) -> "progress-bar progress-bar-#{d.key}"
          role: "progressbar"
          "data-toggle": "tooltip"
          "title": (d) -> "#{d.value}% #{d.status}"
        .style
          width: (d) -> "#{d.value}%"
          opacity: 0.9
 
bs = d3.select('.container')
  .datum(data)
  .call(d3.bs.progress())
    
d3.select(".btn").on "click", ->
  bs.datum(make_data()).call(d3.bs.progress())
    
$ ->
  $("[data-toggle='tooltip']").tooltip()