Tufte Bar Chart Redesign in jQuery Flot

I have been reading (very slowly) through Edward R. Tufte’s ‘The Visual Display of Quantitative Information’ book. On page 126 Tufte proposes an alternative design for the Bar Chart / Histogram using all of his suggested principles.

The design basically attempts to emphasis the data opposed to the graph related lines. You will notice in the image below that there are no:

1. Axis Ticks – Tufte states that the white grid marks remove the need for these
2. Grid – The box around the bar graph does not aid understanding

I set out to implement this design using jQuery Flot. Here is the final result and the javascript source code to go with it.

var data, ticks, options, series, plot, ctx, lineWidth, offset;

        // some data close to Tufte's example
        data = [
            [0, 9], [1, 12], [2, 7], [3, 8], [4, 3],
            [5, 18], [6, 14], [7, 9], [8, 6], [9, 11],
            [10, 5], [11, 10]
        ];

        ticks = [ 5, 10, 15 ];
        options = {
            series: { bars: { show: true, fillColor: "rgb(128,128,128)" } },
            grid: { show: true, borderWidth: 0, color: "#fff" },
            xaxis: { show: false, min: -0.5 },
            yaxis: {
                tickFormatter: function(number) { return number + "%"; },
                ticks: ticks
            }
        };

        series = [{ data: data, bars: { barWidth: 0.5 }, color: "#fff" }];
        plot = $.plot($("#plot"), series, options);
        ctx = plot.getCanvas().getContext("2d");

        // need to set the label colour to not be white
        $(".tickLabel").css("color", "#000");

        // draw line at baseline because it "looks good"
        lineWidth = 2;
        offset = plot.offset();
        ctx.fillStyle = "rgb(128,128,128)";
        ctx.lineStyle = lineWidth;
        ctx.fillRect(offset.left + lineWidth * 3 , plot.height() + lineWidth,
            plot.width() - lineWidth * 8, lineWidth);

        // draw horizontal lines to remove need for ticks
        $.each(ticks, function(index, tick) {
            var yaxis = plot.getYAxes()[0];

            ctx.fillStyle = "#fff";
            ctx.lineWidth = lineWidth;
            ctx.fillRect(offset.left, yaxis.p2c(tick) + lineWidth / 2,
                plot.width(), lineWidth);
        });