Skip to content

Instantly share code, notes, and snippets.

@emmasaunders

emmasaunders/axis.js

Last active August 6, 2016 17:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emmasaunders/f92e3d68d0d910af7f8c8ff87f5b2468 to your computer and use it in GitHub Desktop.
Save emmasaunders/f92e3d68d0d910af7f8c8ff87f5b2468 to your computer and use it in GitHub Desktop.
Download ZIP
d3 axis (v3)
Raw
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.

Raw
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;
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment