index.html

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="http:////cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" type="text/css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script type="text/javascript" src="./build/build.js"></script>
<link rel="stylesheet" href="./build/build.css" type="text/css"/>
<style>
  body {
    padding: 0 100px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
  }
  .canvas {
    overflow: hidden;
    padding-top: 80px;
    position: absolute;
    top: 120px;
    left: 80px;
    right: 80px;
    bottom: 0
  }
  
</style>
<h1>funnel graph  </h1>
<div>fork from <a href="#">nashibao/funnel-graph</a></div>
<div class="canvas">
  <div class="funnelgraph">
    <ul class="y_axis">
      <li>100&percnt;</li>
      <li>80&percnt;</li>
      <li>60&percnt;</li>
      <li>40&percnt;</li>
      <li>20&percnt;</li>
    </ul>
    <div class="in-funnelgraph">
      <ul class="grid">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="table bar"><!-- ko with: funnel --><!-- ko foreach: bars --><!-- ko if: $index() != 0 -->
        <div class="table-cell space animated fadeInUp">
          <svg width="100%" height="100%" viewbox="0 0 100 100" preserveaspectratio="none">
            <path d="M0,0 L100,40 L100,100 L0,100Z" data-bind="attr: {d: d()}" class="animation"></path>
          </svg><span data-bind="style: {height: val() + '%'}" class="label"><span data-bind="text: label() + '%'">40%</span></span>
        </div><!-- /ko -->
        <div data-bind="click: $parent.toggle.bind($parent, $data), css: {'selected': $data == $parent.selected_bar()}" class="table-cell in-bar animated fadeInUp"><span style="height: 100%;" data-bind="style: {height: val() + '%'}" class="back"><span data-bind="text: val" class="pop"></span><span data-bind="text: title" class="x"></span></span></div><!-- /ko --><!-- /ko -->
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="./index.js"></script>