                 .ticks(d3.time.days.utc, 3)
                 #.tickFormat(d3.time.format("%Y-%m-%d"))
 
-        # grid
+        @root.append('g')
+            .attr('class', 'axis')
+            # TODO compute the 20px translation
+            .attr('transform', "translate(0, #{@options.height - 20})")
+            .call(@axis.x)
+
+       # grid
         @grid = 
             x: d3.svg.axis()
                 .scale(@scales.x)

            @brush.x(@scales.x).extent(@brush.extent())

            # repaint the scales and axis
            draw()

            if @debug
                console.log("Done zooming, took #{new Date().getTime() - time.start.getTime()} milliseconds.")

                # TODO compute the 20px translation
                .tickSize(-@options.height+20, 0, 0)

        @root.append('g')
            .attr('class', 'grid')
            .attr('width', @options.width)
            # TODO compute the 20px translation
            .attr('transform', "translate(0, #{@options.height - 20})")
            .call(@grid.x)

        # brush
        element.dispatch = d3.dispatch('brushStart', 'brushEnd')
        @brush = d3.svg.brush()
            .x(@scales.x)
            .on('brushstart', => element.dispatch.brushStart(@brush.extent()))
            .on('brushend', => element.dispatch.brushEnd(@brush.extent()))
            .extent([@options.brush.start, @options.brush.end])

        @root.append('g')
            .attr('class', 'brush')
            .call(@brush)
            .selectAll('rect')
                # TODO remove hardcoded height
                .attr('height', "#{@options.height - 20 - 2}px")
                .attr('y', 0)

        # dragging
        drag = =>
