 
     @sort_timestamp_asc = (a,b) => a.timestamp - b.timestamp
 
-    @svg = d3.select(@$el.selector)
+    @svg = [(d3.select(@$el.selector)
       .append("svg").attr
-        class: "timeline_chart_svg"
+        class: "timeline_chart_left"
         width: @width
-        height: @height
+        height: @height),
+    (d3.select(@$el.selector)
+      .append("svg").attr
+        class: "timeline_chart_right"
+        width: @width
+        height: @height),
+    (d3.select(@$el.selector)
+      .append("svg").attr
+        class: "timeline_chart"
+        width: @width
+        height: @height)]
 
     @render = (commits, filter_text="") =>
       if not @filter_text? or (not @filter_text is filter_text) or not @filtered_commits

          .append("path")
          .attr
            d: @area
            class: (d, i) -> if i is 0 then "additions" else "deletions"
            id: elm_id
        a.exit()
          .remove()


        @y.domain [0, t]
        @rx.range [0 , @filtered_commits.length]
        @ry.range [0 , t]
      for i in [0..2]
        a = @svg[i].selectAll(".area").data(@layer @filtered_commits)
        a.transition()
          .duration(1000)
          .ease("elastic-in-out")
