Lines

by Igor Cuckovic

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<svg id="vis"></svg>
<button id="btnHor">one</button>
<button id="btnVer">two</button>

CSS

svg line {
    stroke: black;
}

JavaScript

var TRANSDURATION = 5000;
var HEIGHT = 100;
var values = d3.range(10, 100, 10);



var svg = d3.select('svg#vis').attr('height', HEIGHT);


var shuffle = function (v) {
    for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};


$("#btnHor").click(
    function () {
        one();
        values = shuffle(values);
});

$("#btnVer").click(
    function () {
       two();
}
);
var one = function () {
    $("#btnVer").attr("disabled", "disabled");
    setTimeout(function () {$("#btnVer").attr("disabled", null)}, 1000);
    var linesData = svg.selectAll('line')
        .data(values);

    var linesEnter = linesData.enter()
        .append('line')
        .attr('x1', 0)
        .attr('x2', 0);

    svg.selectAll('line')
        .attr('y1', HEIGHT);

    var lineTransition = svg.selectAll('line')
        .transition()
        .attr('y2', function (d) {
        return HEIGHT - d;
    });

    // HORIZONTAL POSITION - SHOULD BE ANIMATED
    lineTransition.transition()
        .duration(1000)
    // 'x1' and 'x2' are the only values that 
    // need to be animated in this function
    .attr('x1', function (d) {
        return d;
    })
        .attr('x2', function (d) {
        return d;
    });
    
    

}

var two = function () {
    // this is where the only transition concerning HEIGHT is supposed to take place
    svg.selectAll('line')
        .transition()
        .ease('circle-out')
        .duration(2000)
        .attr('y2', function (d) {
        return d - Math.random() * 30;
    });
}