D3 Kit Experiments

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="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.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">
<script src="//rawgit.com/Codility/intro.js/number-positioning/intro.js"></script>
<link rel="stylesheet" href="//rawgit.com/Codility/intro.js/number-positioning/introjs.css">
<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="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<link rel="stylesheet" href="//rawgit.com/ramnathv/7a3a837a86b7f3f80d12/raw/bc72b6075b19c5cbabde8cddbb42eab6e0e076c2/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<link rel="stylesheet" href="//rawgit.com/ramnathv/728cb6ff272030c2e102/raw/1e2eeda618f55c642d377d25307d482f5d0663ba/fonts_standalone_2.css">
<script src="//cdn.rawgit.com/Caged/d3-tip/master/index.js"></script>
<script src="//rawgit.com/ramnathv/7d92a0c9bf3257748fa4/raw/04409320a78c9c19aa594c7a4fbbb63f1564ad02/data11.js"></script>
<script src="//rawgit.com/ramnathv/7d92a0c9bf3257748fa4/raw/acbf7a241905715fb12bf5b012dd3a44bacdc9c5/data12.js"></script>
<script src="//rawgit.com/ramnathv/0f001ddf19c63816cfd7/raw/ae11dad23e2ead8ca6dee1a16b8fe3ed9164836e/fulldata.js"></script>
<div id="main">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div...

CSS

.x-axis-layer line, .y-axis-layer line,
.x-axis-layer path, .y-axis-layer path {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}
.x-axis-layer text, .y-axis-layer text{
  fill: #aaa;
}
.y-axis-layer path {
  stroke: transparent;
}
/*
.line{
  stroke-width: 3px;
}
*/
.x-axis label{
  fill: red;
}
/* increase line-height for tooltip */
.d3-tip{
  font-weight: normal;
  line-height: 1.5em;
}
.container {
   margin-top: 20px;
}
.d3-tip{
  padding: 6px;
}

rect:hover {
  fill: #C0DC2A;
}
/* rename to hidden2 to prevent conflict with hidden
class in bootstrap which adds display: none;
causing charts to disappear on resize  
*/
.hidden2 {
  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;
}
#preview{
  visibility: hidden;
}
/* Uncomment to hide info and expand icons in the */
#test .chart-wrapper .summary,
#test .chart-wrapper .expand{
  visibility: hidden;
}
#test .chart-wrapper:hover .summary,
#test .chart-wrapper:hover .expand{
  visibility: visible;
}
.dataquality{
  height: 5px;
  margin-bottom: 10px;
  border-radius: 0px;
}
.navbar-inverse {
  background-color: steelblue;
  border-color: steelblue;
}
.d3-tip{
  font-size: 10px;
}
.d3-tip.n:after{
  margin: -2px 0 0 0; 
}
td.key{
  text-align: left;
}
td.value {
  text-align: right;
}
#controls span.selected {
  background: #bbb;
}
/*
#con{
  position: fixed;
  top: 40px;
  z-index: 1030;
}
*/
.chart-wrapper {
  margin-bottom: 0px;  
}
/* div.introjs-tooltip{min-width:300px;text-align:justify;} */
.introjs-helperNumberLayer{
  border: none;
  background: steelblue;
  box-shadow: none;
  border-radius: 0;
} 
#test .x-axis-layer, #test .y-axis-layer{
  display: none;
}
.x-axis-layer line{
  stroke: transparent;
}
span.expand, span.compress{
...

CoffeeScript

attachTooltip = (sel, opts) ->
  tip = undefined
  tip = d3.tip().attr('class', 'd3-tip').html(opts.html)
  d3.select(sel.node().parentNode).call tip
  sel.on 'mouseover', tip.show
  sel.on 'mouseout', tip.hide
  sel

createAccessors = (visExport) ->
  n = undefined
  for n of visExport.opts
    `n = n`
    if !visExport.opts.hasOwnProperty(n)
      continue
    visExport[n] = do (n) ->
      (v) ->
        if arguments.length
          visExport.opts[n] = v
          this
        else
          visExport.opts[n]
  return

extend = (defaults, options) ->
  extended = undefined
  prop = undefined
  extended = {}
  prop = undefined
  for prop of defaults
    `prop = prop`
    prop = prop
    if Object::hasOwnProperty.call(defaults, prop)
      extended[prop] = defaults[prop]
  for prop of options
    `prop = prop`
    prop = prop
    if Object::hasOwnProperty.call(options, prop)
      extended[prop] = options[prop]
  extended

makeFieldSummary = (dat) ->
  d3.select("body").classed("application", true)
  d3.bs = d3.bs || {}

  d3.bs.progress = ->
    exports = (selection) ->
      selection.each (data) ->
        pbar = d3.select(@).selectAll(".progress").data([{}])
        pbar.enter().append("div.progress.dataquality")
        items = pbar.selectAll('div.progress-bar')
          .data(data)
        items.enter().append('div.progress-bar')
        items
          .attr
            class: (d) -> "progress-bar progress-bar-#{d.key}"
            role: "progressbar"
            "data-toggle": "tooltip"
            "data-original-title": (d) -> "#{d.value}% #{d.status}"
          .style
            width: (d) -> "#{d.value}%"
            opacity: 0.9
              

  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(@)
         ...