         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)")
+            # update axis & grids
+
+
+            # repaint the datasets
+            for dataset of @data
+                @updateDataset(dataset)
 
             # 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))
 

                ranges: []
            }

            updateDataset(dataset)

        updateDataset = (dataset) =>
            el = @root.select("g.datasets #dataset-#{dataset.id}")
            d = @data[dataset.id]

            # update data
            for data in d.callback()
                if(data.length > 1)
                    @data[dataset.id].ranges.push data
                else
                    @data[dataset.id].points.push data[0]

            lineFunction = d3.svg.line()
                .x( (d) => @scales.x(d) )
                .y( 5 * index )
                .interpolate('linear')

            # ranges
            r = el.selectAll('path')
                .data(d.ranges)


            r.exit().remove()

            # points
            el.selectAll('circle').remove()
            p = el.selectAll('circle')
                .data(d.points)
                .remove()

            p.enter().append('circle')
                    .attr('cx', (d) => @scales.x(d))
