Time axis with centered labels and sticky month names.

README.md

Hint: Use double click to zoom in and shift + double click to zoom out.

I was using require.js and backbone.js and therefore there is a lot of extra code here. So I will highlight the most useful parts.

There is a few features I want to share:

• Axis labels between ticks
• Sticky month names that remain visible at any zoom level

Labels between ticks

This feature was implemented in the axisdaysview.js.
At first it is called this.axis as usual and then text labels are moved to the half-of-the-day:

this.d3
   .call(this.axis)
   .call(this.adjustTextLabels);

Here is adjustTextLabels function:

adjustTextLabels: function(selection) {
    selection.selectAll('.major text')
        .attr('transform', 'translate(' + G.utils.daysToPixels(1) / 2 + ',0)');
}

The daysToPixels calculates the width of the day (or days) in pixels depending on the current scale. Function defined in the global.js:

daysToPixels: function(days, timeScale) {
    var d1 = new Date();
    timeScale || (timeScale = Global.timeScale);
    return timeScale(d3.time.day.offset(d1, days)) - timeScale(d1);
}

Sticky months

Sticky months are implemented in the axismonthsview.js in the renderMonthNames.
The getVisibleMonths returns an array of the months to be drawn.
The setTextPosition trying to align the name of the month to the center and applies simple maths to leave the month name at the scene as long as possible.

appview.js

define([
    'backbone',
    'd3',
    'global',
    'axisdaysview',
    'axismonthsview',
    'zoomview',
    'zoommodel',
    'gridview',
], function(Backbone, d3, G,
        AxisDaysView, AxisMonthsView, ZoomView, ZoomModel, GridView) {
    var AppView = Backbone.View.extend({
        el: '#app',

        initialize: function(options) {
            // init canvas
            //
            this.canvas = d3.select('#canvas');
            this.canvas
                .attr('height', G.config.height)
                .attr("width", G.config.width + G.config.margin.left + G.config.margin.right);
            this.canvas.select("#main")
                .attr("transform", "translate(" + G.config.margin.left + "," + G.config.margin.top + ")");

            // init axis canvas
            //
            d3.select('#axis-top')
                .attr("width", G.config.width + G.config.margin.left + G.config.margin.right)
                .attr("height", G.config.axis.height);

            // startup modules
            //
            this.zoomModel = new ZoomModel();

            this.axisDaysView = new AxisDaysView();
            this.axisMonthsView = new AxisMonthsView();
            this.zoomView = new ZoomView({model: this.model, zoomModel: this.zoomModel});
            this.gridView = new GridView({model: this.model});

            d3.select('header').transition().duration(500).delay(500).style('top', '0px');

            G.events.trigger('initialized');
        }
    });

    return AppView;
});

axisdaysview.js

define([
    'd3',
    'global',
    'backbone'
], function(d3, G, Backbone) {
    var AxisDaysView = Backbone.View.extend({

        initialize: function() {
            // init axis
            //
            this.d3 = d3.select('#axis-top .axis.days')
                .attr("transform", "translate(" + G.config.margin.left + "," + (G.config.axis.height-1) + ")");
            this.axis = d3.svg.axis()
                .scale(G.timeScale)
                .tickSize(0,0,0)
                .orient("top");

            // init handlers
            //
            this.listenTo(G.events, 'initialized', this.render);
            this.listenTo(G.events, 'zoomed', this.render);
            this.listenTo(G.events, 'panned', this.adjustPan);
        },

        render: function() {
            this.adjustTimeAxis();
            this.d3
                .transition().duration(G.config.duration)
                .call(this.axis)
                .call(this.adjustTextLabels);
        }, // render

        adjustTimeAxis: function() {
            switch(this.getZoomState()) {
                case 'longDays':
                    this.axis
                        .ticks(d3.time.days, 1)
                        .tickFormat(function(d) { return d3.time.format('%a %e')(d); })
                        .tickSubdivide(false);
                    break;
                case 'shortDays':
                    this.axis
                        .ticks(d3.time.days, 1)
                        .tickFormat(function(d) { return d3.time.format('%e')(d); })
                        .tickSubdivide(false);
                    break;
                case 'weeks':
                    this.axis
                        .ticks(d3.time.mondays, 1)
                        .tickFormat(null)
                        .tickSubdivide(6);
                    break;
                default:
                    this.axis
                        .ticks(d3.time.months, 1)
                        .tickFormat(null)
                        .tickSubdivide(1);
            }
        }, // adjustTimeAxis

        adjustTextLabels: function(selection) {
            selection.selectAll('.major text')
                .attr('transform', 'translate(' + G.utils.daysToPixels(1) / 2 + ',0)');
        }, // adjustTextLabels

        adjustPan: function() {
            this.d3
                .call(this.axis)
                .call(this.adjustTextLabels);
        }, // adjustPan

        getZoomState: function() {
            var delta = G.utils.daysToPixels(7);
            return d3.entries(G.config.axis.ticks).filter(function(e) { return e.value <= delta; })[0].key;
        } // getZoomState
    });

    return AxisDaysView;
});

