Autocorrelation Function Plot

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/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.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">
<div id="chart">
  <svg></svg>
</div>

CSS

.line{
  stroke-width: 3px;
  stroke: steelblue;
}

#chart{
  margin-top: 20px;
}
.axis path,
.axis line{
  fill: none;
  stroke: #aaa;
}
.axis text{
   fill: #aaa;
   font-family: "Helvetica";
   font-size: 10px;
}

CoffeeScript

width = 400; height = 200
S = 
  x: d3.scale.linear().range([0, width])
  y: d3.scale.linear().range([height, 0])

data2 = [
 [{x: 1, y1: 10, y2: 20}],
 [{x: 2, y1: 10, y2: 40}],
 [{x: 3, y1: -5, y2: 10}]
]

data2 = [{"x":1,"y1":0,"y2":0.1853},{"x":2,"y1":-0.141,"y2":0},{"x":3,"y1":0,"y2":0.0411},{"x":4,"y1":0,"y2":0.2335},{"x":5,"y1":0,"y2":0.032},{"x":6,"y1":-0.2861,"y2":0},{"x":7,"y1":0,"y2":0.043},{"x":8,"y1":0,"y2":0.203},{"x":9,"y1":0,"y2":0.0128},{"x":10,"y1":-0.1467,"y2":0},{"x":11,"y1":0,"y2":0.1514},{"x":12,"y1":0,"y2":0.8},{"x":13,"y1":0,"y2":0.1368},{"x":14,"y1":-0.1588,"y2":0},{"x":15,"y1":0,"y2":0.0101},{"x":16,"y1":0,"y2":0.173},{"x":17,"y1":0,"y2":0.0039},{"x":18,"y1":-0.2953,"y2":0},{"x":19,"y1":-0.0009,"y2":0},{"x":20,"y1":0,"y2":0.1584},{"x":21,"y1":-0.0151,"y2":0},{"x":22,"y1":-0.1503,"y2":0},{"x":23,"y1":0,"y2":0.1358},{"x":24,"y1":0,"y2":0.7027}] 

data = data2.map (d) ->
  [
   {x: d.x, y: d.y1}, 
   {x: d.x, y: d.y2}
  ]
         
console.log data

S.x.domain [0, 30]
S.y.domain [-0.3, 1]

lineFn = d3.svg.line()
  .x((d, i) -> S.x(d.x))
  .y((d) -> S.y(d.y))

svg = d3.select("svg")
  .attr('width', width + 40 + 30)
  .attr('height', height + 40 + 30)
  .append("g").attr
    "transform": "translate(40, 40)"
    
xAxis = d3.svg.axis()
  .scale(S.x)
  .orient('bottom')

xAxPos = S.y.range()[0]
svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', "translate(0, #{xAxPos})")
  .call(xAxis)
  
yAxis = d3.svg.axis()
  .scale(S.y)
  .orient('left')
  .ticks(5)

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis)


line = svg.selectAll(".line").data(data)
line.enter().append("path.line")
line.attr("d", lineFn)

drawHline = (sel, S, y) ->
  sel.append("line.hline").attr
    x1: S.x.range()[0]
    x2: S.x.range()[1]
    y1: S.y(y)
    y2: S.y(y)

d3u = d3u || {}    
d3u.hline = ->
  defaults =
    "stroke-width": 1
    stroke: "steelblue"
    "stroke-dasharray": "5,2"
  opts = extend(defaults, arguments[0])
  exports = (selection) ->
 ...