bobmonteverde · February 17, 2012 18:41
diff --git a/monthendaxis.html b/monthendaxis.html
 <!DOCTYPE html>
 <meta charset="utf-8">

  <style>

  .axis text {
    font: 10px sans-serif;
  }

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

  </style>


 <body>


  <script src="http://mbostock.github.com/d3/d3.js?2.7.4"></script>
  <script src="http://mbostock.github.com/d3/d3.time.js?2.7.4"></script>
  <script>


  function daysInMonth(month,year) {
    var m = [31,28,31,30,31,30,31,31,30,31,30,31];
    if (month != 2) return m[month - 1];
    if (year%4 != 0) return m[1];
    if (year%100 == 0 && year%400 != 0) return m[1];
    return m[1] + 1;
  }


  function d3_time_range(floor, step, number) {
    return function(t0, t1, dt) {
      var time = floor(t0), times = [];
      if (time < t0) step(time);
      if (dt > 1) {
        while (time < t1) {
          var date = new Date(+time);
          if (!(number(date) % dt)) times.push(date);
          step(time);
        }
      } else {
        while (time < t1) times.push(new Date(+time)), step(time);
      }
      return times;
    };
  }


  d3.time.monthEnd = function(date) {
    return new Date(date.getFullYear(), date.getMonth(), 0);
  };


  d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
      date.setDate(date.getDate() + 1);
      date.setDate(daysInMonth(date.getMonth() + 1, date.getFullYear()));
    }, function(date) {
      return date.getMonth();
    });




  var margin = {top: 10, right: 40, bottom: 40, left: 40},
      width = 960 - margin.left - margin.right,
      height = 80 - margin.top - margin.bottom;

  var x = d3.time.scale()
      .domain([new Date(2012, 0, 1), new Date(2012, 11, 31)])
      .range([0, width]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      //.ticks(d3.time.months)
      .ticks(d3.time.monthEnds)
      .tickSize(16, 0)
      .tickFormat(d3.time.format("%x"));
      //.tickFormat(d3.time.format("%B"));

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)

    .selectAll("text")
      .attr("text-anchor", "middle")
      //.attr("text-anchor", "start")
      .attr("x", 0)
      .attr("y", 18);

  </script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>

	.axis text {
	font: 10px sans-serif;
	}

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

	</style>


	<body>


	<script src="http://mbostock.github.com/d3/d3.js?2.7.4"></script>
	<script src="http://mbostock.github.com/d3/d3.time.js?2.7.4"></script>
	<script>


	function daysInMonth(month,year) {
	var m = [31,28,31,30,31,30,31,31,30,31,30,31];
	if (month != 2) return m[month - 1];
	if (year%4 != 0) return m[1];
	if (year%100 == 0 && year%400 != 0) return m[1];
	return m[1] + 1;
	}


	function d3_time_range(floor, step, number) {
	return function(t0, t1, dt) {
	var time = floor(t0), times = [];
	if (time < t0) step(time);
	if (dt > 1) {
	while (time < t1) {
	var date = new Date(+time);
	if (!(number(date) % dt)) times.push(date);
	step(time);
	}
	} else {
	while (time < t1) times.push(new Date(+time)), step(time);
	}
	return times;
	};
	}


	d3.time.monthEnd = function(date) {
	return new Date(date.getFullYear(), date.getMonth(), 0);
	};


	d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
	date.setDate(date.getDate() + 1);
	date.setDate(daysInMonth(date.getMonth() + 1, date.getFullYear()));
	}, function(date) {
	return date.getMonth();
	});




	var margin = {top: 10, right: 40, bottom: 40, left: 40},
	width = 960 - margin.left - margin.right,
	height = 80 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.domain([new Date(2012, 0, 1), new Date(2012, 11, 31)])
	.range([0, width]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	//.ticks(d3.time.months)
	.ticks(d3.time.monthEnds)
	.tickSize(16, 0)
	.tickFormat(d3.time.format("%x"));
	//.tickFormat(d3.time.format("%B"));

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)

	.selectAll("text")
	.attr("text-anchor", "middle")
	//.attr("text-anchor", "start")
	.attr("x", 0)
	.attr("y", 18);

	</script>