axismonthsview.js

define([
    'd3',
    'global',
    'd3.lambdas'
], function(d3, G) {
    var AxisMonthsView = Backbone.View.extend({
        el: '#axis-top .axis.months',

        initialize: function() {
            this.d3 = d3.select(this.el)
                .attr('transform', 'translate(' + G.config.margin.left + ', 0)');
            this.d3.append('g')
                .attr('class', 'month-names')
                .attr('transform', 'translate(0, ' + (G.config.axis.height - 2) + ')');

            this.listenTo(G.events, 'zoomed panned', this.render);
            this.render('initial');
        }, // initialize

        render: function(eventType) {
            this.renderMonthNames(eventType);
        }, // render

        renderMonthNames: function(eventType) {
            var self = this,
                scale1 = G.timeScale.copy(),
                scale0 = this.renderMonthNames.scale || scale1,
                data = this.getVisibleMonths(G.timeScale.domain()),
                name = this.d3.select('.month-names').selectAll('.name').data(data, d3.ƒ('getTime')),
                nameEnter, nameUpdate, nameExit,
                text, textEnter, textUpdate;

            this.renderMonthNames.scale = scale1;

            nameEnter = name.enter();
            nameUpdate = name;
            nameExit = name.exit();

            // ENTER
            //
            nameEnter
                .append('text')
                .attr('class', 'name')
                .text(function(d) { return d3.time.format('%B')(d); })
                .call(this.setTextPosition, scale0);

            switch(eventType) {
                case 'initial':
                    // set text position in the other thread
                    // because we need BBox of the already rendered text element
                    setTimeout(function() {
                        self.d3.select('.month-names').selectAll('.name').call(self.setTextPosition, scale0);
                    }, 1);
                    break;
                case 'zoomed':
                    nameUpdate = nameUpdate.transition().duration(G.config.duration);
                    nameExit = nameExit.transition().duration(G.config.duration);
                    break;
            }

            // UPDATE
            // 
            nameUpdate
                .call(this.setTextPosition, scale1);

            // EXIT
            //
            nameExit
                .attr('opacity', 1e-6)
                .call(this.setTextPosition, scale1)
                .remove();
        }, // renderMonthNames


        setTextPosition: function(selection, scale) {
            selection.each(function(d) {
                var width = this.getBBox().width,
                    nextMonthPos = scale(d3.time.month.offset(d, 1)),
                    padding = 3,
                    minPos = 0, maxPos = scale.range()[1],
                    x, opacity;

                x = scale(d) + G.utils.daysToPixels(15) - width / 2; // center
                x = Math.max(minPos, x); // left-left
                x = Math.min(x, nextMonthPos - width - padding);  // left-right

                x = Math.min(x, maxPos - width); // right-right
                x = Math.max(x, scale(d) + padding); // right-left

                if (x < minPos) {
                    opacity = (x + width - minPos) / width;
                } else if (x + width > maxPos) {
                    opacity = (maxPos - x) / width;
                } else {
                    opacity = 1;
                }

                d3.transition(d3.select(this))
                    .attr('x', x)
                    .attr('opacity', opacity);
            });
        }, // setTextPosition


        // d3.time.months could not be used here because of ceil dates
        // that shrink the range. 
        // In this function we need the extended range
        //
        getVisibleMonths: function(domain) {
            var time = d3.time.month.floor(domain[0]),
                end = d3.time.month.floor(domain[1]),
                times = [ time ];
            while(time < end) {
                time = d3.time.month.offset(time, 1);
                times.push(time);
            }
            return times;
        } // getVisibleMonths
    });

    return AxisMonthsView;
});

