Mithril Variable Importance Component

This fiddle creates a variable importance plot using Mithril and D3

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">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<div class="container-fluid" id='main'>
  <div class="row">
    <div class="col-xs-12">
      <div id="app"></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;
}

Babel + JSX

/** @jsx m */
const Panel = {
  view(ctrl, props, children){
    return (
			<div className="chart-wrapper tab-wrapper">
        <div className="chart-title">{props.title}</div>
        <div className="chart-stage">{children}</div>
        <div className="chart-notes">
          <small>{props.notes}</small>
        </div>
      </div>      
    )
  }
}

const Title = (props) => {
   return <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>
     {props.tabs.map(tab => {
       const cl = tab === props.active() ? ' active' : ''
       return <li role="presentation" className={'pull-right' + cl}>
         <a href="#"
           onclick={e => {
             props.active(tab)
           }}
         >
           {tab}
         </a>
       </li>
     })}
   </ul>
}


const Stage = {
  view(ctrl, props){
     return (
        <div className="foo row">
          <div className="col-md-12">
            <div className="measure-value">
              <span class="measure">{props.key}</span>
              <span class="value pull-right">{props.value}%</span>
            </div>
            <div class="progress progress-custom">
              <div class="progress-bar progress-bar-success" role="progressbar" 
                aria-valuenow={props.value*0.01} aria-valuemin="0" aria_valuemax="100" 
                style={{width: props.value + "%"}}>
              </div>
            </div>
          </div>
        </div>
     )  
  }
}

const MyPanel = ({data, active, tabs}) => {
   const myTitle = Title({
     tabs: tabs,
     active: active
   })
   return (
     <Panel 
       title={myTitle} 
       notes='This is a footnote'
       active={active}
     >
       <div>
         {Object.keys(data()).sort().map(k => {
           return <Stage key={k} value={data()[k]} />
         })}
       </div>
     </Panel>
   )
}
  ...