Bar Chart Data

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");

data = [100, 150, 130, 170];
// 150 100 120 80

// 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;
    })
        .attr({
            "y":  250,
            "width": 80,
            "height": 0
    })
        .attr("id", function (d, i) {
        return "id" + i;
    })
        .style({
        "stroke": "none",
            "fill": "steelblue"
    })
        .transition()
        .attr("y", (function (d) {
        return 250 - d;
    }))
        .attr("height", (function (d) {
        return d;
    }))
        .duration(500)
    .delay(function(d, i) {return i * 300})
        .each("end", function () { 
        d3.select("#id3") 
        .transition() 
        .style("fill", "darkred")
            .duration(300)
            .delay(900);
   ...