d3.lambdas.js

define([
    'd3'
], function(d3) {
    d3.ƒ = function(name) {
        var f, params = Array.prototype.slice.call(arguments, 1);
        return function(d) {
            f = d[name];
            return typeof(f)==='function' ? f.apply(d, params) : f;
        };
    };

    d3.I = function(d) { return d };
});

global.js

define([
    'jquery',
    'underscore',
    'backbone',
    'd3'
], function($, _, Backbone, d3) {
    var Global = {

        config: {},

        initialize: function() {
            this.initDimensions();
            this.initD3();
            this.initTimescale();

            this.events = _.extend({}, Backbone.Events);
        },

        initDimensions: function() {
            this.config.margin = { top: 95, right: 0, bottom: 50, left: 0 };
            this.config.width = $(window).width() - this.config.margin.left - this.config.margin.right;
            this.config.height = 500;
        },

        initD3: function() {
            var self = this;
            this.config.durationNormal = 300;
            this.config.duration = this.config.durationNormal;

            // axis
            //
            this.config.axis = {};
            this.config.axis.height = 50;
            // should to be sorted from high to low values
            this.config.axis.ticks = {
                longDays: 240,
                shortDays: 112,
                weeks: 40,
                months: 0
            };
        },

        initTimescale: function() {
            // today based timescale
            var today = new Date(),
                magicNumber = 1.5,
                days = Global.config.width / (this.config.axis.ticks.shortDays/7) / magicNumber;
            this.timeScale = d3.time.scale()
                .domain([d3.time.day.offset(today, -0.6 * days),
                         d3.time.day.offset(today, 0.4 * days)])
                .rangeRound([0, Global.config.width]);
        },

        utils: {
            daysToPixels: function(days, timeScale) {
                var d1 = new Date();
                timeScale || (timeScale = Global.timeScale);
                return timeScale(d3.time.day.offset(d1, days)) - timeScale(d1);
            } // daysToPixels

        }
    };

    Global.initialize();

    return Global;
});

gridview.js

