       .y (d) => y d.rank
       .interpolate 'monotone'
 
-    topSvg = d3.select(chartArea).append('svg')
+    topSvg = d3.select(@refs.chartArea).append('svg')
 
     xAxisLine = topSvg.append 'defs'
       .append 'linearGradient'

      .attr 'stop-color', '#ccc'

    svg = topSvg
      .attr 'width', width + (margin.left + margin.right)
      .attr 'height', height + (margin.top + margin.bottom )
      .append 'g'
      .attr 'transform', "translate(#{margin.left}, #{margin.top})"

    x.domain d3.extent(chartData, (d) => d.date)
    y.domain d3.extent(chartData, (d) => d.rank)

    svg.append 'g'
      .attr 'class', 'chart__axis chart__axis--x'

      # rank must be drawn inverted.
      rank: -rank

    x = d3.time.scale()
      .range [0, width]
      .domain d3.extent(chartData, (d) => d.date)

    y = d3.scale.linear()
      .range [height, 0]
      .domain d3.extent(chartData, (d) => d.rank)

    xAxis = d3.svg.axis()
      .scale x
      .ticks 15
      .innerTickSize -height
      .outerTickSize 0
      .tickPadding 5
      .tickFormat (d) =>
        d3.time.format('%b-%-d') d
      .orient 'bottom'

    yAxis = d3.svg.axis()
