 
   drawLine: =>
     @svgLine
-      .transition()
+      .attr 'stroke-dasharray', 0
       .attr 'd', @line
 
-  resize: =>
+  reveal: =>
+    @recalc()
+
+    @svgLine
+      .attr 'd', @line
+
+    totalLength = @svgLine.node().getTotalLength()
+
+    @svgLine
+      .attr 'stroke-dasharray', totalLength
+      .attr 'stroke-dashoffset', totalLength
+      .transition()
+        .delay 500
+        .duration 1000
+        .ease d3.easeSinOut
+        .attr 'stroke-dashoffset', 0
+        .attr 'opacity', 1
+
+    @svgEndCircle
+      .transition()
+        .delay 1400
+        .duration 300
+        .ease d3.easeSinOut
+        .attr 'opacity', 1
+
+
+  recalc: =>
     @setDimensions()
 
     @setScalesRange()

      .y (d) => @options.scales.y d.y

    @svgEndCircle
      .transition()
      .attr 'transform', "translate(#{@options.scales.x(@data[@data.length-1].x)}, #{@options.scales.y(@data[@data.length-1].y)})"


  setSvgSize: =>
    @svg

    _.forEach(JSON.parse($("#json-stats").text()), (e, i) -> data.push(new Object({'x': i, 'y': e.users_osu})))

    @svgEndCircle = @svgWrapper.append 'circle'
      .classed 'chart__hover-mark chart__hover-mark--small chart__end-circle', true
      .attr 'r', 2
      .attr 'opacity', 0

    @loadData data

