time scales

by Ryan

HTML

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

CSS

body { font: 10px sans-serif; }
svg { background: #fefefe; border: 1px solid black;}

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

JavaScript

var startDate = new Date("2014-01-01"); //UTC
var endDate = new Date("2014-03-01"); //UTC

var axesMargin = 20;
var margin = { top: axesMargin*4, right: 10, bottom: 20, left: 10 };
var width = 600 - margin.left - margin.right, 
    height = 300 - margin.bottom - margin.top;


var multiYear = (endDate.getUTCFullYear() - startDate.getUTCFullYear()) !== 0;
var multiMonth = multiYear || (endDate.getUTCMonth() - startDate.getUTCMonth()) !== 0;

var scale = d3.time.scale().domain([startDate, endDate]).range([0, width]);

var yearAxis = d3.svg.axis().scale(scale).orient("top")
    .innerTickSize(3).outerTickSize(0)
    .ticks(d3.time.year, 1)
    .tickFormat(d3.time.format("%Y"));

var monthAxis = d3.svg.axis().scale(scale).orient("top")
    .innerTickSize(3).outerTickSize(0)
    .ticks(d3.time.month, 1)
    .tickFormat(d3.time.format("%b"));

var dayAxis = d3.svg.axis().scale(scale).orient("top")
    .innerTickSize(3).outerTickSize(0)
    .ticks(d3.time.day, 7)
    .tickFormat(d3.time.format("%d"));



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

// Append the axes
svg.append("g").attr("class", "year axis")
    .attr("transform", "translate(" + margin.left + "," + axesMargin*1 + ")")
    .call(yearAxis);

svg.append("g").attr("class", "month axis")
    .attr("transform", "translate(" + margin.left + "," + axesMargin*2 + ")")
    .call(monthAxis);

svg.append("g").attr("class", "day axis")
    .attr("transform", "translate(" + margin.left + "," + axesMargin*3 + ")")
    .call(dayAxis);