 
 
   _rankHistory: ->
+    margins =
+      top: 20
+      right: 20
+      bottom: 20
+      left: 100
+
+    measure = (area) =>
+      chartAreaDims = @refs.chartArea.getBoundingClientRect()
+
+      width: chartAreaDims.width - (margins.left + margins.right)
+      height: chartAreaDims.height - (margins.top + margins.bottom)
+
+    dimensions = measure()
+
+    width = dimensions.width
+    height = dimensions.height
+
     rawData = @props.rankHistories.data.filter (rank) -> rank > 0
 
     startDate = moment().subtract(rawData.length, 'days')

      # rank must be drawn inverted.
      rank: -rank

    chartArea = @refs.chartArea

    chartAreaDims = chartArea.getBoundingClientRect()

    margin =
      top: 20
      right: 20
      bottom: 20
      left: 100

    width = chartAreaDims.width - (margin.left + margin.right)
    height = chartAreaDims.height - (margin.top + margin.bottom)

    x = d3.time.scale()
      .range [0, width]

    y = d3.scale.linear()
      .range [height, 0]

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

    yAxis = d3.svg.axis()

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

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

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