                 .attr('y', 0)
 
         # datasets
-        @root.append('g')
+        @svg.append('g')
             .attr('class', 'datasets')
             .attr('width', @options.width)
             .attr('height', @options.height)
             .attr('transform', "translate(0, #{options.height - 18})")
 
         @drawDataset = (dataset) =>
-            @root.select('g.datasets')
+            @svg.select('g.datasets')
                 .append('g')
                     .attr('class', 'dataset')
                     .attr('id', "dataset-#{dataset.id}")
-            el = @root.select("g.datasets #dataset-#{dataset.id}")
+            el = @svg.select("g.datasets #dataset-#{dataset.id}")
             @options.datasetIndex = 0 unless @options.datasetIndex?
 
             @data[dataset.id] = {

                .tickFormat(customFormats)
                .tickSize(@options.height - 13)

        @root.append('g')
            .attr('class', 'axis')
            .call(@axis.x)


        @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))