define([
    'd3',
    'global',
    'backbone'
], function(d3, G, Backbone) {
    var GridView = Backbone.View.extend({
        el: '#grid',

        initialize: function() {
            this.d3 = d3.select(this.el)
                .attr("transform", "translate(" + G.config.margin.left + ",0)");

            this.listenTo(G.events, 'initialized', this.initAxis);
            this.listenTo(G.events, 'initialized', this.render);
            this.listenTo(G.events, 'zoomed', this.render);
            this.listenTo(G.events, 'panned', this.adjustPan);
        },

        initAxis: function() {
            this.axis = d3.svg.axis().scale(G.timeScale).tickSize(0,0,0);
            var height = G.config.height;
            this.axis
                .tickSize(height, height)
                .tickFormat("");

            this.d3.append('g').attr('class', 'days-ticks');
            this.d3.append('g').attr('class', 'weekends');
            this.d3.append('g').attr('class', 'month-ticks');
        },

        onResize: function() {
            this.render();
        },

        render: function() {
            this.renderGrid.apply(this, arguments);
            this.renderWeekends.apply(this, arguments);
            this.renderMonthTicks.apply(this, arguments);
        }, // render

        renderGrid: function() {
            this.axis.tickSize(G.config.height);
            switch(this.getZoomState()) {
                case 'months':
                    this.axis.ticks(d3.time.months, 1);
                    break;
                default:
                    this.axis.ticks(d3.time.days, 1);
                    break;
            }
            this.d3.select('.days-ticks')
                .transition().duration(G.config.duration)
                .call(this.axis);
        }, // renderGrid

        renderWeekends: function(eventType) {
            var scale1 = G.timeScale.copy(),
                scale0 = this.renderWeekends.scale || scale1,
                domain = scale1.domain(),
                weekend = this.d3.select('.weekends').selectAll('.weekend')
                    .data(d3.time.saturday.range(d3.time.day.offset(domain[0], -2), domain[1]), d3.ƒ('getTime')),
                weekendEnter, weekendUpdate, weekendExit;

            this.renderWeekends.scale = scale1;

            weekendEnter = weekend.enter();
            weekendUpdate = weekend;
            weekendExit = weekend.exit();

            // ENTER
            //
            weekendEnter
                .append('rect')
                .attr('class', 'weekend')
                .attr('y', 0)
                .attr('height', G.config.height)
                .attr('x', function(d) { return scale0(d); })
                .attr('width', G.utils.daysToPixels(2, scale0));

            // UPDATE
            //
            if (eventType == 'zoomed') {
                weekendUpdate = weekend.transition().duration(G.config.duration);
                weekendExit = weekendExit.transition().duration(G.config.duration);
            }

            weekendUpdate
                .attr('height', G.config.height)
                .attr('x', function(d) { return scale1(d); })
                .attr('width', G.utils.daysToPixels(2));

            // EXIT
            //
            weekendExit
                .attr('x', function(d) { return scale1(d); })
                .attr('width', G.utils.daysToPixels(2))
                .remove();

        }, // renderWeekends

        renderMonthTicks: function(eventType) {
            var data = G.timeScale.ticks(d3.time.months),
                tick = this.d3.select('.month-ticks').selectAll('.tick').data(data, d3.ƒ('getTime')),
                tickEnter, tickUpdate, tickExit,
                scale1 = G.timeScale.copy();
                scale0 = this.renderMonthTicks.scale || scale1;

            this.renderMonthTicks.scale = scale1;

            tickEnter = tick.enter().append('line');
            tickUpdate = tick;
            tickExit = tick.exit();
            if (eventType == 'zoomed') {
                tickUpdate = tick.transition().duration(G.config.duration);
                tickExit = tickExit.transition().duration(G.config.duration);
            }

            // ENTER
            //
            tickEnter
                .attr('class', 'tick')
                .attr('y2', G.config.height)
                .attr('transform', function(d) { return 'translate(' + scale0(d) + ', 0)'; });

            // UPDATE
            //
            tickUpdate
                .attr('transform', function(d) { return 'translate(' + scale1(d) + ', 0)'; })
                .attr('y2', G.config.height);

            // EXIT
            //
            tickExit
                .attr('transform', function(d) { return 'translate(' + scale1(d) + ', 0)'; })
                .remove();
        }, // renderMonthTicks

        adjustPan: function() {
            this.d3.select('.days-ticks').call(this.axis);
            this.renderWeekends.apply(this, arguments);
            this.renderMonthTicks.apply(this, arguments);
        }, // adjustPan

        getZoomState: function() {
            var delta = G.utils.daysToPixels(7);
            return d3.entries(G.config.axis.ticks).filter(function(e) { return e.value <= delta; })[0].key;
        } // getZoomState

    });

    return GridView;
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">

        <script data-main="main" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>
    </head>
<body>
    <section id="app">
        <header>
            <svg id="axis-top">
                <g class="axis months"></g>
                <g class="axis days"></g>
            </svg>
        </header>
        <svg id="canvas">
            <g id="grid"></g>
            <rect class="background"/>
        </svg>
    </section>
</body>
</html>

main.css

html { font-family: sans-serif; }
body { margin: 0; }

#app header {
  position: fixed;
  width: 100%;
  box-shadow: 0 0 15px 0 #777777;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#eeeeee, rgba(238, 238, 238, 0.5));
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(rgba(238, 238, 238, 0.5)));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#eeeeee, rgba(238, 238, 238, 0.5));
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#eeeeee, rgba(238, 238, 238, 0.5));
  height: 50px;
  top: -50px; }
  #app header #axis-top {
    position: absolute;
    left: 0;
    bottom: 0; }

#app .background {
  fill: none;
  cursor: col-resize;
  pointer-events: all; }

#app #grid path,
#app #grid line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges; }
#app #grid .tick.major line {
  stroke: #eee; }
#app #grid .tick.minor {
  stroke: #eee; }
#app #grid .weekend {
  fill: #eee;
  fill-opacity: 0.5; }
#app #grid .month-ticks {
  opacity: 0.5; }
  #app #grid .month-ticks .tick {
    stroke: #000; }
#app .axis path,
#app .axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges; }
#app .axis .domain {
  display: none; }
