Data Driven Documents

D3

Uses selectors and chaining, like JQuery

Basic Binding

HTML Bars

HTML Moving Bars (Enter/Update/Exit)

SVG Bars

Updating SVG Bars

<script src="../js/lib/d3.js"></script>
<script>
    var dataset = [
        {id: 1, value: 34},
        {id: 2, value: 334},
        {id: 3, value: 134},
        {id: 4, value: 324},
        {id: 5, value: 74},
        {id: 6, value: 23},
        {id: 7, value: 51},
        {id: 8, value: 99},
        {id: 9, value: 87},
        {id: 10, value: 134},
        {id: 11, value: 200},
        {id: 12, value: 25}
    ];

var w = 300;
    var h = d3.max(dataset, function(d) { return d.value; }) + 10;

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

function updateRect(rect) {
        rect.attr("x", function(d, i) { return i * 25;})
                .attr("y", function(d) { return h - d.value; })
                .attr("width", 20)
                .attr("height", function(d) { return d.value; })
                .attr("fill", "teal");
    }

function run() {
        var rect = svg.selectAll("rect").data(dataset, function(d) {return d.id;});

rect.enter().append("rect")
                .attr("x", function(d, i) { return (i+1) * 25;})
                .attr("y", function(d) { return h - d.value; })
                .attr("width", 20)
                .attr("height", function(d) { return d.value; })
                .attr("fill", "teal");

updateRect(rect); // update rects

rect.exit().remove(); // remove uneeded rects

window.setTimeout(function() {
            dataset.shift();
            dataset.push({id: Math.random(), value: Math.floor(Math.random()*h)});
            run();
        }, 1000);
    }
    run();

</script>

Updating SVG Bars + Animation

<script src="../js/lib/d3.js"></script>
<script>
    var dataset = [
        {id: 1, value: 34},
        {id: 2, value: 334},
        {id: 3, value: 134},
        {id: 4, value: 324},
        {id: 5, value: 74},
        {id: 6, value: 23},
        {id: 7, value: 51},
        {id: 8, value: 99},
        {id: 9, value: 87},
        {id: 10, value: 134},
        {id: 11, value: 200},
        {id: 12, value: 25}
    ];

var w = 300;
    var h = d3.max(dataset, function(d) { return d.value; }) + 10;

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

function updateRect(rect) {
        rect.transition()
                .duration(1000)
                .attr("x", function(d, i) { return i * 25;})
                .attr("y", function(d) { return h - d.value; })
                .attr("width", 20)
                .attr("height", function(d) { return d.value; })
                .attr("fill", "teal");
    }

function run() {
        var rect = svg.selectAll("rect").data(dataset, function(d) {return d.id;});

rect.enter().append("rect")
                .attr("x", function(d, i) { return (i+1) * 25;})
                .attr("y", function(d) { return h - d.value; })
                .attr("width", 20)
                .attr("height", function(d) { return d.value; })
                .attr("fill", "teal");

updateRect(rect); // update rects

rect.exit().transition().duration(1000).attr('x', -25).remove(); // remove uneeded rects

window.setTimeout(function() {
            dataset.shift();
            dataset.push({id: Math.random(), value: Math.floor(Math.random()*h)});
            run();
        }, 1000);
    }
    run();

</script>

Rouben Meschian

rmeschian@gmail.com