function Scatterplot(g, // <g></g>
                     d, // object { x, y }
                     w, // width
                     h, // height
                     p, // padding
                     t, // ticks
                     r) // radius
{
    w = w || 640;
    h = h || 480;
    p = p || 50;
    t = t || 5;
    r = r || 4;

    // public
    this.draw = function()
    {
        // create the marks
        if (marks == null)
        {
            // create circles
            marks = group.selectAll('circle')
                .data(dataset)
                .enter()
                .append('circle')
                .attr('cx', function(d) {
                    return xScale(d.x);
                })
                .attr('cy', function(d) {
                    return yScale(d.y);
                })
                .attr('r', function(d) {
                    return d.radius || radius;
                })
                .style('fill', function(d) { return d.color; });

            // create x axis
            group.append('g')
                .attr('class', 'axis x-axis')
                .attr('transform', 'translate(0,' + (height - padding) + ')')
                .call(xAxis);

            // create y axis
            group.append('g')
                .attr('class', 'axis y-axis')
                .attr('transform', 'translate(' + padding + ',0)')
                .call(yAxis);
        }
        else
        {
            // update the marks
            marks.style('fill', function(d) { return d.color; })
                .attr('r', function(d) {
                    return d.radius || radius;
                });

            marks.sort(function(a, b) {
                if (a.layer != null && b.layer != null)
                {
                    return a.layer - b.layer;
                }
                return 0;
            });
        }
    };

    // read: returns text after reading the data
    this.makeHoverLabels = function(read)
    {
        if (hoverLabels == null)
        {
            hoverLabels = group.selectAll('.hover-label')
                .data(dataset)
                .enter()
                .append('text')
                .attr('class', 'hover-label')
                .attr('transform', function(d) {
                    return 'translate(' + (xScale(d.x) - 55) + ',' + 
                           (yScale(d.y) - 13) + ')';
                });

            marks.on('mouseover', function(d, i) {
                hoverLabels.each(function(d, j) {
                    if (i == j)
                    {
                        d3.select(this)
                            .text(function(d, i) {
                                return read(d, i);
                            });
                    }
                })
            })
            .on('mouseout', function(d, i) {
                hoverLabels.each(function(d, j) {
                    if (i == j)
                    {
                        d3.select(this).text('');
                    }
                })
            });
        }
    };

    this.drawAxisLabels = function(vertical, horizontal)
    {
        if (group != null)
        {
            group.select('.x-axis')
                .append('text')
                .attr('x', width * 0.80 / 2 )
                .attr('y', -5)
                .text(horizontal);

            group.select('.y-axis')
                .append('text')
                .attr('transform', 'rotate(-90)')
                .attr('x', -height * 1.10 / 2)
                .attr('y', 10)
                .text(vertical);
        }
    };

    // Invokes callback on each mark.
    this.each = function(callback)
    {
        if (marks != null)
        {
            marks.each(callback);
        }
    };

    // private
    var group = g;
    var dataset = d;
    var width = w;
    var height = h;
    var padding = p;
    var radius = r;
    var ticks = t;
    
    var xScale = d3.scale.linear()
        .domain([ d3.min(dataset, function(d) { return d.x }) - 50,
                  d3.max(dataset, function(d) { return d.x }) + 50])
        .range([ padding, width - padding * 2]); 

    var yScale = d3.scale.linear()
        .domain([ d3.min(dataset, function(d) { return d.y }) - 50,
                  d3.max(dataset, function(d) { return d.y }) + 50])
        .range([ height - padding, padding ]);

    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom')
        .ticks(ticks);

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left')
        .ticks(ticks);

    var marks = null;
    var hoverLabels = null;
}