D3 Axis Label prettified and using extent.

<html>

  <head>
    <title>D3 Axis Example</title>
    <script data-require="d3@*" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script src="script.js"></script>
  </body>

</html>

var width = 700, // Width of svg
    height = 400, // Height of svg
    padding = 90; // Space around the chart, not including labels

var data = [
    { "date": new Date(2012, 0, 1), "value": 3 },
    { "date": new Date(2012, 0, 3), "value": 2 },
    { "date": new Date(2012, 0, 12), "value": 33 },
    { "date": new Date(2012, 0, 21), "value": 13 }, 
    { "date": new Date(2012, 0, 30), "value": 23 }
];


var x_domain = d3.extent(data, function(d) { return d.date; }),
    y_domain = d3.extent(data, function(d) { return d.value; });

// Display date format.
var date_format = d3.timeFormat("%d %b");

// Create an SVG container.
var svg = d3.select("body").append("svg:svg")
    .attr("width", width)
    .attr("height", height);
    
// Define the Y scale. (vertical)
var yScale = d3.scaleLinear()
    .domain(y_domain).nice() // Make axis end in round number.
    .range([height - padding, padding]); // map these to the chart height, less padding.  In this case 300 and 100.
//REMEMBER: Y axis range has the bigger number first because the y value of zero is at the top of chart and increases as you go down.

var xScale = d3.scaleTime()
    .domain(x_domain) // Values between for month of January.
    .range([padding, width - padding]); // Map these sides of the chart, in this case 100 and 600.

// Define the Y axis,
var yAxis = d3.axisLeft(yScale);

// Define the x axis
var xAxis = d3.axisBottom(xScale)
    .tickFormat(date_format);

// Draw y axis with labels and move in from the size by the amount of padding.
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

// Draw x axis with labels and move to the bottom of the chart area.
svg.append("g")
    .attr("class", "xaxis axis") // Two classes, one for css formatting, one for selection below.
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);

// Now rotate text on x axis.
// Solution based on idea here: https://groups.google.com/forum/?fromgroups#!topic/d3-js/heOBPQF3sAY
// First move the text left so no longer centered on the tick,
// then rotate up to get 45 degrees.
svg.selectAll(".xaxis text") // Select all the text elements for the xaxis
    .attr("transform", function(d) {
        return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";
    });

// Now add titles to the axes
svg.append("text")
    .attr("text-anchor", "middle") // This makes it easy to centre the text as the transform is applied to the anchor.
    .attr("transform", "translate(" + (padding / 2) + "," + (height / 2) + ")rotate(-90)") // Text is drawn off the screen top left, move down and out and rotate.
    .text("Value");

svg.append("text")
    .attr("text-anchor", "middle") // This makes it easy to centre the text as the transform is applied to the anchor.
    .attr("transform", "translate(" + (width / 2) + "," + (height - (padding / 3)) + ")") // Centre below axis.
    .text("Date");

.axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

Simple example of preparing the axes for a chart with some prettifying.

See it running at http://bl.ocks.org/3061203

Tips on tidying up the look, formatting labels etc here: http://alignedleft.com/tutorials/d3/axes/

This presentation also has good example of simple axes http://lws.node3.org/#landing-slide

Updated for version 4.