Skip to content

Instantly share code, notes, and snippets.

@phoebebright
Created July 6, 2012 16:34
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phoebebright/3061203 to your computer and use it in GitHub Desktop.
Save phoebebright/3061203 to your computer and use it in GitHub Desktop.
d3 axis label prettified and using extent
<html>
<head>
<title>D3 Axis Example</title>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment