D3 Progress Bar

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<svg></svg>

CSS

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 8px; /* 12px */
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -5px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

CoffeeScript

data = {clean: 20, missing: 10, pass:40}


obj2table = (data) ->
  table = ["<table class='table table-condensed table-striped'>"]
  d3.entries(data).forEach (d) ->
    table.push("<tr><td>" + d.key + "</td><td>&nbsp</td><td>" + d.value + "</td></tr>")
  table.join("") + "</table>"

svg = d3.select("svg")
  .attr("width", 500)
  .attr("height", 400)
  .append("g")
       

data2 = d3.entries(data)
data2.forEach (d, i) ->
  data2[i].x = data2[i - 1]?.value || 0
    
console.log data2

S = 
  x: d3.scale.linear().range([0, 500]).domain([0, 60])
  c: (i) -> ["#0090C8", "#dc3c6e", "#7b7b7b"][i]

rect = svg.selectAll("rect")
  .data(data2).enter()
  .append("rect")
  .attr
     x: (d) -> S.x d.x
     y: 0
     height: "8px"
     fill: (d, i) -> S.c i
  #.transition()
  #.delay((d, i) -> (i + 1)/2*1000)
  .attr
     width: (d) -> S.x d.value
        
tip = d3.tip().attr("class", "d3-tip")
  .html((d) -> d.key + " : " + d.value)
  .direction('s')
  .offset([10, 0])
rect.call(tip)
rect.on
   mouseover: tip.show
   mouseout: tip.hide