Facet with Zoom

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.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.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<script src="//rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.min.js"></script>
<link rel="stylesheet" href="//rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.css">
<script src="//rawgit.com/ramnathv/4d9a709e2913e8eb8d97/raw/3dc6296bcc67aac87a96c29799a4a6f5295503d7/metrictest.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<script src="//joaopereirawd.github.io/animatedModal.js/js/animatedModal.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//rawgit.com/ramnathv/728cb6ff272030c2e102/raw/1e2eeda618f55c642d377d25307d482f5d0663ba/fonts_standalone_2.css">
<script src="//rawgit.com/ramnathv/091e34d7c39152ab374b/raw/ebae7fc5130650cc741aa862d7c27b0cccc2b614/economics.js"></script>
<script src="//rawgit.com/ramnathv/0de220a9516fb200dd7a/raw/c3e94cd0210fe75fec5c741d0e7e9047310b7948/testdata.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">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span...

CSS

text{
  font-size: 12px;
}

span.key{
  font-weight: bold;
}

.modal-content{
   margin-top: 20px;
   margin-left: 10px;
   margin-right: 10px;
   border: none;
   box-shadow: none;
   -webkit-box-shadow: none;
}

.chart-wrapper{
  cursor: pointer;
}

.chart-wrapper .glyphicon{
  visibility: hidden;
}
.chart-wrapper:hover .glyphicon{
  visibility: visible;
}

.navbar-inverse {
  background-color: steelblue;
  border-color: steelblue;
}
body.application {
  background: white
}

CoffeeScript

d3k = d3k || {}
d3k.panel = ->
  defaults = 
    panels: ["title", "stage", "notes"]
    title: ""
    stage: ""
    notes: ""

  opts = extend(arguments[0], defaults)
  exports = (selection) ->
    selection.each (data) ->
      panel = d3.select(@)
        .selectAll("div.chartpanel")
        .data(data, (d) -> d.title)
      panel.exit().remove()
      panelEnter = panel.enter()
        .append("div.col-md-3.col-xs-12.chartpanel")
        .append("div.chart-wrapper")
      ###
      panel = d3.select(@)c
        .selectAll("div.chart-wrapper")
        .data(data)
      panelEnter = panel.enter()
        .append("div.chart-wrapper")
      ###
        
      panelEnter.attr('id', (d, i) -> "chart-#{d.title}")
      opts.panels.forEach (d) ->
         panelEnter
           .append("div.chart-#{d}")
           .html opts[d]

  exports.opts = opts; createAccessors(exports)
  exports

animateChart = ->
  this.each (d) ->
    p = d3.select(this);
    totalLength = p.node().getTotalLength();
    p
     .attr('stroke-dasharray', totalLength + ' ' + totalLength)
     .attr('stroke-dashoffset', totalLength)
     .transition()
     .duration(2000)
     .ease('linear')
     .attr('stroke-dashoffset', 0);

addIcon = (sel, data, name, opts) ->
    pspan = sel.selectAll(name).data(data)
    pspan.enter().append(name)
    cl = name.split("\.")[1]
    pspan.attr
      "class": cl + " " + opts.class
      "data-toggle": "tooltip"
      "data-html": true
      "data-title": opts.title || cl
      "data-placement": opts.placement || "left"
        
mydata = [
 {title: 'Panel 1', stage: data, notes: '&nbsp'},
 {title: 'Panel 2', stage: data, notes: '&nbsp'}
]


rowTable = (data, keys = "line_id") ->
  span = ["<span>"]
  d3.entries(data)
    .filter((d) -> keys.indexOf(d.key) < 0)
    .forEach (d) -> 
       span.push("<span class='key'>&nbsp" + d.key + "</span> : "  + d.value + "&nbsp")
  return span.join("") + "</span>";

    
addTooltip = (json, target) ->
  json.show_tooltips =...