D3 Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg id="chart"></svg>

CSS

#chart rect {
    fill: steelblue;
}

#chart text {
    fill: white;
    font: 10px Helvetica;
    text-anchor: end;
}

JavaScript

var data = [
    [{x0:10,x1:60,y0:0,y1:0},
    {x0:10,x1:60,y0:20,y1:20}],
    [{x0:100,x1:600,y0:20,y1:20},
    {x0:100,x1:600,y0:200,y1:200}],
    ];

var width = 500;
var barHeight = 20;

var areaFunc = d3.svg.area()
            .interpolate('step')            
            .x0(function(d){return d.x0;})
            .x1(function(d){return d.x1;})
            .y0(function(d){return d.y0;})
            .y1(function(d){return d.y1;});
            

var chart = d3.select('#chart')
    .attr('width', width)
    .attr('height', barHeight * data.length);

chart.selectAll('path')
            .data(data)
            .enter()
            .append('path')
            .attr('d', areaFunc)
            .attr('class', 'absences area')
            .attr('style', 'fill:blue;stroke:black;stroke-width:1');