    /* implementation heavily influenced by http://bl.ocks.org/1166403 */

    // define dimensions of graph
    var margin = {
        top: 80,
        right: 80,
        bottom: 80,
        left: 80
    }; // margins
    var width = 1000 - margin[left] - margin[right]; // width
    var height = 400 - margin[top] - margin[bottom]; // height

    // create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
    var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];

    // X scale will fit all values from data[] within pixels 0-w
    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
    // Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
    var y = d3.scale.linear().domain([0, 10]).range([h, 0]);
    // automatically determining max range can work something like this
    // var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

    // create a line function that can convert data[] into x and y points
    var line = d3.svg.line()
        // assign the X function to plot our line as we wish
        .x(function(d, i) {
            // verbose logging to show what's actually being done
            console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
            // return the X coordinate where we want to plot this datapoint
            return x(i);
        })
        .y(function(d) {
            // verbose logging to show what's actually being done
            console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
            // return the Y coordinate where we want to plot this datapoint
            return y(d);
        })

    // Add an SVG element with the desired dimensions and margin.
    var graph = d3.select("#graph").append("svg:svg")
        .attr("width", w + margin[1] + margin[3])
        .attr("height", h + margin[0] + margin[2])
        .append("svg:g")
        .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");

    // create yAxis
    var xAxis = d3.svg.axis().scale(x).tickSubdivide(false).orient("bottom");
    // Add the x-axis.
    graph.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis);


    // create left yAxis
    var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
    // Add the y-axis to the left
    graph.append("svg:g")
        .attr("class", "y axis")
        .attr("transform", "translate(0,0)")
        .call(yAxisLeft);

    // Add the line by appending an svg:path element with the data line we created above
    // do this AFTER the axes above so that the line is above the tick-lines
    graph.append("svg:path").attr("d", line(data));


    function generateInitChartData() {
        var currTime = new Date();
        var startTime = new Date();
        startTime.setTime(currTime.getTime() - 180000);
        var initDataArray = [];

        for (var i = 0; i < 50; i++) {
            var dataPointDate = new Date(startTime);
            dataPointDate.setTime(dataPointDate.getTime() + (i * 1000));
            var dataPoint = {};
            dataPoint.total = 0;
            dataPoint.compression = 0;
            dataPoint.throughput = null;
            dataPoint.timeInMills = dataPointDate.getTime();
            initDataArray.push(dataPoint);
        }
        return initDataArray;
    }
