I'm fairly sure if I can find an example showing what I'm trying to do, I can reverse engineer/reimplement it. Has anyone seen an example showing a smooth/animated transition between a linear and log scale in D3JS?

I have both scales working independently, but I have to reload the page to change the scale.

My Google skills have failed me!

Thanks so much.

I'm fairly sure if I can find an example showing what I'm trying to do, I can reverse engineer/reimplement it. Has anyone seen an example showing a smooth/animated transition between a linear and log scale in D3JS?

I have both scales working independently, but I have to reload the page to change the scale.

My Google skills have failed me!

Thanks so much.

• javascript
• d3.js

Share Improve this question Follow asked Apr 14, 2013 at 0:31 user986122user986122 36555 silver badges1616 bronze badges 2

• why not applying progressively to you axes values the function f(x)=t*x^(1/t) for t ranging from 0(+epsilon) to 1... that should interpolate between log and linear. A log function is just the function above taken at the limit toward zero. – nbonneel Commented Apr 14, 2013 at 0:42
• I'm not sure how to actually change the scale without refreshing the page. In principle, I suppose I could use that function to define a scale, but how would I then regenerate the scale and transition between them? – user986122 Commented Apr 14, 2013 at 0:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Here's a proof of concept jsfiddle. You simply reselect the data points and redraw them with the new scale. For the axis labels, the transition is even simpler -- you just need to call the axis function again. Relevant excerpt below.

// change to log scale...
yScale = d3.scale.log().domain([1, 100]).range([dim-padding,padding]);

svg.selectAll("circle").data(data)
   .transition().delay(1000).duration(1000)
   .attr("cx", function(d) { return xScale(d); })
   .attr("cy", function(d) { return yScale(d); });

svg.selectAll(".y")
   .transition().delay(1000).duration(1000)
   .call(yAxis.scale(yScale));

You might need to play around with how the labels are generated to make it look "nice", but in principle d3 will take care of the entire transition.