Responsive Experiments 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>
<script src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.4.0/metricsgraphics.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.4.0/metricsgraphics.min.js"></script>
<script src="//brianreavis.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="//rawgit.com/brianreavis/selectize.js/master/dist/css/selectize.bootstrap3.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//rawgit.com/bootflat/bootflat.github.io/master/bootflat/css/bootflat.min.css">
<script src="//rawgit.com/ramnathv/2c9f3ce6623bd2da3f20/raw/e55af02c99a0385fb3997e98b7fe89a874cf4740/data2.js"></script>
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<div class="container">
    <div class="row">
       <div id = 'controls' class="col-xs-10" 
          style='margin-left: 15px;'>
          <a><small id='reset' style='visibility:hidden;cursor:pointer;'>
              Show All</small></a>
          <input id='search' type="text" class='form-control' /><br/>
          <div class="btn-group" style='margin-left:0px;margin-bottom:10px;'>
               <span id='sort-asc' class="btn btn-sm btn-default">
                   <span class="icon icon-sort-alpha-asc"> </span>
               </span>
               <span id='sort-desc' class="btn btn-sm btn-default">
                <span class="icon icon-sort-alpha-desc"> </span>
               </span>
           </div>
       </div>
       <div class="col-xs-12">        
          ...

CSS

.container {
   margin-top: 20px;
}

.d3-tip{
  font-weight: normal;
  font-size: 12px;

  line-height: 1.4em;
}

/*
.panel {
   margin-bottom: 0px;
}


#new{
  min-height: 300px;
}
*/
.bar:hover {
  fill: #C0DC2A;
}
/*
.panel:hover{
  background: whitesmoke;
}
*/
/* hack to prevent space between arrow and tooltip rect */
.d3-tip.n:after {
    margin: -3px 0 0 0;
}

.hidden {
  opacity: 0.1;
  transition: opacity 500ms ease-in;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  z-index: 0 !important;
}

.visible {
  opacity: 1;
  transition: opacity 500ms ease-in;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
}

.axis line,
.axis path {
  fill: none;
  stroke: #eee;
  shape-rendering: crispEdges;
}
/* remove y-axis line */
.y.axis path {
  display: none;
}
.y.axis text {
  visibility: hidden;
}
.dataquality{
  height: 6px;
  margin-bottom: 0px;
  margin-top: 5px;
}
.panel .size,
.panel .summary{
    visibility: hidden;
}
.panel:hover {
   /*background: lightgoldenrodyellow;*/
}
.panel:hover .size,
.panel:hover .summary{
    visibility: visible;
}
.glyphicon-resize-small{
  visibility: visible !important;
}
td.key{
  text-align: left;
}
td.value {
  text-align: right;
}
#controls span.selected {
  background: #bbb;
}
#new{
  top: 60px;
}
/* Embedded FA Icons */
@font-face {
	font-family: 'icomoon';
	src:...

CoffeeScript

getPosition = (i) ->
  el = $('.panel')[i]
  # http://api.jquery.com/position/
  pos = $(el).offset()
  pos
    
d3.table = (data) ->
  table = ["<b>", data.state, "</b>", "<table>"]
  d3.entries(data).forEach (d) ->
    table.push("<tr><td>" + d.key + "</td><td>&nbsp</td><td>" + d.value + "</td></tr>")
  table.join("") + "</table>"
 
DRAW = (vv, data) ->
  dd = data.filter (d) -> vv.indexOf(d.key) >= 0
  divs = d3.select("#preview")
    .selectAll(".col-sm-6")
    .data dd, (d) -> d.key
  divs.enter().append("div.col-xs-12.col-sm-6.col-md-4")
  divs.call(draw, 120, {size: "expand"})
  divs.exit().remove()
  panel = divs.selectAll(".panel")
        
  panel.select(".size").on "click", (d, i) ->
      p = this.parentNode.parentNode
      pos = $(p).position()
      scrollTop = $(window).scrollTop()
      toggleDetail(true)
      detail = d3.select("#detail")
      detail.selectAll("*").remove()
      detail
        .attr("posT", "#{pos.top - scrollTop}")
        .attr("posL", "#{pos.left}")
        .style("top", "#{scrollTop + 60}px")

      detail.append("div.col-xs-12.col-md-8")
        .datum(d)
        .call(draw, 420, {size: "compress"})
        
      detail.append("div.col-xs-12.col-md-4.sumtab")
        .datum((d) -> return [d])
        .call d3.ui.panel()
        
      sumtab = detail.select(".sumtab")
      sumtab
        .select(".panel-heading")
        .html "<b>Summary</b>"
      sumtab
        .select(".panel-body")
        .html d3.table(d.summary)
      sumtab.select("table").classed("table table-striped", true)
        
      
      
      
        
  d3.select("#detail").on 'click', -> 
     toggleDetail(false)
     x = d3.select(@).attr('posL')
     y = d3.select(@).attr('posT')
     console.log [x, y]
     window.scrollTo(0, -y)
     


toggleDetail = (s) ->
   d3.select("#preview").classed("hidden", s).classed("visible", !s)
   d3.select("#detail").classed("visible", s).classed("hidden", !s)
   v_ = if s then 'hidden' else 'visible'
   d_ =...