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="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<script src="//rawgit.com/ramnathv/eb5d5767e1887fe573ff/raw/853fbe636dbcdc461ad86d3289846429ab2007bd/data_all.js"></script>
<link rel="stylesheet" href="//rawgit.com/ramnathv/02d763de3a799d2a86e9/raw/ac359526608cf1802643457f03d4007de0b4a20c/bootstrap_standalone.min.css">
<link rel="stylesheet" href="//rawgit.com/bootflat/bootflat.github.io/master/bootflat/css/bootflat.min.css">
<script src="//rawgit.com/mozilla/metrics-graphics/bc2af777beeeeb058f375665b7d178ea762b4097/examples/js/addons/mg_line_brushing.js"></script>
<link rel="stylesheet" href="//rawgit.com/mozilla/metrics-graphics/bc2af777beeeeb058f375665b7d178ea762b4097/examples/css/addons/mg_line_brushing.css">
<script src="//rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.min.js"></script>
<div class="container">
    <div class="row">
      <div class="col-xs-12">
          <div class="legend" id='legend'> </div>
      </div>
       <div class="col-xs-12">
           <div id="main"> </div>
           <div id="new"> </div>
       </div>
    </div>
    
</div>

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: darkred;
}
.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;
  transition: opacity 1000ms ease-in;
  -webkit-transition: opacity 1000ms ease-in;
  -moz-transition: opacity 1000ms ease-in;
  z-index: 0 !important;
}

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

path.mg-main-line{stroke-width: 2px;}
div.legend{
 margin: 10px 10px 10px 10px;
}
.panel-heading .glyphicon {
  margin-right: 4px; 
}
#legend span{
      padding: 5px;
      /*border-radius: 6px;*/
      background: whitesmoke;
      /*background: #1691c6;*/
      margin-left: 5px;
}
#legend span:hover{
   cursor: pointer;
   background: #FFF852;
}
.mg-y-axis text,
.mg-x-axis text,
.mg-active-datapoint{
    font-size: 0.8em;
}
.mg-bar rect{
    fill:  whitesmoke;
}
.mg-line6-color {
    stroke: steelblue;
}

.mg-area6-color {
    fill: steelblue;
}

.mg-hover-line6-color {
    fill: steelblue;
}

.mg-line6-legend-color {
    color: steelblue;
}

svg text{
    font-size: 1em !important;
}
.panel-heading {
   font-size: 1.2em;
}
.legend span {
    font-size: 1.2em;
    margin-bottom: 2em;
}

CoffeeScript

lineChart = (opts) ->
    x = {
        data: opts.data,
        full_width: true,
        linked: true,
        width: '100%',
        bottom: 40,
        interpolate: 'linear',
        inflator: 0.9,
        max_y: opts.max,
        min_y: opts.min,
        xax_format: d3.format('d'),
        height: opts.height,
        target: opts.target,
        x_accessor: 'Year',
        y_accessor: 'value',
        y_extended_ticks: true,
        animate_on_load: true,
        #legend_target: '.legend',
        #legend: genres
    }
    if (d3.select(".legend span").empty())
      x.legend_target = ".legend"
      x.legend =  opts.data.map (d) -> d[0].genre
      laction = true
    else
      laction = false
    MG.data_graphic(x)
    if (laction)
       d3.selectAll(".legend span")
          .attr('num', (d, i) -> i + 1)
       legendAction2()
    

animateChart = ->
  path = @selectAll('.mg-main-line')
  path.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
    return
  return

toggleOpacity = ->
  old_op = parseFloat(@style('opacity'))
  new_op = if old_op < 0.4 then 1 else 0.35
  @style 'opacity', new_op

toggleStrokeWidth = ->
  old_op = parseFloat(@style('stroke-width'))
  new_op = if old_op >= 1.9 then 1.1 else 2
  @style 'opacity', new_op

togglePointer = ->
  ol = @style('pointer-events')
  ne = if ol == 'none' then 'all' else 'none'
  @style 'pointer-events', ne

legendAction2 = ->
  d3.selectAll(".legend span").on 'click', ->
    console.log 'clicked' + d3.select(@).attr("num")
    j = d3.select(@).attr("num")
    c1 = '.mg-line' + j + '-legend-color'
    c2 = '.mg-main-line.mg-line' + j + '-color'
    c3 = '.mg-line' + j + '-color'
    y = d3.select(@).classed('unselect')
    z = if y then 'visible' else 'hidden'
   ...