d3 axis (v3)

readme.md

##Explanation If viewing as a d3 block on axis and scale, click Open, below the graphic, to see the full page. Page contains commonly used scales for axes, as well as commonly used formatting changes for axes.

axis.js

var chartWidth = 300;
var chartHeight = 50;

var stringDates = ['1/1/2003', '2/1/2003', '3/1/2003', '4/1/2003', '5/1/2003', '6/1/2003'];
var parseDate = d3.time.format("%m/%d/%Y").parse;

var a = d3.scale.ordinal().domain(['Apples','Oranges','Pears','Plums']).rangePoints([0,chartWidth]);
var b = d3.scale.ordinal().domain([1, 2, 3, 4]).rangePoints([0, chartWidth]);
var c = d3.scale.ordinal().domain([1, 2, 3, 4]).rangePoints([0, chartWidth], 1);
var d = d3.scale.ordinal().domain([1, 2, 3, 4]).rangeRoundBands([0, chartWidth]);
var e = d3.scale.ordinal().domain([1, 2, 3, 4]).rangeBands([0, chartWidth]);

var f = d3.scale.category10();
var g = d3.scale.category20();
var h = d3.scale.category20b();
var ii = d3.scale.category20c();

var j = d3.time.scale().domain(d3.extent(stringDates, function(d){ return parseDate(d); })).range([0,chartWidth]);

var k = d3.scale.linear().domain([0,1000]).range([0,chartWidth]);
var l = d3.scale.quantile().domain([0,1000]).range([0,chartWidth]);
var m = d3.scale.quantize().domain([0,1000]).range([0,chartWidth]);
var n = d3.scale.threshold().domain([0,1000]).range([0,chartWidth]);
var o = d3.scale.log().domain([0,1000]).range([0,chartWidth]);
var pp = d3.scale.pow().domain([0,1000]).range([0,chartWidth]);
var qq = d3.scale.sqrt().domain([0,1000]).range([0,chartWidth]);
var r = d3.scale.identity().domain([0,1000]).range([0,chartWidth]);



var customTimeFormat = d3.time.format.multi([
  [".%L", function(d) { return d.getMilliseconds(); }],
  [":%S", function(d) { return d.getSeconds(); }],
  ["%I:%M", function(d) { return d.getMinutes(); }],
  ["%I %p", function(d) { return d.getHours(); }],
  ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
  ["%b %d", function(d) { return d.getDate() != 1; }],
  ["%B", function(d) { return d.getMonth(); }],
  ["%Y", function() { return true; }]
]);


var ordinalScales = [a,b,c,d,e];
var colorScales = [f,g,h,ii];
var colorLen = [10,20,20,20];
var timeScales = [j,j,j,j,j,j,j,j,j,j,j,j,j,j,j,j,j,j];
var numericScales = [k,l,m,n,o,pp,qq,r];

var axisTypes = ['Ordinal: rangePoints','Ordinal: rangePoints', 'Ordinal: rangePoints & padding', 'Ordinal: rangeRoundBands', 'Ordinal: rangeBands'];

var svg = d3.select("body").append("svg").attr("id","svg").attr("width","100%").attr("height","100%");


var newY = 0;

for (var p=0; p<ordinalScales.length; p++) {
	
	var xAxis = d3.svg.axis().scale(ordinalScales[p]).orient("bottom"); 
	
	var svgGroup = svg.append("g").attr("transform","translate(0,"+((p+1)*chartHeight)+")");
	svgGroup.append("text").attr("class","blue").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(axisTypes[p]);
	svgGroup.append("g").attr("transform","translate(270,0)").attr("class","axis").call(xAxis);	
	svgGroup.append("text").attr("class","blue").attr("x","600").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","start").text('scale.range() = '+ordinalScales[p].range() + ' ---------- scale.rangeBand() = '+ordinalScales[p].rangeBand() + ' ---------- scale.domain() = '+ordinalScales[p].domain());

	
}



var timeTypes = ['Time: default format','Time: ticks(2)','Time: ticks(10)','Time: ticks(12)','Time: tickFormat(%B)','Time: tickFormat(%b)','Time: tickFormat(%Y)','Time: tickFormat(%y)','Time: tickFormat(%b %d)','Time: tickFormat(%a %d)','Time: d3.time.format.multi','Time: tickSize(-6)','Time: tickSize(-20)','Time: innerTickSize(10) & outerTickSize(-10)','Time: innerTickSize(-10) & outerTickSize(10)','Time: orient(top)','Time: tickPadding(10)','Time: tickPadding(-10)'];
var newY = chartHeight*ordinalScales.length;



