Scaling axis to dynamic data.

[Simon]

Hi,

I have a graph that receives constantly changing data which can vary
quite a bit. I saw an example somewhere that seemed to scale the x-
axis to fit some sort of value (I think it was dates), but I can't for
the life of me remember where I saw that example.

Could anyone point me to it? Or if someone could give me a hint to how
to edit value for the drawn axis:

var y = d3.scale.linear().domain([0, 100]).range([height, 0]);
var yAxis = d3.svg.axis().scale(yP).tickSize(-
width).tickSubdivide(true).ticks(10).orient("right");

set up at the beginning of the script, and then I have an interval set
which fetches new data and then adds the new data to the graph.

Thanks,
Simon

[Mike Bostock]

I'm not sure exactly what you're asking. Some of the following come to mind:

* d3.min, d3.max and d3.extent for computing the extent from data.

* setting a scale's domain (e.g., x.domain(d3.extent(numbers)))

* redrawing an axis after updating the scale (e.g.,
svg.select(".x.axis").call(axis))

There are some examples of these here:

http://bost.ocks.org/mike/path/

Mike

[Simon]

Hi Mike,

Thanks that did clear some things up. However, what I was really
looking for was a way of smoothly resetting the scale that is being
used? I guess I didn't really phrase it properly.

The data's max and min change quite drastically some times, and when
this happens I would like the axis's domain to be reset. I've got this
working, but it's a very abrupt switch. I was wondering whether there
is a way to put a transition on this? I thought I saw an example
somewhere that seemed to scale the axis' regularly, but I can't seem
to find it anymore.

Thanks again for responding!

[Mike Bostock]

Sure, you can use a transition when you update the axis. That's shown
in the tutorial I linked. Another example here:

http://bl.ocks.org/1166403

To do a smooth transition on an axis, you update your scale's domain,
and then you start a transition:

svg.select(".x.axis").transition().call(xAxis);

Mike

[Yotam]

Maybe this example would be the one you refer to:

http://www.12devsofxmas.co.uk/2012/01/data-visualisation/

Yotam

[Kamal Reddy]

your link doesnt work, man!

[Yotam]

You're right (just to clarify, (1) it's not my site, (2) websites, like everything else, also have a life expectancy)

Short googling yielded THIS as their cached version.

Luckily, though the front can only be found cached, the examples are working flawlessly.

Cheers.

[Nicolas Fiorini]

Hey Mike, I was really hoping you might be able to give me a tip/pointer as I'm trying to hack away at this problem.

I'm trying to alter the scale on one of my graphs but d3 keeps adding a new 'g' tag every time I run the function to transition and rescale it.

rescaleX(range) {

    this.range = range;

    this.x.scale

      .domain([this.range.min, this.range.max]);

    this.graph.select('.x-axis')

      .transition()

      .duration(1500)

      .ease('sin-in-out')

      .call(xAxis);

  }

I have a constructor where

this.graph -> the svg element

this.range -> x scale (min date : TO: max date)

[Nicolas Fiorini]

and sorry, a correction from below:

this.graph.select('.x-axis')

      .transition()

      .duration(1500)

      .ease('sin-in-out')

      .call(this.x.axis);

the last line: .call(xAxis) -> .call(this.x.axis)

[Kai Chang]

Nicolas,

Your code snippet doesn't have quite enough information to diagnose the problem (the definition of this.x.axis for example). Can you post the full example somewhere on the web so we can see the behavior?

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.