//=======================================================//
// Par Jeremy FOUQUAT                                    //
// Source : https://bl.ocks.org/mbostock/3808218         //
//=======================================================//

var svg = d3.select('svg')
    .append('rect')
        .attr("width", "50px")
        .attr("height", "50px")
        .attr("x", 0)
        .attr("y", 0)
        .attr("style", "fill:red;")
        .on("touchstart", animate)
        .on("click", animate)
        .on("load", animate);



function animate() {

    var stroke = d3.selectAll("rect");

    // Then schedule the new transition.
    stroke.transition()
            .duration(0)
            .attr("x", 0)
            .attr("y", 0)
            //.attr("transform", "translate(" + 0 + "," + 0 + ")" )
        .transition()
            .duration(1000)
            .attr("x", 0)
            .attr("y", 450)
            //.attr("transform", "translate(" + 0 + "," + 450 + ")" )
        .transition()
            .duration(1000)
            .attr("x", 450)
            .attr("y", 450)
            //.attr("transform", "translate(" + 450 + "," + 450 + ")" )
        .transition()
            .duration(1000)
            .attr("x", 450)
            .attr("y", 0)
            //.attr("transform", "translate(" + 450 + "," + 0 + ")" )
        .transition()
            .duration(1000)
            .attr("x", 0)
            .attr("y", 0)
            //.attr("transform", "translate(" + 0 + "," + 0 + ")" );

}
