Horizon.js

Horizon Chart

HTML

<div id="test"></div>

CSS

#horizon-bands {
  float: right;
}

JavaScript

/* D3.Horizon.js Plugin        */
/* Ignore this plugin code     */
/* Scroll down to ~ line 10   */
!function(){function t(t){return t[0]}function n(t){return t[1]}function r(t,n,r){return"offset"==r?function(r){return"translate(0,"+(r+(0>r)-t)*n+")"}:function(r){return(0>r?"scale(1,-1)":"")+"translate(0,"+(r-t)*n+")"}}d3.horizon=function(){function i(t){t.each(function(t){var n,i,_,p=d3.select(this),m=1/0,y=-1/0,v=-1/0,x=t.map(function(t,n){var r=o.call(this,t,n),e=s.call(this,t,n);return m>r&&(m=r),r>y&&(y=r),-e>v&&(v=-e),e>v&&(v=e),[r,e]}),b=d3.scale.linear().domain([m,y]).range([0,d]),w=d3.scale.linear().domain([0,v]).range([0,h*u]),z=r(u,h,c);this.__chart__?(n=this.__chart__.x,i=this.__chart__.y,t0=this.__chart__.t,_=this.__chart__.id):(n=b.copy(),i=w.copy(),t0=z,_=++a);var A=p.selectAll("defs").data([null]);A.enter().append("defs").append("clipPath").attr("id","d3_horizon_clip"+_).append("rect").attr("width",d).attr("height",h),A.select("rect").transition().duration(f).attr("width",d).attr("height",h),p.selectAll("g").data([null]).enter().append("g").attr("clip-path","url(#d3_horizon_clip"+_+")");var N=p.select("g").selectAll("path").data(d3.range(-1,-u-1,-1).concat(d3.range(1,u+1)),Number),P=e.interpolate(l).x(function(t){return n(t[0])}).y0(h*u).y1(function(t){return h*u-i(t[1])})(x),j=e.x(function(t){return b(t[0])}).y1(function(t){return h*u-w(t[1])})(x);N.enter().append("path").style("fill",g).attr("transform",t0).attr("d",P),N.transition().duration(f).style("fill",g).attr("transform",z).attr("d",j),N.exit().transition().duration(f).attr("transform",z).attr("d",j).remove(),this.__chart__={x:b,y:w,t:z,id:_}}),d3.timer.flush()}var u=1,c="offset",l="linear",o=t,s=n,d=960,h=40,f=0,g=d3.scale.linear().domain([-1,0,0,1]).range(["#08519c","#bdd7e7","#bae4b3","#006d2c"]);return i.duration=function(t){return arguments.length?(f=+t,i):f},i.bands=function(t){return arguments.length?(u=+t,g.domain([-u,0,0,u]),i):u},i.mode=function(t){return...