d3 axis label prettified and using extent

<html>
	<head>
		<title>D3 Axis Example</title>
		<script src="https://d3js.org/d3.v2.js"></script>
		
		<style type="text/css">
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>		
    </head>
    
    <body>
    
    <script>
        var width = 700,   // width of svg
            height = 400,  // height of svg
            padding = 100; // 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; });
        
        /* get
        y_domain: Array[2]
            0: 2
            1: 33
        x_domain: Array[2]
            0: Sun Jan 01 2012 00:00:00 GMT+0000 (GMT)
            1: Mon Jan 30 2012 00:00:00 GMT+0000 (GMT)
        */
        
        // display date format
        var  date_format = d3.time.format("%d %b");
        
        // create an svg container
        var vis = d3.select("body").
            append("svg:svg")
                .attr("width", width)
                .attr("height", height);
                
        // define the y scale  (vertical)
        var yScale = d3.scale.linear()
	        .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.time.scale()
	        .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.svg.axis()
            .orient("left")
            .scale(yScale);
        
        // define the x axis
        var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale)
            .tickFormat(date_format);
            
        // draw y axis with labels and move in from the size by the amount of padding
        vis.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
        vis.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.
        vis.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
        vis.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");

vis.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");
            
    </script>
    
    </body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js