for (var p=0; p<timeScales.length; p++) {


	switch(p) {
		case 0: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom"); break;
		case 1: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").ticks(2); break;
		case 2: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").ticks(10); break;
		case 3: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").ticks(12); break;
		case 4: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(d3.time.format("%B")); break;
		case 5: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(d3.time.format("%b")); break;
		case 6: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(d3.time.format("%Y")); break;
		case 7: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(d3.time.format("%y")); break;
		case 8: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(d3.time.format("%b %d")); break;
		case 9: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(d3.time.format("%a %d")); break;
		case 10: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickFormat(customTimeFormat); break;
		case 11: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickSize(-6); break;
		case 12: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").tickSize(-20); break;
		case 13: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").innerTickSize(10).outerTickSize(-10); break;
		case 14: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("bottom").innerTickSize(-10).outerTickSize(10); break;
		case 15: var xAxis = d3.svg.axis().scale(timeScales[p]).orient("top"); break;
		case 16: var xAxis = d3.svg.axis().scale(timeScales[p]).tickPadding(10); break;
		case 17: var xAxis = d3.svg.axis().scale(timeScales[p]).tickPadding(-10); break;

	}

	
	var svgGroup = svg.append("g").attr("transform","translate(0,"+(((p+1)*chartHeight)+newY)+")");
	svgGroup.append("text").attr("class","red").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(timeTypes[p]);
	svgGroup.append("g").attr("transform","translate(270,0)").attr("class","axis").call(xAxis);	

	
}


var numberTypes = ['Linear','Quantile','Quantize','Threshold','Logrithmic','Power','Square root','Identity'];
newY += chartHeight*timeScales.length;

for (var p=0; p<numericScales.length; p++) {


	var xAxis = d3.svg.axis().scale(numericScales[p]).orient("bottom").ticks(10);


	
		
	var svgGroup = svg.append("g").attr("transform","translate(0,"+(((p+1)*chartHeight)+newY)+")");
	svgGroup.append("text").attr("class","red").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(numberTypes[p]);
	svgGroup.append("g").attr("transform","translate(270,0)").attr("class","axis").call(xAxis);	

	
}











var colorNames = ['Colour & category 10','Colour & category 20','Colour & category 20b','Colour & category 20c'];


newY += chartHeight*numericScales.length;


for (var p=0; p<colorScales.length; p++) {
	
	var svgGroup = svg.append("g").attr("transform","translate(0,"+(((p+1)*chartHeight)+newY)+")");
	svgGroup.append("text").attr("class","green").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(colorNames[p]);
	
	for (var q=0; q<colorLen[p]; q++) {
		svgGroup.append("rect").attr("x",(q*15)+270).attr("y","-7").attr("width","14").attr("height","14").attr("fill",colorScales[p](q));
		
		
	}

}

newY += chartHeight*colorScales.length;
var brewer = d3.entries(colorbrewer);


for (var p=0; p<brewer.length; p++) {
	
	var svgGroup = svg.append("g").attr("transform","translate(0,"+(((p+1)*chartHeight)+newY)+")");
	
	svgGroup.append("text").attr("class","green").attr("x","240").attr("y",0).attr("alignment-baseline","middle").attr("text-anchor","end").text(brewer[p].key);
	
	for (var q=0; q<brewer[p].value[d3.keys(brewer[p].value).map(Number).sort(d3.descending)[0]].length; q++) {
		svgGroup.append("rect").attr("x",(q*15)+270).attr("y","-7").attr("width","14").attr("height","14").attr("fill",brewer[p].value[d3.keys(brewer[p].value).map(Number).sort(d3.descending)[0]][q]);
		
		
	}

}

var svg = document.getElementById("svg");
var bb = svg.getBBox();
svg.style.height = bb.y + bb.height;

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Different types of axes in d3</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script src="http://colorbrewer2.org/export/colorbrewer.js"></script>
    <style>
	    
	    html, body {
		    margin: 0;
		    padding: 0;
		    height: 100%;
		    width: 100%;
	    }
	    
	    text {
		    font-family: arial;
		    font-size: 12px;
	    }
	    
	    text.blue { fill: mediumblue; }
	    text.red { fill: crimson; }
	    text.green { fill: darkgreen; }
	     
		.axis path,
		.axis line {
		  fill: none;
		  stroke: slategray;
		  shape-rendering: crispEdges;
		}
    </style>
  </head>
  <body>
	<script type="text/javascript" src="axis.js"></script>
  </body>
</html>

thumbnail.png