         @scales =
             x: d3.time.scale.utc()
                 .domain([ @options.start, @options.end ])
-                .range([0, @options.numberOfDays * @options.pixelPerDay])
+                .range([0, @options.width])
             y: d3.scale.linear()
                 .range([ 0, @options.height ])
 

        zoom = =>
            console.log "Scale #{d3.event.scale}, Translate #{d3.event.translate}"

            d3.select(@element).selectAll('path')
                .attr('transform', "translate(#{d3.event.translate[0]}, 0)scale(#{d3.event.scale}, 1)")
            d3.select(@element).selectAll('circle')
                .attr('transform', "translate(#{d3.event.translate[0] * d3.event.scale}, 0)")

            # repaint the scales and the axis
            d3.select(@element).select('g.axis').call(@axis.x)
            d3.select(@element).select('g.grid').call(@grid.x)
            d3.select(@element).select('g.brush').call(@brush)


        @root.call(d3.behavior.zoom().x(@scales.x).on('zoom', zoom))



            # repaint the axis, scales and the brush
            d3.select(@element).select('g.axis').call(@axis.x)
            d3.select(@element).select('g.brush').call(@brush)

        d3.select(window).on('resize', resize)
