function Scatterplot(data,    // object { x, y }
                     w = 640, // width
                     h = 480, // height
                     p = 50,  // padding
                     t = 5,   // ticks
                     r = 4)
{
    // public methods
    this.draw = function()
    {
        if (svg == null)
        {
            // create svg element
            svg = d3.select('body')
                .append('svg')
                .attr('width', width)
                .attr('height', height);

            // create circles
            marks = svg.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', radius);

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

            // create y axis
            svg.append('g')
                .attr('class', 'axis y-axis')
                .attr('transform', 'translate(' + padding + ',0)')
                .call(yAxis);
        }
    }

    this.recolor = function()
    {
        if (marks != null)
        {
            marks.style('fill', function(d) { return d.color; });
        }
    }

    // readData: returns text from data by reading implementation-specific 
    // text variables
    this.makeHoverLabels = function(readData)
    {
        if (hoverLabels == null)
        {
            hoverLabels = svg.selectAll('.hover-label')
                .data(dataset)
                .enter()
                .append('text')
                .attr('class', 'hover-label')
                .attr('transform', function(d, i) {
                    return 'translate(' + (xScale(d.x) - 55) + ',' + 
                           (yScale(d.y) - 10) + ')';
                });

            marks.on('mouseover', function(d, i) {
                hoverLabels.each(function(d, j) {
                    if (i == j)
                    {
                        d3.select(this)
                            .text(function(d, i) {
                                return readData(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 (svg != null)
        {
            svg.select('.x-axis')
                .append('text')
                .attr('x', width * 0.80 / 2 )
                .attr('y', -5)
                .text(horizontal);

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

    this.drawLegend = function(marks, width, height, padding)
    {
        if (legend == null)
        {
            var group = svg.append('g')
                .attr('transform', 'translate(100, 50)')
            legend = new Legend(group, width, height, padding);
            legend.draw(marks);
        }
    }

    // private variables
    var that = this;

    var dataset = data;

    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(t);

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

    var svg = null;
    var marks = null;
    var hoverLabels = null;

    var legend = null;
}