/* script-transition.js */

/* see also  http://bl.ocks.org/weiglemc/6185069
   and
   http://bl.ocks.org/WilliamQLiu/bd12f73d0b79d70bfbae
    (for animation)

    on click, transition a bunch of points from their current
    location to somewhere else. change color during transition.
    use easeElastic to make it look fun

    ds: 2017-04-22
*/

// geometry of inner svg plotting area
var margin = {
    top: 40,
    right: 20,
    bottom: 30,
    left: 40
};
var width = 400 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

// details about the data
var dataFileName = "correlated-data.csv"
var varNames = {
    "xData": "V1",
    "xLabelText": "x data",
    "yData": "V2",
    "yLabelText": "y data"
};

// setup x
var xValue = function(d) {
        return d[varNames.xData];
    }, // data -> value
    xScale = d3.scaleLinear().range([0, width]), // value -> display
    xMap = function(d) {
        return xScale(xValue(d));
    }, // data -> display
    xAxis = d3.axisBottom(xScale).ticks(4);

// setup y
var yValue = function(d) {
        return d[varNames.yData];
    }, // data -> value
    yScale = d3.scaleLinear().range([height, 0]), // value -> display
    yMap = function(d) {
        return yScale(yValue(d));
    }, // data -> display
    yAxis = d3.axisLeft(yScale).ticks(4);

var scatterSize = 3.5;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function setupData() {
    d3.csv(dataFileName, type, function(error, data) {
        console.log("loading data from csv")

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text(varNames.yLabelText);

        svg.append("g").selectAll(".circle")
            .data(data)
            .enter().append("circle")
            .attr("transform", "translate(" + margin.left + ", 0)")
            .attr("cx", xMap)
            .attr("cy", yMap)
            .attr("r", scatterSize);

    });
}

// type conversion - helper
function type(d) {
    // numeric data
    d[varNames.xData] = +d[varNames.xData];
    d[varNames.yData] = +d[varNames.yData];

    // console.log("xdata\n" + d[varNames.xData]);
    return d;
}

// call the setup.
setupData();

// button onclick functions (index.html)
function update_data() {
    animateData();
}

// On click, update with new data
function animateData() {

    var numValues = d3.selectAll('circle').data().length;
    // Get original dataset's length
    var maxRange = Math.random() * 1000; // Get max range of new values
    dataset = []; // Initialize empty array
    for (var i = 0; i < numValues; i++) {
        var newNumber1 = Math.random() * 1.0; // Random # for x
        var newNumber2 = Math.random() * 1.0; // Random # for y
        dataset.push([newNumber1, newNumber2]); // Add new numbers to array */
    }

    // Update circles
    svg.selectAll("circle")
        .data(dataset) // Update with new data
        .transition()
        .duration(1000)
        .attr("fill", "red") // Change color
        .attr("r", scatterSize * 1.3) // Change size
        .ease(d3.easeBounce)
        .attr("cx", function(d) {
            return xScale(d[0]); // Circle's X
        })
        .attr("cy", function(d) {
            return yScale(d[1]); // Circle's Y
        })
        .on("end", function() {
            d3.select(this)
                .attr("fill", "black")
                .attr("r", scatterSize);
        });

}