Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
d3 rescale axis example

How to transition a y axis. Drawn initially with set values of 0 to 100. On clicking button the rescale function gets a random value for the end of the scale and redraws with an easing function.

See it running at http://bl.ocks.org/3098488

See also: http://bl.ocks.org/2983699

<html>
<head>
<title>D3 Axis Example</title>
<script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
<button id="rescale" onclick="rescale();">Rescale</button>
<script>
var width = 700,
height = 400,
padding = 100;
// 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([0, 100]) // values between 0 and 100
.range([height - padding, padding]); // map these to the chart height, less padding.
//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.
// 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")
.scale(yScale);
// define the x axis
var xAxis = d3.svg.axis()
.orient("bottom")
.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*-2 + "," + this.getBBox().height + ")rotate(-45)";
});
function rescale() {
yScale.domain([0,Math.floor((Math.random()*90)+11)]) // change scale to 0, to between 10 and 100
vis.select(".yaxis")
.transition().duration(1500).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
.call(yAxis);
vis.select(".yaxis_label")
.text("Rescaled Axis");
}
</script>
</body>
</html>
@jnf

This comment has been minimized.

Copy link

@jnf jnf commented Jun 26, 2014

Thank you for putting this together! I've been working on something similar, and this example really solidified a couple of concepts for me.

@Maisy

This comment has been minimized.

Copy link

@Maisy Maisy commented Jun 4, 2015

Thanks a lot! it's very useful to me.

@cazyjones

This comment has been minimized.

Copy link

@cazyjones cazyjones commented Oct 6, 2015

Great work. Could you please update the tutorial to update the x-axis as well ? Thanks

@christopherbauer

This comment has been minimized.

Copy link

@christopherbauer christopherbauer commented Aug 19, 2016

I think you just saved me several hours of work, thanks!

@SumNeuron

This comment has been minimized.

Copy link

@SumNeuron SumNeuron commented Apr 1, 2017

Unfortunately that same trick doesn't seem to work with scaleOrdinal...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.