D3Kit Baseball Chart

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>
<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="//rawgit.com/ramnathv/15264a8943b44f663e9f/raw/0d5a5f43311a2dbb2159a62de296d034dc586f99/baseball.js"></script>
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<div class="container-fluid">
    <div class="col-xs-12">
        <div class="panel panel-default">
          <div class="panel-heading">
              <b>Baseball</b> 
          </div>
          <div class="panel-body">
            <div id="chart"></div>
          </div>
        </div>
        
    </div>
</div>

CSS

path.line1,
path.line2 {
  fill: none;
  stroke: red;
  pointer-events: none;
}
path.line2{
  stroke: gray;
}
path.area1{
  opacity: 0.05;
  pointer-events: none;
}
.container-fluid{
  margin-top: 20px;
}
.d3-tip{
  font-weight: normal;
  line-height: 1.2em;
}
.d3-tip.n:after{
  padding-top: 0px;
}
.y-axis-layer line{
  fill: none;
  stroke: #ccc;
}
.x-axis-layer text, .y-axis-layer text{
  font-size: 10px;
  fill: #aaa;
}
.x-axis-layer line{
  stroke: #ccc;
  shape-rendering: crispEdges;
}
.x-axis-layer path{
  stroke: #ccc;
}
.y-axis-layer path {
  fill: none;
}

CoffeeScript

plotLine = (sel, data, S, A, cl) ->
  lineFn = d3.svg.line()
    .x((d) -> S.x A.x(d))
    .y((d) -> S.y A.y(d))
  line = sel.selectAll("." + cl).data(data)
  line.enter().append("path." + cl)
  line.attr("d", lineFn)
    
plotBand = (sel, data, S, A, cl) ->
  areaFn = d3.svg.area()
    .x((d) -> S.x A.x(d))
    .y0((d) -> S.y A.y0(d))
    .y1((d) -> S.y A.y1(d))
  area = sel.selectAll("." + cl).data(data)
  area.enter().append("path." + cl)
  area.attr("d", areaFn)
 
plotCircle = (sel, data, S, A, cl) ->
  pointFn =    
    cx: (d) -> S.x A.x(d)
    cy: (d) -> S.y A.y(d)
    r: 3
  points = sel.selectAll("." + cl).data(data)
  points.enter().append("circle." + cl)
  points.attr pointFn
  points.call attachTooltip, {html: d3.table}
  points
    

myChart = d3Kit.factory.createChart(
  {
   margin: {top: 10, bottom: 30, left: 20, right: 20},
   initialHeight: 250,
   initialWidth: 600
  },
  ['click'],
  (skeleton) ->
    S = 
      x: d3.scale.linear()
      y: d3.scale.linear()
    A =
      x: (d) -> d.season
      y: (d) -> d.average
      y0: (d) -> d.low
      y1: (d) -> d.high
    layers = skeleton.getLayerOrganizer()
    layers.create(['y-axis', 'points', 'line1', 'line2', 'area1', 'x-axis'])
    visualize = ->
      data = skeleton.data()
      S.x
       .range([0, skeleton.getInnerWidth()])
       .domain d3.extent(data, A.x)
      S.y
       .range([skeleton.getInnerHeight(), 0])
       .domain [5, d3.max(data, A.y1)]
        
      yAxisFn = d3.svg.axis()
       .orient("left")
       .scale(S.y)
       .ticks(5)
       .tickSize(-S.x.range()[1])
      layers.get("y-axis").call(yAxisFn)
      
      points = layers.get('points')
      plotCircle(points, data, S, A, 'circle')
        
      line1 = layers.get('line1')
      plotLine(line1, [data], S, A, 'line1')
      #line1.call(plotLine, S, A, 'line1')
      
      A2 = 
        x: (d) -> d.season
        y: (d) -> d.tigers
      line2 = layers.get('line2')
      plotLine(line2, [data], S, A2,...