Alternate Table using D3

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinFlat.min.css">
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-md-3 col-xs-12" style='background:#fafafa;padding:20px;'>
            <h4>Variable Importance</h4>
            <div id="chart"></div>
            <div style='height:50px;border-top:1px solid #ddd;padding-top:10px;margin-bottom:25px;'>
                <input id="range_01" />
            </div>
            <!-- <small class='note'>Filter features based on threshold</small> -->
            <div class="btn-group" style='margin-top:10px;' role="group" aria-label="...">
  <button type="button" class="active btn btn-sm btn-default">setosa</button>
  <button type="button" class="btn btn-sm  btn-default">versicolor</button>
  <button type="button" class="btn btn-sm  btn-default">virgnica</button>
</div>
            <!-- <button class="btn btn-sm btn-default">Update</button>-->
        </div>
    </div>
</div>

CSS

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
    margin-top: -25px;
    margin-left: 40px;
}
#main{
  margin-top:20px;
  margin-left: 15px;
  margin-right: 15px;
}

CoffeeScript

myslider = $("#range_01").ionRangeSlider(
  min: 0,
  max: 1,
  step: 0.01,
  grid: true,
  onChange: (v) ->
    mydata = data3.filter (d) -> d.value > v.from
    myTable
      .height(mydata.length*70)
      .data(mydata)
)


defaultThemeConfig = 
  frame: 
    padding: "6px",
    #background: 'linear-gradient(to top, rgb(16, 74, 105) 0%, rgb(14, 96, 125) 90%)',
    background: "black",
    'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif',
    #'border': '1px solid rgb(57, 208, 204)',
    color: 'rgb(245,240,220)',
    'border-radius': '4px',
    'font-size': '12px',
    'box-shadow': '0px 1px 3px rgba(0,20,40,.5)'
    title: {'text-align': 'center', 'padding': '4px'},
    item_title: {'text-align': 'right', 'color': 'rgb(220,200,120)'},
    item_value: {'padding': '1px 2px 1px 10px', 'color': 'rgb(234, 224, 184)'}
    options: null

d3.kodama.themeRegistry('kodama1', defaultThemeConfig)

attachKodamaTip = (sel) ->
  makeTipData = (d) ->
    title: "#{d.measure} accounts for #{d3.format('%.1f')(d.value)}"
    theme: "kodama1"
    distance: 0
  sel.call d3.kodama.tooltip().format(makeTipData)
  #d3.select("div[name='kodamaTip']")
  # .append("div.arrow-down")
    
data2 = -> [
  {measure: "Temparature", value: Math.random()},
  {measure: "Pressure", value: Math.random()},
  {measure: "Ozone", value: Math.random()}
]

data3 = [{"measure":"Petal.Width","value":0.44},{"measure":"Petal.Length","value":0.43},{"measure":"Sepal.Length","value":0.1},{"measure":"Sepal.Width","value":0.02}]

setosa =...