             )
             .extent([@options.brush.start, @options.brush.end])
 
-        @root.append('g')
+        @svg.append('g')
             .attr('class', 'brush')
             .call(@brush)
             .selectAll('rect')

            .x(@scales.x)
            .scaleExtent([1, Infinity])
            .on('zoom', zoom)
        @root.call(@options.zoom)

    # Function pair to allow for easy hiding and showing the time slider
    hide: ->

        @debug = true

        # create the root svg element
        @svg = d3.select(element).append('svg').attr('class', 'timeslider')

        # default options and other variables for later
        @options.width  = @svg[0][0].clientWidth
        @options.height = @svg[0][0].clientHeight
        @options.brush ||= {}
        @options.brush.start || = @options.start
        @options.brush.end ||= new Date(new Date(@options.brush.start).setDate(@options.brush.start.getDate() + 3))
