Reusable Bumpchart

by ramnathv

HTML

<script src="//rawgit.com/ramnathv/9a84e7c70d2998aac784/raw/34e80c398a8b53cf297c03052eb161d8f609168b/soccerData.js"></script>
<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>
<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">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.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 class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="../">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="navbar-brand" href="./">Lap Chart</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="https://keen.io">Home</a></li>
          <li><a href="https://keen.io/team">Team</a></li>
        </ul>
      </div>
    </div>
  </div>
<div class="container-fluid">
  <div class="row">
      <div id="bumpchart"></div>
  </div>
</div>

CSS

.line {
  fill: none;
  stroke-opacity: 0.5;
}
.line-hover{
  stroke-opacity: 1;
  stroke-width: 3px;
}
.polygons-layer path{
  fill: none;
  pointer-events: all;
}
.focus-layer{
  pointer-events: none;
}
.line-layer {
  pointer-events: none;
}
.y-axis-layer line,
.y-axis-layer path{
   fill: none;
}
.y-axis2-layer line,
.y-axis2-layer path{
   fill: none;
}
.y-axis-layer text{
  font-size: 10px;
  pointer-events: all;
}
.y-axis2-layer text{
  font-size: 10px;
  pointer-events: all;
}
.y-axis-layer text:hover{
  
}
div.popover{
  pointer-events: none;
}

CoffeeScript

d3.select("body")
  .classed("application", true)
palette = ["#013ADF", "#0099FF", "#B80000", "red", "midnightblue",
    "red",  "#B80000", "black", "crimson", "darkmagenta",
    "blue", "maroon", "navy", "blue", "black",
    "#F80000", "maroon", "orange", "maroon", "dodgerblue"
]

d3.uniq = (data, fun) ->
  if typeof fun is 'function'
    v = data.map(fun)
  else
    v = data.map (d) -> d[fun]
  d3.set(v).values()
    
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);


voronoiLayer = (sel, data, S, A, O) ->
  mouseover = (d) ->
    #console.log(d)
    cl = ".line-#{d.team.split(' ').join('_')}"
    d3.select(cl).classed("line-hover", true)
    x_ = S.x(A.x(d))
    y_ = S.y(A.y(d))
    O.focus.attr
      transform: "translate(#{x_},#{y_})"
    el = O.focus.select("circle")
    x = d.team
    $(el).popover
      placement: 'auto top'
      container: '#bumpchart'
      trigger: 'manual'
      html: true
      content: d.team
    $(el).popover('show')
    #O.focus.select("text").text(A.y(d));
 
  mouseout = (d) ->
    cl = ".line-#{d.team.split(' ').join('_')}"
    d3.select(cl).classed("line-hover", false)
    #d3.select(".popover").selectAll("*").remove()
    $(".popover").each ->
      $(@).remove()
    O.focus.attr
      transform: "translate(-100, -100)"
    
  
  voronoi = d3.geom.voronoi()
    .x((d) -> S.x A.x(d))
    .y((d) -> S.y A.y(d))
    .clipExtent([[0, 0], [O.W, O.H]])
        
  polygons = sel.selectAll("path.voronoi")
    .data(voronoi(data))
  polygons.enter().append("path.voronoi")
  polygons
    .attr
      d: (d, i) -> "M" + d.join("L") + "Z"
    .datum((d) -> d.point)
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
  


addFocus = (sel) ->
    focus = sel
   ...