README

# D3.svg.axis (x and y)
An example of both an X and Y axis using D3's built in axis function.

snippet.js

vis = tributary.g
  
var width = 500,
    height = 300,
    padding = 80;

// define the y scale  (vertical)
var yScale = d3.scale.linear()
    .domain([0, 100])    // values between 0 and 100
     .range([height - padding, padding]);   // map these to the chart height, less padding.

// define the x scale (horizontal)
var mindate = new Date(2012,0,1),
    maxdate = new Date(2012,0,31);
    
var xScale = d3.time.scale()
    .domain([mindate, maxdate])    // values between for month of january
	.range([padding, width - padding * 2]);   // map these the the chart width = total width minus padding at both sides
    

// define the y axis
var yAxis = d3.svg.axis()
    .orient("left")
    .ticks(5)
    .scale(yScale);


// define the x axis
var xAxis = d3.svg.axis()
        .orient("bottom")
    	.ticks(4)
        .scale(xScale);

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

// now add titles to the y axis
    vis.append("text")
            .attr("class", "yaxis_label")
            .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("Original Scale");

// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
    .attr("class", "xaxis")   // give it a class so it can be used to select only xaxis labels  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*0.704 + "," + this.getBBox().height*0.5 + ")rotate(-45)";
})
  .attr("text-anchor", "end");

// From http://bl.ocks.org/3098488