Bar Chart recreated

by Igor Cuckovic

HTML

<div id="chart" style="width:500px;height:250px">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="200"></svg>
    <div id="title">Movement</div>
    <button class="btn btn-mini" id="button">Transition</button>
</div>

CSS

body {
    margin: 0px;
}
svg {
    //border: solid 1px #666;
    overflow: hidden;
}
path {
    fill: yellow;
    stroke: #000;
    stroke-width: .5px;
}
circle {
    fill: #ccc;
    stroke: #000;
    pointer-events: none;
}
#button {
    position: absolute;
    top: 10px;
    left: 400px;
}
#title {
    position: absolute;
    top: 12px;
    left: 0px;
    width: 500px;
    text-align: center;
}
.btn {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    *margin-left:...

JavaScript

var svg = d3.select("svg");

var data = [100, 150, 130, 170];

var hScale = d3.scale.linear()
    .domain([0, 170])
    .range([0, 130]);

// title    
d3.select("#title").html("Bar chart (animated)!");

// vertical lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("x1", function (d) {
    return d * 20;
})
    .attr("x2", function (d) {
    return d * 20;
})
    .attr("y1", function (d) {
    return 40;
})
    .attr("y2", function (d) {
    return 250;
})
    .style("stroke", "#eee");

// horizontal lines
svg.selectAll(".vline").data(d3.range(2, 13)).enter()
    .append("line")
    .attr("y1", function (d) {
    return d * 20;
})
    .attr("y2", function (d) {
    return d * 20;
})
    .attr("x1", function (d) {
    return 0;
})
    .attr("x2", function (d) {
    return 500;
})
    .style("stroke", "#eee");

// button             
var button = d3.select("#button");

var mode = 0;
var modes = [{
    state: "init",
    title: "Transition"
}, {
    state: "transition",
    title: "Reset"
}];

button.on("click", function () {
    mode = 1 - mode;
    button.html(modes[mode].title);
    if (mode === 1) {
        drawChart();
    } else {
        clearChart();
    }

});


// functions
var drawChart = function () {

    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr({
        x: function (d, i) {
            return i * 100 + 50;
        },
        y: 250,
        width: 80,
        height: 0
    }).style({
        stroke: "none",
        fill: "steelblue"
    }).transition()
        .duration(500)
        .delay(function (d, i) {
        return i * 400
    })
        .attr({
        y: function (d, i) {
            return 200 - hScale(d);
        },
        height: function (d, i) {
            return hScale(d);
        },

    }).each("end", function (d, i) { //kul stvar
        d3.select(this)
        .transition()
        .duration(500)
        .style({
            fill: function...