       .attr 'stop-color', '#ccc'
 
     svg = topSvg
-      .attr 'width', width + (margin.left + margin.right)
-      .attr 'height', height + (margin.top + margin.bottom )
+      .attr 'width', width + (margins.left + margins.right)
+      .attr 'height', height + (margins.top + margins.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)
+      .attr 'transform', "translate(#{margins.left}, #{margins.top})"
 
     svg.append 'g'
       .attr 'class', 'chart__axis chart__axis--x'



  _rankHistory: ->
    rawData = @props.rankHistories.data.filter (rank) -> rank > 0

    startDate = moment().subtract(rawData.length, 'days')

      # 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()