#app .axis.days text {
  transition: font-size 0.15s;
  font-size: 11px;
  fill: #333;
  text-shadow: 0px 1px 1px white; }
#app .axis.months .month-names {
  opacity: 0.1; }
  #app .axis.months .month-names .name {
    font-size: 60px;
    font-variant: small-caps;
    font-weight: bold; }
#app .axis.months .month-ticks {
  opacity: 0.5; }

main.js

require.config({
    paths: {
        "jquery": 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min',
        "underscore": 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min',
        "backbone": 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
        "d3": 'http://cdnjs.cloudflare.com/ajax/libs/d3/3.1.6/d3.min',
        "d3.lambdas": 'd3.lambdas'
    },
    shim: {
        "underscore": { exports: '_' },
        "backbone": { deps: ["underscore", "jquery"], exports: "Backbone" },
        "d3": { exports: 'd3' },
        "d3.lambdas": [ 'd3' ]
    }
});

require(['appview'], function(AppView) {
    new AppView();
});

thumbnail.png

zoommodel.js

define([
    'backbone',
    'd3',
    'global'
], function(Backbone, d3, G) {

    var ZoomModel = Backbone.Model.extend({
        initialize: function() {
            this.zoomBeh = d3.behavior.zoom().x(G.timeScale);
        },

        d3_helpers: function() {
            var zoom = this.zoomBeh,
                scale = zoom.scale(),
                scaleExtent = zoom.scaleExtent(),
                translate = zoom.translate();

            function point(l) { return [l[0] * scale + translate[0], l[1] * scale + translate[1]]; }

            return {
                location: function(p) { return [(p[0] - translate[0]) / scale, (p[1] - translate[1]) / scale]; },
                scaleTo: function(s) { scale = Math.max(scaleExtent[0], Math.min(scaleExtent[1], s)); },
                translateTo: function(p, l) { l = point(l); translate[0] += p[0] - l[0]; translate[1] += p[1] - l[1]; },
                applyZoom: function() { zoom.scale(scale); }
            };
        },

        zoom: function(el) {
            var h = this.d3_helpers(),
                p = d3.mouse(el),
                l = h.location(p),
                k = Math.log(this.zoomBeh.scale()) / Math.LN2;

            h.scaleTo(Math.pow(2, d3.event.shiftKey ? Math.ceil(k) - 1 : Math.floor(k) + 1));
            h.translateTo(p, l);
            h.applyZoom();
            G.events.trigger('zoomed', 'zoomed');
        }, // zoom

        startPan: function(target) {
            var self = this,
                h = this.d3_helpers(),
                l = h.location(d3.mouse(target));
            this.moved = false;

            // worker will be called while mouse move
            return function () {
                self.moved = true;
                h.translateTo(d3.mouse(target), l);
                h.applyZoom();
                G.events.trigger('panned', 'panned');
            };
        }
    });

    return ZoomModel;
});

zoomview.js

define([
    'backbone',
    'd3',
    'global'
], function(Backbone, d3, G) {
    var ZoomView = Backbone.View.extend({
        el: '#canvas .background',

        initialize: function(options) {
            var self = this;
            this.zoomModel = options.zoomModel;

            // init background rect
            //
            this.d3 = d3.select(this.el)
                .attr("width", G.config.width + G.config.margin.left + G.config.margin.right)
                .attr("height", G.config.height + G.config.margin.top + G.config.margin.bottom)
                .on("dblclick", function() { self.zoomModel.zoom(d3.select('#canvas .background').node()); })
                .on("mousedown", function() { self.mousedown(); } );
        },

        // start panning
        //
        mousedown: function() {
            if (d3.event.button !== 0) return;
            var zoomModel = this.zoomModel,
                panWorker = this.zoomModel.startPan(d3.event.target),
                w = d3.select(window)
                    .on('mousemove.pan', function mousemove() { panWorker(); })
                    .on('mouseup.pan', function mouseup() {
                        if (zoomModel.moved) {
                            d3.event.preventDefault();
                        }
                        w.on("mousemove.pan", null).on("mouseup.pan", null);
                    });
            d3.event.preventDefault();
            window.focus();
        } // mousedown
    });

    return ZoomView;
});