D3 Stepper with Bootstrap

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="////maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/yeti/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.4.0/Showdown.min.js"></script>
<div class="container">
   <div id="mypanel" class='new'></div>
</div>

CSS

body {
    margin-top: 20px;
}

CoffeeScript

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return

converter = new Showdown.converter()


d3Panel = () ->
  defaults = {panels: ["heading", "body"], type: "default"}
  opts = arguments[0] || defaults
  exports = (selection) ->
    selection.each (data) ->
        mypanel = d3.select(this).append("div")
          .attr("class", "panel panel-#{opts.type}")
        opts.panels.forEach (d) ->
           mypanel.append("div").attr("class", "panel-#{d}")
  exports.opts = opts; createAccessors(exports)
  exports

d3Paginate = ->
  opts = {callback: (d, i) -> console.log d}
  exports = (selection) ->
    selection.each (data) ->
      nav = d3.select(this)
      ul = nav.append("ul")
        .classed("pagination", true)
      li = ul.selectAll("li")
        .data(data).enter()
        .append("li")
      li.classed("active", (d, i) -> i is 0)
      li.append("a")
        .attr("href", "#")
        .text((d) -> d)
      li.on "click", (d, i) ->
        nav.selectAll("li").classed("active", false)
        d3.select(this).classed("active", true)
        opts.callback(d, i)
   exports.opts = opts; createAccessors(exports)
   exports
          
      
panel1 = d3Panel()

mypanel1 = d3.select("#mypanel")
  .call(panel1)
    
mypanel1.select(".panel-heading")
  .text("Steps")
    
pbody = mypanel1.select(".panel-body")
pbody.append("span")
  .html converter.makeHtml("##Basic Panel Example!")

notes = ['Panel 1', 'Panel 2', 'Panel 3', 'Panel 4']
color = d3.scale.category10()
mypages = d3Paginate()
  .callback (d, i) ->
    #pbody.select("span").text(notes[i])
    pbody
      .select("span")
      .transition()
      .style("color", color(d))
    
pfooter = mypanel1.select(".panel-footer")
pbody.append("div")
  .attr("class", "steps")
  .datum(d3.range(1,...