custom date axis format

by Ryan

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<div id="main"></div>

CSS

body { font: 10px sans-serif; }
svg { background: white; }

.axis path { fill: none; stroke: none; shape-rendering: crispEdges; }
.axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }

.axis.context line { fill: none; stroke: #ddd; shape-rendering: crispEdges; }
.axis.context > .tick > text { text-anchor: start !important; fill: #aaa; stroke: none; }

JavaScript

var dayMs = 60000*60*24;
var generateData = function(startEpoch, endEpoch, valueFn){
    var data = [];
    
    for(var epoch = startEpoch; epoch < endEpoch; epoch += dayMs){
        data.push([new Date(epoch), valueFn(epoch)]);
    }
    
    return data;
};

var startDate = new Date("2014-01-01");
var endDate = new Date("2014-02-04");
var startEpoch = startDate.getTime();
var endEpoch = endDate.getTime();
var days = (endEpoch - startEpoch)/dayMs;

var data = [];
data.push({ key: "Random -1 to 1", values: generateData(startEpoch, endEpoch, function(epoch){
    return (Math.random() * 2) - 1;
})});
data.push({ key: "Increasing -1 to 1", values: generateData(startEpoch, endEpoch, function(epoch){
    return ((epoch - startEpoch)/(endEpoch - startEpoch))*2 - 1;
})});
data.push({ key: "Decreasing 1 to -1", values: generateData(startEpoch, endEpoch, function(epoch){
    return 1 - ((epoch - startEpoch)/(endEpoch - startEpoch)) * 2;
})});
data.push({ key: "Down then Up", values: generateData(startEpoch, endEpoch, function(epoch){
    return Math.abs(1 - ((epoch - startEpoch)/(endEpoch - startEpoch)) * 2);
})});
data.push({ key: "Up then Down", values: generateData(startEpoch, endEpoch, function(epoch){
    return -Math.abs(((epoch - startEpoch)/(endEpoch - startEpoch)) * 2 - 1);
})});




var keys = data.map(function(d){ return d.key; });
var multiYear = (endDate.getUTCFullYear() - startDate.getUTCFullYear()) !== 0;
var multiMonth = multiYear || (endDate.getUTCMonth() - startDate.getUTCMonth()) !== 0;

// Dimensions of the visualization
var boxDim = 16;
var boxMargin = 1;
var span = boxDim + boxMargin;

var margin = { top: 50, right: 50, bottom: 20, left: 100 };
var width = days*span + boxMargin, 
    height = keys.length*span + boxMargin;


var svg = d3.select("div#main").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var color = d3.scale.linear()
    .domain([-1, 0, 1])
   ...