Variable Importance Plot

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container-fluid" id="main">
    <div class="col-md-3 col-xs-12">
      <div class="chart-wrapper tab-wrapper">
        <div class="chart-title">
            <ul class="nav nav-tabs">
                <li role="presentation"><a href="#" class='nocursor'>
                    <b>Variable Importance</b>
                    <span class="glyphicon glyphicon-info-sign"></span>
                 </a>
               </li>
  <li role="presentation" class='pull-right'><a href="#">Gini</a></li>
  <li role="presentation" class='active pull-right'><a href="#">Information Gain</a></li>
</ul>
        </div>
        <div class="chart-stage" id="test">
            
        </div>
        <div class="chart-notes">
            <small>This is a footnote</small>
        </div>
      </div>
    </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.progress-custom{
  height:10px;
  border-radius: 0px;
  box-shadow: none;
  background: #eee;
  margin-bottom: 10px;
}
.well-custom h3{
  margin-top: 5px;
}
.well-custom{
  padding-top: 15px;
}
.measure-value{
  margin-bottom: 8px;
  opacity: 0.6;
}

.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, 
.nav-tabs > li:hover > a::after { 
   transform: scale(1); 
}
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

a.nocursor{
  cursor: default;
  font-weight: bold;
}
.nav-tabs > li > a.nocursor:hover{
  color: inherit !important;
}
li > a.nocursor:after{
  background: none;
}

.chart-wrapper.tab-wrapper .chart-title{
   border-bottom: 0px;
   padding: 0px;
}

#test{
  margin-left: 5px;
  margin-right: 5px;
}

CoffeeScript

d3AltTable = ->
  exports = (selection) ->
    selection.each (data) ->
      sel = d3.select(@)
      div = sel.selectAll('div.foo').data(data)
      divEnter = div.enter()
        .append('div.foo.row')
        .append('div.col-md-12')
        
      div.exit().remove()
        
      measureValue = divEnter
        .append('div.measure-value')
      measureValue.append("span.measure")
      measureValue.append('span.value.pull-right')
        
      divEnter
        .append('div.progress.progress-custom')
        .append('div.progress-bar.progress-bar-success')
        
      div.select('span.measure')
        .transition().text (d) -> d.measure
      div.select('span.value')
        .transition()
        .text (d) -> d3.format('%f')(d.value)
      progressBar = div.select('div.progress-bar')
        .attr
          role: 'progressbar'
          "aria-valuenow": (d) -> d.value
          "aria-valuemin": 0
          "aria_valuemax": 100
      progressBar.transition().style
        width: (d) -> "#{d.value*100}%"
  exports
        
            
data = [{"measure":"Temp","value":0.52},{"measure":"Wind","value":0.29},{"measure":"Solar.R","value":0.13},{"measure":"Day","value":0.04},{"measure":"Month","value":0.02}] 

data2 = -> [
  {measure: "Temparature", value: Math.random()},
  {measure: "Pressure", value: Math.random()},
  {measure: "Ozone", value: Math.random()}
]

d3.select("#test")
  .datum(data)
  .call(d3AltTable())
    
d3.selectAll("li.pull-right").on "click", ->
  d3.selectAll('.nav-tabs li')
    .classed('active', false)
  d3.select(@).classed('active', true)
  flip = Math.random() < 0.5
  
  if (flip) then DATA = data2() else DATA = data
  d3.select("#test")
    .datum(DATA)
    .call(d3AltTable())