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">
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<script src="//dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script src="//rawgit.com/ramnathv/465d60a8ecb36bad7a68/raw/ac474073b827a681415d6c3c7e54775c68a4a2ba/diamonds.js"></script>
<link rel="stylesheet" href="//linkedin.github.io/hopscotch/css/hopscotch.css">
<script src="//linkedin.github.io/hopscotch/js/hopscotch-0.1.2.min.js"></script>
<script src="//rawgit.com/RubaXa/Sortable/master/Sortable.min.js"></script>
<div class="container" id='start'>
    <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 sortbtn" style='margin-left:0px;'>
               <span id='sort-asc' class="btn btn-sm btn-default">
                   <span class="icon icon-sort-alpha-asc"> </span>
               </span>
               <span id='sort-desc'...

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
    

mytour = 
  id: 'start'
  steps: [
    {
      target: '.selectize-input',
      placement: 'bottom',
      title: 'Search',
      content: 'Use the search box to selectively display variables of interest.'
    },
    {
      target: '.sortbtn',
      placement: 'right',
      title: 'Sort',
      content: 'Use these buttons to sort the panels alphabetically by variable name'
    },
    {
     target: 'preview',
     placement: 'top',
     content: 'Each panel displays a summary of a variable. Hover over a panel and click on top right to zoom it.'
     
    }
  ]
    
    

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, 130, {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
        .datum(d)
        .call(draw, 420, {size: "compress"})
      
      
        
  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'
   d3.select("#controls").style("visibility", v_)

drawAxes = (svg, S, A, opts) ->
  if...